Menu thingy

letasega · May 8, 2008

Ok, here's the deal; I'd like to know how make a drop-down menu with my own background.

Something like this:
(If you click button 1 the menu appears under button1)
_______ _______
|Button1| |Button2|
__||__________||____
|Button|Button|Button|

(Same thing if you click button 2 but it appears under button2)

I'm having some trouble finding something like this that i could easely edit to my own liking.
Of course credits are involved..

I'm not asking you to do it for me, but rather teach me so i could do it myself, if possible.

leafypiggy · May 8, 2008

OK, heres how to do it.

Put this in between <head> & </head>

Code:

<style type="text/css">
/* Regular CSS, edit how you want. This is just for normal text */
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}


/* Edit again....this is the link color */
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>

<script type="text/javascript">

//Contents for menu 1
var menu1=new Array()
menu2[0]='<a href="http://LINK">LINK ONE</a>'
menu2[1]='<a href="http://LINK">LINK 2</a>'
menu2[2]='<a href="http://LINK">LINK THREE</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://LINK">LINK ONE</a>'
menu2[1]='<a href="http://LINK">LINK 2</a>'
menu2[2]='<a href="http://LINK">LINK THREE</a>'

/*menu three..just edit & un-comment
menu2[0]='<a href="http://LINK">LINK ONE</a>'
menu2[1]='<a href="http://LINK">LINK 2</a>'
menu2[2]='<a href="http://LINK">LINK THREE</a>'
*/
		
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

EDIT AS YOU WANT.

Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates two links, one with the menu dropping down onMouseover, and the other, onClick:

Code:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |

<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)

The dropdownmenu() function accepts 4 parameters as shown:

Code:

dropdownmenu(this, event, menuarray, 'width')

Only customize the last two parameters (menuarray and 'width'), where:

3) Menuarray- The array contents you wish the menu to display (see code of Step 1).

4) Width- The width of the menu (pass in "" if you simply wish to use the default menu width).

letasega · May 8, 2008

Thanks

I'll just try to modify it to my liking then

by the way, there was 1 error in the <head> & </head> code, you had menu2 on both menu1 and menu2, but an easy fix and it worked perfectly.

Creds to you!

Menu thingy

letasega

New Member

leafypiggy

Manager of Pens and Office Supplies

letasega

New Member

Free Web Hosting

Our Community

Legal