Drop Down Menu

@AJBurnett34Jun 04.2004

I need a Drop down menu for my site.

My site has a horizontal Nav menu and i need two of my seven buttons to drop down.

Here is my site. ~~[url]~~http://marlinsclubhouse.net/site[/url]

I need them to drop down like on this site (Mouse over “Schedule” Button). ~~[url]~~http://marlinbaseball.com[/url]

to post a comment

8 Comments(s) _↴

@dennicJun 07.2004 — #Hi,

i have created a site called www.garrywynandsphotography.com, check that out to see if that is what you mean.

@AJBurnett34authorJun 10.2004 — #[i]Originally posted by dennic [/i]

[B]Hi,

i have created a site called www.garrywynandsphotography.com, check that out to see if that is what you mean. [/B][/QUOTE]

Yeah thats how i wanted it. Like in your site when you go over the link "Galleries".

I would like the code if you dont mind. What i need is the following:

Just the drop down on your site, but when it drops down i would want 4 links, and those 4 links to drop down again.

Thanks

IM me at Marlinsws2k3 or [email][email protected][/email].

@dennicJun 11.2004 — #ok here is the code that goes in the head menu:



<style>



</style>

<script language="JavaScript1.2">

var linkset=new Array()

//Menu Items

linkset[0]='<div class="menuitems"><a href="Nature.htm">Nature</a></div>'

linkset[0]+='<div class="menuitems"><a href="Glamour.htm">Glamour</a></div>'

linkset[0]+='<div class="menuitems"><a href="Portraits.htm">Portraits</a></div>'

linkset[0]+='<div class="menuitems"><a href="Weddings.htm">Weddings</a></div>'

linkset[0]+='<div class="menuitems"><a href="Commercial.htm">Commercial</a></div>'

linkset[1]='<div class="menuitems"><a href="Contact-Details.htm">Contact Details</a></div>'

linkset[1]+='<div class="menuitems"><a href="Enquiry.htm">Enquiry</a></div>'

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

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

var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)

return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""

menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)

menuobj.innerHTML=which

else{

menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')

menuobj.document.close()

}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width

menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

eventX=ie4? event.clientX : ns6? e.clientX : e.x

eventY=ie4? event.clientY : ns6? e.clientY : e.y

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

if (rightedge<menuobj.contentwidth)

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth

else

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight)

menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight

else

menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY

menuobj.thestyle.visibility="visible"

return false

}

function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function hidemenu(){

if (window.menuobj)

menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"

}

function dynamichide(e){

if (ie4&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}

function delayhidemenu(){

if (ie4||ns6||ns4)

delayhide=setTimeout("hidemenu()",500)

}

function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}

function highlightmenu(e,state){

if (document.all)

source_el=event.srcElement

else if (document.getElementById)

source_el=e.target

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

else{

while(source_el.id!="popmenu"){

source_el=document.getElementById? source_el.parentNode : source_el.parentElement

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

}

}

}

if (ie4||ns6)

document.onclick=hidemenu

</script>

then just below the body tag:

<body>

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">

</div>

then the actual menu itself:



<table width="760">

<tr>

<td align="center" width=127>

<div id="menu"><a href="Index.htm"><b>Home Page</b></a></div>

</td>

<td align="center" width=127>

<div id="menu1"><a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"><b>Galleries</b></a></div>

</td>

<td align="center" width=127>

<div id="menu2"><a href="Nature.htm"><b>Nature</b></a></div>

</td>

<td align="center" width=127>

<div id="menu3"><a href="Commercial.htm"><b>Commercial</b></a></div>

</td>

<td align="center" width=127>

<div id="menu4"><a href="Publications.htm"><b>Publications</b></a></div>

</td>

<td align="center" width=127>

<div id="menu6"><a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"><b>Contact</b></a></div>

</td>

</tr>

</table>

not exactly sure how to nest it within a nest, if you understand what i have just tried to say.

@AJBurnett34authorJun 11.2004 — #hey thanks for the code

does anyone know how i can make it drop STRAIGHT down....and not to the side?

i also need to nest the Drop down menu. how can i do that?

I want it like this http://marlinbaseball.com

Put your mouse over "Roster" then it drops down, in that same drop down click on "Pitchers" and it drops down again. Thats what i need.

Thanks

@David_HarrisonJun 12.2004 — #Have you had a look at [url=http://www.udm4.com/]this[/url]?

@AJBurnett34authorJun 12.2004 — #[i]Originally posted by lavalamp [/i]

[B]Have you had a look at [url=http://www.udm4.com/]this[/url]? [/B][/QUOTE]

Yeah i checked it out, but im not allowed to download programs to my computer.

@David_HarrisonJun 12.2004 — #It's not a program, it's a DHTML menu.

@AJBurnett34authorJun 12.2004 — #one problem i have is that i have an image. That image needs to drop down and then in the list that drops down, i need it to drop down again.

Its complicated for me to put a script with the image i have.

example:http://marlinsclubhouse.net/site

I need to make the "roster" button drop down multiple times like how i explained above.

Also in #JavaScript _↴

Anyone have functions for decimal/bcd calculations?Changing image everytime page refreshed Decision Analysis tools in JavaScript, something different

Success!

Help @AJBurnett34 spread the word by sharing this article on Twitter...

Tweet This

Drop Down Menu

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop Down Menu

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴