Sliding JavaScript Dropdown Menu

Very good. Thanks very much Michael. I tried it on a page with a couple of mootools snippets and they all got along very well No conflicts.
Keep up the great work!

Neil on 28 Apr 2008 at 2:16 am

Looks very nice! Although I’d rather use a <ul> structure…

Paul on 28 Apr 2008 at 3:55 am

Very good the tutorial. I will use in a new project

Tiago Celestino on 28 Apr 2008 at 6:26 am

@Paul, actually, an ul inside and dl it would be perfect

dl
dt Dropdown 1
dd
ul
li Option 1
li Option 2
li Option 3

Diego on 28 Apr 2008 at 8:21 am

@Paul – The content of the dropdown could easily be an unordered list with little modification. Just switch up the HTML a bit and add the appropriate CSS classes.

@Diego – Excellent suggestion. I definately do recommend using existing HTML tags in lieu of classed divs. I will take a look at incorporating those tags and update the post if I like how it works out. I have never actually used definition lists in any project so it will be new to me. Thanks.

Michael on 28 Apr 2008 at 8:32 am

[...] блог Майкла Лейгебера. Категория: JavaScriptАвтор: Spider Дата: 28 Апрель 2008 Время: [...]

Выпадающие меню на JavaScript | АяксЛайн.ру on 28 Apr 2008 at 4:06 pm

Sliding JavaScript Dropdown Menu - Web Development Blog…

This lightweight drop down menu script allows you to easily add smooth transitioning dropdowns to your website This can be used for navigation dropdown lists info panels etc…

roScripts - Webmaster resources and websites on 28 Apr 2008 at 6:15 pm

HA! That is so funny, a friend of mine just sent me a zipped up javascript menu today..and this is it.

VERY easy to customize, a real treat.

Steph on 28 Apr 2008 at 10:23 pm

[...] Sliding JavaScript Dropdown Menu – Web Development Blog (tags: javascript) [...]

Skylog » Blog Archive » links for 2008-04-29 on 29 Apr 2008 at 12:30 am

Very nice Micheal! Works well in IE and FF!

Srikanth on 29 Apr 2008 at 6:13 am

Is it hard to make a submenu with this example?

Augusto on 29 Apr 2008 at 8:46 am

@Augusto – Submenu functionality is not incorporated currently as I wanted to keep it as simple as possible for those that did not need them. It wouldn’t be too difficult to add a popout submenu though. You would treat it as if it were its own independent menu and position it in relation to the top level menu selection. Of course you would also need to cancel the timer on the primary menu when you enter the second level menu. Just shoot me an email if you need assistance.

Michael on 29 Apr 2008 at 8:57 am

Cool, but… what about keyboard navigation? And submenus? Maybe in 2.0 version

Walmar on 29 Apr 2008 at 10:43 am

@Walmar – Absolutely, I have had a few requests for submenus so I will get that as well as keyboard navigation added in soon so check back shortly.

Michael on 29 Apr 2008 at 10:49 am

[...] Sliding JavaScript Dropdown Menu – Web Development Blog (tags: javascript menu ajax css navigation dropdown) [...]

links for 2008-04-29 « toonz on 29 Apr 2008 at 5:34 pm

[...] Sliding JavaScript Dropdown Menu – Web Development Blog via kwout [...]

アニメーションつきのドロップダウンメニューを on 29 Apr 2008 at 6:17 pm

[...] This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. [...]

StyleCrunch » Blog Archive » Sliding JavaScript Dropdown Menu on 30 Apr 2008 at 1:40 am

Nice work, I hope you are recognized for your efforts. Do you have development on a similar but vertical flyout menu? That would complete the set!

peter on 30 Apr 2008 at 7:01 am

@peter – Thank you. I have a few more scripts on my list and will definately add a flyout menu to it. I am always open to suggestions. Just email me at michael@leigeber.com.

Michael on 30 Apr 2008 at 7:47 am

[...] Javascript ile yapılmış geçiş efektli açılır menü. Bağlantı [...]

Fatih Hayrioğlu'nun not defteri » 05 Mayıs web’den seçme haberler » Javascript, yapılmış, geçiş, açılır, menü, Bağlantı, DataGrid, ipuçları, olayları, Hatırlatmakta on 05 May 2008 at 1:44 am

[...] http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ [...]

javascript menü - Volkan Şentürk on 05 May 2008 at 9:50 am

hi

whats the best way to add a top-level item to this nav that doesn’t have a drop-down menu attached?

cheers
hasta

hasta on 08 May 2008 at 11:12 am

@hasta – I helped someone else with this a few days ago. You can see what I demoed to them at http://sandbox.leigeber.com/dropdown2/dropdown.html. Basically you want to create a block link and float it to the left. Shoot me an email if you run into any problems michael@leigeber.com.

Michael on 08 May 2008 at 12:18 pm

thats great. thanks for the speedy reply
hasta

hasta on 09 May 2008 at 3:36 am

[...] Sliding Dropdown Menu / Javascript [...]

Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog on 13 May 2008 at 2:52 pm

How do i sent it to make the menu disply on the right instead of down?

Gary on 15 May 2008 at 11:34 am

@Gary – I have started working on that, hopefully I will finish up in the next couple days. There are a couple issues that make it a little less easy that just changing a couple variables. Feel free to shoot me an email in a couple days if I haven’t posted an update.

Michael on 15 May 2008 at 12:12 pm

Is there a way to change direction of the slide down javascript menu? If so how do you do that?

Thanks

Grace on 16 May 2008 at 5:49 pm

@Grace – I hope to have a vertical menu released tonight or tomorrow. If you are looking for something else let me know.

Michael on 16 May 2008 at 7:18 pm

[...] animated JavaScript flyout menu is clean and lightweight at only 1.6kb. This is based on the post a few weeks ago of a horizontal dropdown menu. The markup is the same so visit the horizontal menu post for [...]

Vertical Flyout JavaScript Menu - Web Development Blog on 17 May 2008 at 12:06 am

WOW this is a great script! Would it be difficult to change it to slide up and with a submenu that could slide up also and overlap? or would that just be too hard to configure?

Todd on 17 May 2008 at 8:39 pm

@Todd, I just put together a slide-up version this morning on request at http://sandbox.leigeber.com/dropdown3/dropdown.html. As for the sub-menus, it is definitely on the to-do list. I will shoot you an email when I have it ready.

Michael on 17 May 2008 at 8:52 pm

This is a very nice script i will certanly be using it asap my only concern is accesibility. If the browser dosent support javascript or the user has it turned off the navigation is totaly hidden. I have slightly modified the code to use an onload hide function which solves this. If the comments are removed the modified script is only 1.54kb. Have a look at the modified script @

http://www.t-brown.co.uk/scripts/sliding_dropdown_modified.zip

Tom on 19 May 2008 at 12:29 pm

@Tom – Thanks for the feedback. I am big on accessibility and depending on the implementation and requirements it can be handled differently. You could mesh the script along with an onload and the :hover pseudo-class to create a non-animated dropdown when JS is not present, of course that would require browser support for :hover. Alternatively you could just have the main dropdown link something like this… <a href=”link.html” onclick=”function(); return false;”>link</a> where it could link into a top level page or landing page of some sort. Thanks for sharing the zip.

Michael on 19 May 2008 at 1:01 pm

@Michael – No problem hope it can be of some use to others, congrats again on the great script.

p.s. forgot to mention the slight alteration i made to the list css too:

…<li><a href=”#” class=”top”>Navigation Item 1</a></li>
<li><a href=”#”>…

.dropdown a {border-top:1px solid #b9d6dc;…
.dropdown a.top {border: 0;}

I do alot of work with CMS and styling lists like this makes automated population easyer and saves a few more bytes =)

Tom on 19 May 2008 at 2:45 pm

I had a dropdownmenu on my site but i was not satisfied, but now I do!! This is perfect! It’s very easy to use, thank you very much .
A satisfied girl from the netherlands

Marjolein on 20 May 2008 at 4:35 pm

I’m also from the Netherlands.
I like the menu very mutch and it’s beautiful.

But I have one question about it:
Is it possible to make a sub-sub menu?
A Navigation item 1.1.1?
The first 1 is the Horizantal menu button
The second 1 is the first drop down menu item
The thirt 1 is the sub menu from the second 1.

Joey on 21 May 2008 at 3:21 am

@Joey – Have had this question a few times so I will be adding multi-level support in the next week. I will notify you and others when I have it live. If you cannot wait then it should not be too hard to extend the current script.

Michael on 21 May 2008 at 8:00 am

nice work done, but i need sub-sub menu. hope i’ll get soon…

Sac on 23 May 2008 at 3:48 am

can there be a multi column dropdown version of this script? I’ve been looking around for one for a year and no one has done a sleek dropdown like yours.

sample: johnlewis.com

joachim guanzon on 26 May 2008 at 11:24 am

@joachim guanzon – Shoot me an email I can help you out. You should be able to just modify the CSS and markup to get multiple columns. michael@leigeber.com

Michael on 26 May 2008 at 11:29 am

Hey, just wanted to say I’m using this script for a website I’m designing and it works great. (Though it seems to run slow on Opera and Firefox, for some reason)
I had a semi-outside question, in that I can’t figure out how in the world to center this. Forcing the menu to the left side of the page would work, but centered looks better. =) I’ve tried surrounding it with “margin: 0 auto” divs but that hasn’t helped any. Any ideas?

Thanks.

Slash on 27 May 2008 at 8:13 am

@Slash – Different browsers handle the timeout speed a little differently. In particular IE will usually seem faster than others but it is not performance-related, just how they handle things. I helped someone with a couple issues including centering and you can see it at http://sandbox.leigeber.com/dropdown2/dropdown.html Shoot me an email if you can’t figure it out from viewing the source on that demo.

Michael on 27 May 2008 at 8:32 am

I like this menu a lot, but it’s just got a few things I can’t get working.
> Would it even be possible to get onclick and onblur working? (I know dt doesn’t support onblur).
> Is there an easy way to position the menu? Like, right or left? I’m asking because the dropdown will have multiple instances and they can be on the left and/or right side of the page. Left is fine like it is, but the ones on the right have to have their extra width go left of the ddheader, being pinned to the bottom right corner of the menu.

m3talc0re on 27 May 2008 at 2:22 pm

m3talc0re – The things you mentioned here should not take too much customization. The menu should support whatever mouse events you need and the positioning can be completely controlled through the markup/css, you are not locked in to floating everything to the left. I would be happy to help you, just shoot an email to michael@leigeber.com with a link.

Michael on 27 May 2008 at 2:27 pm

Hi Michael! I need sub sbu menu, will u please tell me when u’ll post that.

-Thank’s

Sac on 28 May 2008 at 4:04 am

@Sac – Certainly, will do my best to get it out this week.

Michael on 28 May 2008 at 8:32 am

Michael,

Thanks for the help previously. I was trying to avoid having to have a fixed pixel width for the page I’m designing, but it looks like that’s the only way to get it to center appropriately.

One more question though, is there any w3c-valid way to make the top entry of the list (that is, the part you rollover to get the rest to drop down) into a link? Putting an anchor around the whole <dl> area works, but the validator gripes at me. =)

Just curious, thanks!

Slash on 28 May 2008 at 9:08 am

@Slash – I believe both of your issues can be resolved. Shoot me an email with a link to where you are now and I will get back to you when I can with my thoughts. michael@leigeber.com

Michael on 28 May 2008 at 9:15 am

This is great, I will use it for one of my client sites.

Cheers!

Tyler on 28 May 2008 at 5:37 pm

@slash,

If it has succeeded to make a link in the head part. May I then have your script so that I also can use a link in the head of the dropdown menu balk.

@michael,
Thanks, that you would make a sub-sub-menu. I’m still waighting at the release.

It’s possible that there are a few language errors are in my comment. Because I live in the Netherlands and my English isn’t very good.

Joey on 29 May 2008 at 8:46 am

I need that selected index would be displayed on the screen and I can’t do this,could you help me,please

Solnyshko on 31 May 2008 at 6:34 am

@Solnyshko – Not sure exactly what you are asking. Shoot me an email with clarification and I will do what I can to help.

Michael on 31 May 2008 at 11:41 am

Hey Michael. Thank you for making your code available, I think a lot of people appreciate it a lot.
Unfortunately I ran into the IE z-Index bug with your menu solution, might be an issue for others too. Send you an eMail.
All the best
Lars

Lars on 02 Jun 2008 at 3:26 am

Hi Michael,
Is there an easy way to make the background of the dropdown menu transparent ?

Cheers !

Stephane on 03 Jun 2008 at 10:11 am

Stephane – To make the background completely transparent you could just remove the background color on the list elements in the CSS.

Michael on 03 Jun 2008 at 10:30 am

Solved my problem by using different positioning for certain design elements.
Thank you

Lars

Lars on 05 Jun 2008 at 9:55 am

Hello folks,

Below is part of a drop-down menu i’ve created for my project. On I.E. Sub-menus onhover appear downwards. May i know what do i need to change on the Javascript/CSS/etc. to make sub-menus onhover to appear to the right side please? Thank you very much for your promt answers.

XHTML:

<li>
<a href=”smoking_index.html”

onmouseover=”mopen(’m1′)”
onmouseout=”mclosetime()”>Living life as an addict</a>

<div id=”m1″

onmouseover=”mcancelclosetime()”
onmouseout=”mclosetime()”>

<a href=”smoker.html”>Who’s a smoker?</a>
<a href=”smokerlife.html”>How’s a smoker’s life like?</a>
<a href=”facts.html”>Facts</a>

</div>
</li>
</ul>

Javascript:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function mopen(id)

{ mcancelclosetime();

if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ‘visible’; }

function mclose()

{ if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’; }

function mclosetime()

{ closetimer = window.setTimeout(mclose, timeout); }

function mcancelclosetime()

{ if(closetimer)

{ window.clearTimeout(closetimer);
closetimer = null; }
}

document.onclick = mclose;

Regards,
Lawrence

Lawrence on 05 Jun 2008 at 10:06 pm

@Lawrence – This may be what you are looking for http://www.leigeber.com/2008/05/vertical-flyout-javascript-menu/

Michael on 06 Jun 2008 at 9:32 am

Hi Michael! This is such a cool dropdown menu. Ive been playing and testing it with succes. But I cant figure out one thing. How can I <a href the main menu items? The way im doing it is wrong cause im getting the submenu css properties.

I hope you can help me with this, Thanks!

Juki -> Netherlands

Juki on 07 Jun 2008 at 5:36 am

@Juki – You would just need to nest a link in the dt. Of course you might want to make the link a block and alter the dt CSS so the link fills the entire area. Shoot me an email if you can’t get it worked out.

Michael on 07 Jun 2008 at 10:22 am

@Michael,

What’s the status of the sub-sub menu?
I’m still waiting at the release.

joey on 09 Jun 2008 at 3:19 pm

@joey – Had hoped to release last night but have run into an ugly IE6 issue as usual. Will continue this evening if I have some time.

Michael on 09 Jun 2008 at 3:25 pm

Awesome! Thanks for sharing this. One question: How can I change it so that the menu background fades to only, say, 75% opacity?

Thanks again!

Bill on 09 Jun 2008 at 8:09 pm

Michael, Love the menu! I was thinking of doing something similar using script.aculo.us, but then I came across your menu. It looks good and it’s much more lightweight than the script.aculo.us version would be, I think. Anyway, I really need an additional level for the site I’m working on (you know, the sub-sub menu everyone is asking for). What is your eta on having a working version of that? Thanks so much!

Erik on 10 Jun 2008 at 11:26 am

@Erik – I would like to say this evening but I can’t say for sure. All I lack is a stubborn IE issue I have to work around. I will shoot you and others an email when it is active.

Michael on 10 Jun 2008 at 3:11 pm

Hello Michael, what a splendid menu! But I have a small problem.
When i use your menu, and say use 5 menus in a row beside each other, and i want one button to have no dropdown-menu but only a link, how do i inplement this in the html? or should i use, for this single button, a mouse-over script. Thanks, John

John Devriesch on 11 Jun 2008 at 3:59 am

@John – It really depends on your situation. You could just use the same style in the CSS for the dt tag on a class for your static links and then simple add in a link where you need it. There are a few ways to tackle it. Shoot me an email if you need help.

Michael on 11 Jun 2008 at 8:06 am

Hi Michael, The drop down looks great. Thanks for sharing. I just wondered if you have created or seen anyone use unordered lists layout for the drop down trigger instead of definition lists? I’m hoping to incorporate this into a site using the modX CMS.

Andy on 11 Jun 2008 at 10:44 am

@Andy – Originally the menu was using block links and unordered lists so it is definitely possible with little modification. Shoot me an email and I can help you work through it.

Michael on 11 Jun 2008 at 12:39 pm

@Michael,

What do I wrong to make a link in the head section:
My dropdown.html file:
[code]
<dl class="dropdown">
<dt id="1-ddheader" onmouseover="ddMenu('1',1)" onmouseout="ddMenu('1',-1)">
<a href="/index.htm">Algemeen</a></dt>
<dd id="1-ddcontent" onmouseover="cancelHide('1')" onmouseout="ddMenu('1',-1)">
<ul>
<li><a href="/index.htm">Home</a></li>
<li><a href="/contact.htm">Contact</a></li>
<li><a href="/forum/">Forum</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="2-ddheader" onmouseover="ddMenu('2',1)" onmouseout="ddMenu('2',-1)">
Gratis software</dt>
<dd id="2-ddcontent" onmouseover="cancelHide('2')" onmouseout="ddMenu('2',-1)">
<ul>
<li><a href="/Gratis%20software/index.htm">Gratis
software</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="3-ddheader" onmouseover="ddMenu('3',1)" onmouseout="ddMenu('3',-1)">
Tools</dt>
<dd id="3-ddcontent" onmouseover="cancelHide('3')" onmouseout="ddMenu('3',-1)">
<ul>
<li><a href="/Tools/Radio/index.htm">Online
radio</a></li>
</ul>
</dd>
</dl>

<div style="clear:both" />
[/code]

And my Stylesheet .css file:
[code]
body {margin:25px; font:12px Verdana, Arial, Helvetica;}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/menu/header.gif)}
.dropdown dt:hover {background:url(images/menu/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
[/code]

Joey; The Netherlands

Joey on 12 Jun 2008 at 5:52 am

@Joey – It will be a lot easier for me to look at if you can send me a link to your page… michael@leigeber.com

Michael on 12 Jun 2008 at 8:18 am

@Michael

I have send a mail to you. With my websiteadress and information.

Joey: The Netherlands

Joey on 13 Jun 2008 at 9:47 am

Thank you for this wonderfull dropdown menu. It really is the best of its kind !

Blix on 13 Jun 2008 at 7:46 pm

Thank you so much Michael for leaving me your reply. And i’m terribly sorry for this late reply. You are just that one-of-the-kind nicest person around.

Lawrence on 16 Jun 2008 at 2:45 pm

First things first, this nav is outstanding, and it makes idiots like me look like a wizard. for that, i think you greatly. On to the point…

This may be somewhat contrary to the concept of a CSS nav, but i have… unique clients that require the use of an image as the main nav link, with the animated flyout. I was wondering if there’s a decent way to do this instead of using a css text based top nav link?

JB on 17 Jun 2008 at 12:32 am

Hey, I love this script:) Its great.

Could you please tell me how i would go about making sub menus for this, like, having a dropdown menu within a drop down menu. Thanks.

COdie on 17 Jun 2008 at 5:34 am

@JB – Sure, you could just remove the padding from the dt and add in an image or use CSS background images through the use of different classes for each. Shoot me an email if you get hung up on anything.

@Codie – I have been working on this and will hopefulyl get some time to look at it again. http://sandbox.leigeber.com/multilevel/

There are a few tricky issues, particularly with IE.

Michael on 17 Jun 2008 at 8:18 am

@Michael, that is exactly what Im looking for, could you post the source code for that, sorry im still noob, only started about a month ago. Thanks.

COdie on 17 Jun 2008 at 8:42 pm

@Michael, Looked at your sandbox version of the multilevel nav. I took a quick look in IE6 and didn’t notice any immediate issues. Maybe I didn’t look hard enough. Can you explain the issues you are seeing and trying to resolve?

Again, thanks for all your work on this menu and your willingness to share. You have really done an amazing job!

Erik on 18 Jun 2008 at 7:51 am

@Michael, Actually I just modified your code to fit my needs and I see more of a problem with my multilevel version in IE6 than I see with yours. I’m not sure where I went wrong… Have a look if you’d like.

http://projecto3.com/clients/covenant_dropdown/index.html

Erik on 18 Jun 2008 at 8:04 am

@Codiue and Erik – I will try and wrap it up today. I fixed another bug yesterday and have 2 left. I will add a new post then.

@Erik – As for your issue, looks like an IE only thing. I really need to spend my time wrapping this up and then after I release the final code if you are still having problems I will take a look.

Michael on 18 Jun 2008 at 8:27 am

excellent code!
question: is there a way to have the dt element (’Dropdown One’ in the demo) stay ‘active’ with the hot color (darker color in the demo) when you mouse over the dropdown items instead of switching back?

mothra9999 on 20 Jun 2008 at 12:15 pm

@mothra9999 – It would have to be done with the JavaScript, it should only be two lines of code. One in the ddMenu that appends another class to the header and then one in the ddCollapse function that removes that classname. Shoot me an email if you can’t get it figured out.

Michael on 20 Jun 2008 at 3:45 pm

Thanks for the great example! Is there any way to make it so the drop down opens and closes on click instead of on mouseover?
I got it to open on click by changing the mouseover to this: onclick=”ddMenu(’one’,1)” which works. Though is there a way to get it to close by clicking on the main menu tab again?
Thanks!

Eric on 21 Jun 2008 at 2:23 pm

@Eric – It can definitely be done. I am a little tied up the next day or so but shoot me an email if you can’t get it worked out and I will do what I can to help.

Michael on 22 Jun 2008 at 9:51 am

Michael – Great script. Very clean and straightforward. Excellent job as far as I can tell.

I’ve been playing with the multilevel and noticed if you hold your mouse over a sublink (IE7) and just let it hover there for 15 seconds or so, the page length starts to buildup and te scroll bar on the page keeps increasing.

Not sure if you were aware of that. Great job though!

Chris on 23 Jun 2008 at 4:30 pm

@Chris – Thanks, yea I am aware, it is one of the couple remaining issues with the script. I just haven’t had any time lately to wrap it up.

Michael on 24 Jun 2008 at 8:35 am

Michael – thank you very much for this script! This is the coolest dropdown menu I’ve found. Really, really great.
However, I am having a problem with the menus flashing and displaying behind a .swf – in IE and firefox. I’ve added wmode=”transparent” to my object and embed tags for the swf, but still no joy. Have you seen this before? Any suggestions?

haymaker on 27 Jun 2008 at 1:52 pm

@haymaker – Email me a link and I will look into it. If you have the flash embedded correctly it should not be an issue.

Michael on 29 Jun 2008 at 6:25 pm

Awesome, this solves my problem with my non-flash commitment. Thanks a lot!

Louis on 30 Jun 2008 at 5:12 am

Great job. Waiting to see the multilevel one.

Jorge on 30 Jun 2008 at 12:14 pm

Great job. I do have a problem however, I’m using this drop-down bar for a wiki, and it tends to render wrong (submenus are shifted towards the right). Any suggestion? I myself am not such a CSS/JS expert…

Antoine on 01 Jul 2008 at 10:48 am

@Antoine – Have you checked to be sure that your CSS is in place and that none of your existing CSS shares the same class/id names as the dropdown styles? Shoot me an email if you don’t see a conflict and I will dig into it.

Michael on 02 Jul 2008 at 8:01 am

Michael, any luck with the problem that haymaker was having? I’m having a nightmare with Firefox 2 on Mac when the menu appears directly above a Flash object. I’ve tried everything I can in terms of z-index, wmode=transparent (and opaque), etc. etc., and am having no joy.

I think my last option must be to just detect for FF2 and show an image instead of Flash?

Any help would be much appreciated.

Ben on 03 Jul 2008 at 1:53 am

Oops and I forgot to say what my problem even was! Basically, it’s to do with FF2’s hatred/refusal of the CSS ‘opacity’ property when combined with Flash (on Mac at least). As soon as the menu slides down (and thus the bits with opacity on them touch the Flash object), the Flash disappears completely. I’ve found some info about this here:

http://jakeo.org/blog/2007/03/16/css-opacity-and-flash-transparency-in-mac-firefox/

But have been unable to apply his fix to this menu.

Ben on 03 Jul 2008 at 1:56 am

Hi Michael, its really good work. Do u have any idea how to use menu source as xml like ajax switch menu http://www.getelementbyid.com/scripts/doc/AjaxSwitchMenu.html

Thanks alot

veeru on 04 Jul 2008 at 4:16 am

@Ben – I was not aware that FF had an issue like that. Unfortunately I do not have a mac to test on so getting that resolved will be difficult. If I can get hold of a mac I will check it out else let me know if you ever get it resolved. Thanks.

@veeru – Sure, it wouldn’t be hard to parse XML for the menu structure. I will add JavaScript XML parsing to my post todo list.

Michael on 04 Jul 2008 at 8:19 am

Agreeing with everyone.. GREAT script. Two quick questions… 1. Can this work together with your other script “Sliding JS Menu Highlight” http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

and 2. Can this work without using a DL and just use a div and ul, li combination (as that’s the way I have the Sliding JS Menu script working)… Let me know. – Thanks again!

fritzd on 04 Jul 2008 at 7:17 pm

Thanks for replying Mike. My solution was to just place the Flash object in a div with a background image that looks identical to the Flash (just without animation), so that when the Flash does disappear, the FF2 Mac users will hardly notice.

The CSS-transparency-freaking-out-with-Flash issue has been fixed in Firefox 3 so there’s no need to worry about it really!

Ben on 05 Jul 2008 at 12:33 am

Dear Michael

Plz let me know that when ur trying to give support for xml datasource. Thanks alot
Veeru

veeru on 05 Jul 2008 at 10:54 am

@fridtz – Sure you could combine the two scripts, should not be a problem. It would also be a pretty easy change to use simple unordered lists Shoot me an email if you need help.

@Ben – Glad it got resolved.

Michael on 06 Jul 2008 at 2:02 pm

Nice menu.

i have been trying to center the menu but, whatever i do, it still pushes the dropdown to the right.
is there a way to fix that?

mahyar on 07 Jul 2008 at 10:29 am

Very nice menu.

I have been waiting for the multilevel menu. Can you tell me when would that be live.

Thanks

Bharat on 10 Jul 2008 at 7:05 am

Hi,

I tried to use your Sliding JavaScript Menu Highlight script with this one. However, I couldn’t get both of them work at the same time.

Any ideas?

http://www.taksimapartments.com/en/

Dropdown menu is under apartments.

Thanks,

Gercek Karakus on 11 Jul 2008 at 7:00 am

You can contact me from gercekkATgmailDOTcom

Gercek Karakus on 11 Jul 2008 at 7:01 am

[...] 1: Get this JavaScript menu (.js) and put it into [...]

jsedlak » Blog Archive » Theming SharePoint (5 of Infinite) on 11 Jul 2008 at 11:32 am

Hi ! this script is awesome ! i try to embedd it into a Wordpress blog, but i don’t know exactly how to do it… i uploaded the .js and the css to the theme’s folder, and then past in the header.php the html code … but i’m afraid i need to write something in php language … ? well, any tip will be welcome !

ignacio on 11 Jul 2008 at 12:50 pm

@ignacio – It depends on what links you will including in the dropdown. Shoot me an email with the details/link and I will point you in the right direction.

Michael on 11 Jul 2008 at 5:50 pm

Hi! Excellent script, but have a question if you have the time to answer. I used the src code and scripts for the sub-sub menu, got it working on it’s own. As soon as I use it as an include file in .asp it stops working. Any suggestions? I had used your sub menu dropdown and it was great, then the client needed sub-sub menu dropdown, so had to change and now can’t get it working when it is included.

Lauren on 17 Jul 2008 at 7:42 am

@Lauren – That doesn’t make much sense unless there is a JavaScript conflict of some sort. There is nothing specific to ASP that should cause a problem. Shoot me an email with a link if the site is external and I will dig into it.

Michael on 17 Jul 2008 at 5:50 pm

Thanks a lot for this nice looking piece of work, Michael… I played around with this script today and noticed that after the menu slides down and up again, there’s a small 4 px wide area underneath it… you can check this easily if you set a black background or turn opacity to 1 and take away c.style.opacity = currh / c.maxh; and // c.style.filter = ‘alpha(opacity=’ + (currh * 100 / c.maxh) + ‘)’;… i checked c.style.height = currh + (dist * d) + ‘px’ for this and actually this variable never drops below 4px… i’ll keep on working it, but maybe you have an idea why that is and can help me out… hope to hear from you <- using FF3/SeaMonkey

Thallah on 19 Jul 2008 at 12:39 pm

ok, i am a little step further with my problem (above post): it seems like there is some issue with DDSPEED. when i set DDSPEED to < 2 everything works fine but any value above 2 will lead to some (not wanted) space below the menu bar, the size of this area changes with the value of DDSPEED (a value of DDSPEED = 100 will leave an area the size of Navigation Item 1 and 2 for example)… a value of DDSPEED = 2 and DDTIMER = 35 will lead to an acceptable result. i still would be interested in your opinion if there is any (other) way to fix this, otherwise a comment in the .js file might be helpful.

Thallah on 19 Jul 2008 at 1:40 pm

allright, i changed a single line of your code and now it works fine for me: instead of if(dist <= 1 && d == 1) in your ddSlide(c,d) function i just used if(dist < 1) so that dist will be set to one on expand and contract, not only expand. if you know that this will lead to some unexpected result, please let me know again, thanks for your code, it really was fun ‘reading’ it, guess i learned quite a lot today

Thallah on 19 Jul 2008 at 7:37 pm

Link Menu root? Ex: Link: menu: Home, Conntact.

Trung on 22 Jul 2008 at 2:09 am

In IE(6) when the dropdown menu is collapsed the menu is not completely hidden but a tip of the top area of menu is still viewable.Anybody noticed this?Any solution?

sijo on 22 Jul 2008 at 2:57 am

I have 4 of these menus on my page. For some reason, only one is working. Any ideas?

JoeS on 22 Jul 2008 at 8:46 pm

never mind. figured it out.

JoeS on 22 Jul 2008 at 9:13 pm

@sijo
i discovered the same problem… just replace if(dist <= 1 && d == 1) with if(dist < 1) in the js ddSlide(c,d) function

Thallah on 23 Jul 2008 at 5:34 am

@Thallah – Sorry I didn’t get back to you sooner, glad you got it worked out. Thanks for the little fix you posted too, I will take a look.

@Trung – I am a little confused by your message. Shoot me an email with a better explanation of what you are looking for.

Michael on 23 Jul 2008 at 11:07 am

Dear Michael,

I am still kinda waiting for the multilevel menu. Is there a way you can tell me how to make it.

Thanks,
Bharat

Bharat on 23 Jul 2008 at 2:41 pm

Wow, this is a really great script… Very easy to use! I’m relatively inexperienced with javascript, but updating this seemed to be a snap once I figured out all the css properties.

Having one small problem with it. A number of the pages I’m working on have embedded Youtube or Google videos on them. On some browsers the dropdown menus appear behind the first video instead of in front of it, essentially cutting off the bottom of the menu. What can I do to avoid this problem?

Here’s a link to the workpage of the site I’m using the script on: http://www.nosediveproductions.com/NosediveRev2008/VideoProductions.html If you could give any feedback on the video issue, or any other concerns you see, it would be much appreciated.

Pete on 28 Jul 2008 at 6:23 pm

Thank you for the great code. Nice job!

I have a question. When less than three navigation items used in the dropdown and after having it rolled over, it leaves a light shadow at the bottom of the menu box. Is there way to get rid of this shadow?

Thanks in advance,

JP

JP on 29 Jul 2008 at 3:49 pm

Hello, Actuallly i m a beginner in this…so please tell me how to use your codes in the edit html of the blogger

Rahul Bairathi on 29 Jul 2008 at 9:19 pm

my email address is
bairathirahul@gmail.com

Rahul Bairathi on 29 Jul 2008 at 9:20 pm

HI michael you are really great. i thought you would not reply to my mail regarding accordion. but you sent the mail with solution. hat’s off

palaniappan on 30 Jul 2008 at 2:15 am

This is such a lovely menu.
Not trying to sound impatient, but is there any progress on the multi-level support yet?

Thank so much!

Nekita on 02 Aug 2008 at 12:28 pm

@Pete – You need to use the wmode attribute, set it to transparent.

@JP – I believe Thallah may have posted a fix above. I have not looked it it yet so I cannot say for certain. I will try and get a fix posted soon wither way.

@Rahul Bairathi – I don’t know anything about the Blogger editor, sorry.

Michael on 03 Aug 2008 at 9:58 am

Hi,

The menu bar can’t change image on hover (header_over.gif) in IE6. But it seems that the multilevel version is ok in IE6. Is there any fix for this for the non-multilevel version?

Thanks.

Vincent on 03 Aug 2008 at 10:39 pm

Hi,

Great great menu! Thanks so much! I’m planning on using it in a site i’m developing. However, i do have a problem..when i go to the multi-level drop down page and download the webpage completely, if i run it locally using firefox, it seems that the codes don’t work anymore. The top level menu doesn’t even drop. Can anyone help me on this? Appreciate it a lot!
Thanks!

Dane on 04 Aug 2008 at 6:36 pm

i have the drop down menu working well, i would also like the slide up, on the same page.

how do i implement the slide up effect?

thanks

dave on 07 Aug 2008 at 11:49 am

i have the slide up working successfully, but i can only get one of them to work on the same page – not both – any suggestions? thanks

dave on 07 Aug 2008 at 5:30 pm

Micheal,
Did you get the submenu code posted/finished. This is great but I need to have horz. subs under a few of the dropdowns. Thanks Greg

Greg on 08 Aug 2008 at 9:17 am

Wonderful, think I have it figured out. Thanks for the help!

Pete on 08 Aug 2008 at 11:59 pm

There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure

Brian on 10 Aug 2008 at 7:15 pm

hey, i have a question, what if you are using table instead of <dl>? how can you modify it? it seems like its not working if you’ll embed this to a table tag

joy on 11 Aug 2008 at 12:07 am

This is probably a dumb question, but the dropdown only seems to work when the mouse is above and below the text. When it is on the text the cursor turns to the text tool and the dropdown disappears.

KJ on 11 Aug 2008 at 12:33 pm

Nevermind – I had a conflicting div and just had to change the z-index. Sorry! Thanks for the great tutorial!

KJ on 11 Aug 2008 at 1:05 pm

[...] – bookmarked by 3 members originally found by rottingtreesandgrass on 2008-07-28 Sliding JavaScript Dropdown Menu http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ – bookmarked by 1 members [...]

Bookmarks about Dropdown on 12 Aug 2008 at 2:44 pm

@Vincent – IE6 does not support the pseudo hover effect on divs. You could replicate the hover functionality with JavaScript if the lack of IE6 support is an issue.

@Dane – Doesn’t make sense why it would not work. Is it only not working in Firefox?

@dave – You would need to merge the scripts, if you simply combine the two some of the functions would conflict.

@Greg – Still not published, just keeping up with emails and comments takes most of the time I used to have to post. Hopefully soon. You might look into combining the dropdown and accordion scripts.

@Brian – Not seeing the issue. Shoot me an email with more info so I can try and replicate. Thanks for reporting.

@joy – I definitely would not recommend using a table. Is there a reason you have to use one? Email me.

Michael on 12 Aug 2008 at 8:02 pm

ive been through a million java menus all taking up way too much time. this is by far the best your a life saver

STANKY on 13 Aug 2008 at 8:13 pm

thanks for the reply.

i am also having a slight problem with displaying the menu in Safari. i have set up the menu to roll over an embedded flash movie, which is fine for most browsers, but in Safari, when the menu is rolled over, the movie dissappears.

Any clues on this?

Thanks a lot.

dave on 15 Aug 2008 at 2:42 am

Hey! a great script! I have been looking for this a a loong time
Could you help me out with the way to make it “onclick” instead of “onmouseover”? Also, is it possible to have the content visible first and then by clicking the header would hide the content? Your current script is just opposite
Thanks a lot!

awe on 15 Aug 2008 at 1:40 pm

After spending days looking at many, many drop downs, I stumbled onto this one. It is fantastically straight forward to use. I am trying it on a frames page where the drop down parent appears in the banner frame at the top if the page. A problem I face is that the drop down navigation links are “hidden” behind the frame that is below the banner frame. To see the drop down navigation links, I must increase the number of rows designated for the top banner frame which compromises the total page display. Using the target tag, I have no problem making the selected navigated link appear in the bottom frame. Is there any way to cause the drop down navigation link to display at the front of all open frames? With such a display, the display rows of the banner frame could remain the original amount. Thanks again for a great tool!

Steve G on 16 Aug 2008 at 10:05 pm

Hi, this looks really great. I want to try and integrate this into some content managed sites which generate unordered lists. Is there any news on it being integrated into a standard unordered list?

Henry Hoffman on 18 Aug 2008 at 5:12 am

Hi Michael,

I’m having the same issue as Vincent — I need the hover effect to work in IE6 desperately; I’m not familiar with the code to enact the necessary javascript, and was hoping you could send me an email with the changes?

I’d appreciate any help at all though, as this is one of the last few things I need to attend to in finishing this project.

Seuldieu on 21 Aug 2008 at 6:00 pm

@dave – Email me a link if you like and I will take a look when I can.

@Steve G – Not sure of a resolution off the top of my head. Email me a link and I can investigate.

@Henry – There would be no JS involved to change the dropdown to a list so if you are familiar with html/css give it a shot.

@Seuldieu – Basically you would need to do something like div.className += ‘ hoverclass’ on hover and then remove the class onmouseout. Hopefully that makes sense?

Michael on 24 Aug 2008 at 9:00 pm

I am loving this script. It is doing exactly what I want it to do. I would like the main horizontal nav to be also a UL. Does someone have the code of how they integrated this? I can’t seem to get it to behave like I want it to.

brooke on 25 Aug 2008 at 11:12 am

[...] Dropdown Menu : http://www.leigeber.com/2008/04/sliding-javascript-dropdown-menu/ [...]

Zintak» Blog Archive » Sliding JavaScript Menu on 29 Aug 2008 at 2:54 am

What should I change to get the slide-up effect? I viewed the .js file for the slide-up demo page, and replace it with the slide-down one, now it is not working at all. can you explain?

flisterz on 29 Aug 2008 at 5:44 am

oh nevermind, it works now. changed the CSS thanks!

flisterz on 29 Aug 2008 at 5:46 am

Hi
we have been looking at JS menus in depth – used a couple but for one requirement we need to have some 3,000 entries in the dropdown list – clients wish not our recommendation
can you let me know if your function will handle this or any suggestions what we should do instead

thanks
Simon

Simon on 29 Aug 2008 at 11:17 pm

Awesome script and easy to use. However, how do you give the top item an href. I don’t need a drop down on every link, but don’t know how to make the top level a link. i get some funky stuff when I do something like this:

I’m using image only rollovers sometimes. No text link.

Thanks again Mike

Dsmflash on 31 Aug 2008 at 11:29 am

Ok. Think I got it. Hope this helps someone. if you just want an image bkg rollover with no dropdown on the top level, you html should look like this:

CSS:

#nav dl dt a {width:auto; height:18px; background-color:transparent; margin:0px; padding:0px}

Maybe not the best way, but worked for me. If anyone has a better way, i’m open to suggestions. Just trying to give back a little.

Dsmflash on 31 Aug 2008 at 11:34 am

Have another question, in FF and IE 7, the button blinks the first time you rollover it, and then operates normal on second rollover.
Is there a fix for the “blink”.

Thanks,

Dsmflash on 02 Sep 2008 at 10:09 am

in FF2(FF3 IE6/7 etc. normal) it works slower, whats the problem?

LAmaster on 03 Sep 2008 at 3:30 am

Michael,

Is there any way to close the dropdown once you hit any of the items in the dropdown? Like how can i collapse the menu after someone clicks on an item. Right now i have to physically mouseout of the dropdown in order for it to disappear. Please help. Thanks.

Biren on 03 Sep 2008 at 11:37 am

Hello and thank you for providing this awesome script! I’ve ran in to two small issues. Tested locally and all ran fine – tested online and for some reason the page loads before the the js file is read (i assume) and as a result, the menu displays vertically and all the sub menus are visible. So the site content is loading half way down the page. Here’s a link:
http://schoolwaxtv.com

The other thing is way less critical. I notice in IE6 once i mouse over a button, the mouse begins to flash and continues to do so until I load a different page.

Thanks again!

Leetamus on 03 Sep 2008 at 5:36 pm

Amazing 1-Level-dropdown!
I´m searching for a new drop-down for my page, but I must have a 2-level-drop-down. Means, there must be a field which slides out to the right for more detailed links.
Ouhm, hard to translate for me, but I hope you understand what I mean, and I hope you can help me out.
Best wishes,
Mario

Mario on 04 Sep 2008 at 12:32 am

Awesome, scripts, Michael! I’m using this dropdown script and your accordion script on one of my sites.

@Bill on 09 Jun 2008, regarding keeping the opacity of the dropdowns at a certain percentage:
I was able to do this by changing line 53 to:
c.style.opacity = currh / (c.maxh * 1.2);

(try varying that number to adjust.) However, it doesn’t seem to work in IE (I’m using v7). It worked great in FF and Safari on Mac and PC, and in Chrome on the PC.

Blackwell on 05 Sep 2008 at 3:06 pm

Great script! I had one question, I’ve tried using transparent PNGs (partial backround transparency) with this script and it actually cancels the transparent nature of the PNGs for some reason. Is there any modification anyone can think of in order to allow transparent PNG to be used with this script?

Thanks!!

Mark on 06 Sep 2008 at 6:34 am

Just merged in the css code from the Vertical version of this, to make the top lables linkable (@trung, i think).
Here: http://mihd.net/3t9cimx. Hardly a breakthrough, I know, but I’m new at this whole CSS thing, and holy crap, I did something.

Now, can someone post a working submenu version? Nice little bundle would be nice. )

Vishal on 06 Sep 2008 at 1:32 pm

[...] animated dropdown menu (prototype or motools) by alexruimy simple modification of the script here: Sliding JavaScript Dropdown Menu – Web Development Blog this is a rush project, shouldn’t take very long bu… Existing Website Dropdown Menu

Dynamic DropDown PHP/AJAX - EXPERTS ADVICE FORUM on 07 Sep 2008 at 9:08 am

Its really a great script! Thanks a lot! I like all your scripts veey much

Just a little comment that I found that once the sliding menu collapse, it will not return back to 0px height. Therefore it’s very obvious when I integrate it with your dialog box javascript (sliding menu still can be accessed though dialog box appear since there is still a gap remain after it collapse)

and I have noticed for this line of code

if((currh < 2 && d != 1) || (currh > (c.maxh – 2) && d == 1)){

(currh < 2 && d != 1) will never reach, since currh will always greater than 2

So I have changed it to

if((currh < 5 && d != 1) || (currh > (c.maxh – 2) && d == 1)){
if(d != 1)
c.style.height = ‘0px’;

and it works.

It’s just my little comment, I’m looking forward for your new fantastic scripts. Keep up the good work

Tsubasa on 07 Sep 2008 at 9:02 pm

I am also having flashing problem while overlapping flash animation in Firefox 3. I have removed opacity from navigation, still having problem.

What to do now?

Aryan on 18 Sep 2008 at 6:39 am

I have a problem on IE6, the select tag ALWAYS appear upside the dropdown menu. Is there a way to solve it?

Roy on 19 Sep 2008 at 6:14 am

Hi there! I’m having the same problem as Brian…

“There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure”

Did you find a solution for it? Also I’m having a problem with IE 6 it seems that the names of the navigation item goes to different lines if there is a space.
For example when hover 2008 the contents will be like this:
friday
meeting
bowling event
Though it should be:
friday meeting
bowling event

Thanks!

Ah Woon Chan on 20 Sep 2008 at 7:35 am

oh and forgot to ask about the submenu possibility… is it ready?

Ah Woon Chan on 20 Sep 2008 at 7:39 am

These are the best CSS/JS dropdowns out there! Great work!

Bryce on 22 Sep 2008 at 10:56 pm

Excellet… Works perfect in all the browsers.. Great script, thanks a lot

Carlos on 25 Sep 2008 at 8:10 am

thx for the codes.
1 question

how to resize each drop menu size so all the boxes arent the same size? cuz the texts are not in the same length and i need to shrink down the box for shorter text.

mike on 26 Sep 2008 at 1:06 pm

I’ve been looking around for a dropdown menu script for a client, and I am happily spoiled for choice– there are many around, and quite a few good ones. Even among those, this one stands out. It’s the best I’ve seen.

Thanks.

Jonathan Daggar on 29 Sep 2008 at 10:42 pm

Hi, thanks for this great script. One issue I have found is that for some reason the drop-down menus are displaced approx 40px to the right.
I’ve used the css pretty much as is, except for changing colour values and sizes so as to fit more menus on the page.
I have worked around the issue by absolutely positioning all the dd elements, but I suspect there is something more simple I am missing.
Any ideas?
Thanks

Giles on 30 Sep 2008 at 1:43 am

Hi Michael, Thank you very much for this script! It is an awesome script. I was wondering what I would need to do to get the dt item to stay same color as the submenu while I’m viewing it’s submenu. I plan to have the dt item 70px and the menu 150px. My files are exactly the same so there was no need to post scenario since I have not made any modifications to your code yet. Can you please help me with this one.
Thank you.

Leka

Leka on 03 Oct 2008 at 6:37 am

I am not sure if someone has stated this already … but in FF3 for Mac, I am getting a rendering error. For the top level menu elements, there is a 1 pixel offset at the bottom of the menu item. Other than that, it is a great looking nav.

Jason on 06 Oct 2008 at 8:20 am

im from Indonesia, thanks bro, may I link this

alfaridzy on 15 Oct 2008 at 6:12 am

how to use it for joomla 1.5?

alfaridzy on 15 Oct 2008 at 6:16 am

Can I put this javascript into joomla CMS?

utchanovsky on 15 Oct 2008 at 6:25 am

[...] Sliding JavaScript Dropdown Menu via Sliding JavaScript Dropdown Menu – Web Development Blog [...]

Sliding JavaScript Dropdown Menu « notizblogg on 16 Oct 2008 at 2:13 am

hello – is there a way to make the top navigation element a hot link?

Linda on 20 Oct 2008 at 10:14 am

I found one workaround for Ben’s issue(Flash disappear under the menu with Firefox 2 on Mac).

Commented out “opacity” from CSS(1 line) and javascript(1line).
Then, Flash doesn’t disappear with FireFox2 on Mac.

Michael, How does this negatively affect your script?

mogya on 23 Oct 2008 at 5:59 am

I put this script on my page, but it FF it makes my site left justified instead of centered. how do I fix this?

Thanks,

Dave on 23 Oct 2008 at 7:19 am

I downloaded this and got the files dropdown.js, dropdown.html, dropdown.css, and images. I copied the above script into my notepad html document. Where do I have to put those files in order to get this to work. It says that in order to unpack the file I need a password. What am I doing wrong. (really want to get this to work)

Kurt on 29 Oct 2008 at 7:52 am

Is the multi-level drop down menu available.
If it, where can I get it, or how do I create it.

Thanks,

Joey on 30 Oct 2008 at 2:08 pm

Fabulous!…
Has anyone tried to set this up so the position is centered.
I just can’t seem to get it. I must be missing something.

IDC on 31 Oct 2008 at 1:48 pm

Hi there I really like this drop down menu but I have one problem. I would like to make one of the menus with no drop downs and just make it a link
I have tried changing the code like so, but it just screws up the appearance.
Any help would be appreciated.

agassiz on 31 Oct 2008 at 6:17 pm

agassiz, I am having the exact same problem. I hope you get an answer soon as I am anxiously attempting to fix this as well.

sassygirl on 03 Nov 2008 at 1:41 pm

OK! I got my menu fixed and working perfectly. However, now my menu isn’t centered on the page. I am not CSS and HTML literate, so speak slowly:) I researched and the only solution I found was to remove display block from my styles, but that’s how I finally got the top items to appear properly with a link. Help?

sassygirl on 03 Nov 2008 at 11:03 pm

This is great, thank you. Is there any sort of license attached to this?

Toth on 06 Nov 2008 at 11:43 pm

Hey there Michael.

I need to have this dropdown menu with a different background image in each main link. How could I do this?

Thanks,

Sean

Sean on 07 Nov 2008 at 8:38 pm

Love this script and all of the goodies accompanying it.
Works pretty good, no conflicts in most modern browsers, but I was having issues with IE6 letting my 100+ entry list scroll off of the page. When you mouseout the menu collapses, so if you have a wheel mouse no problems but with no wheel mouse you couldn’t get to the bottom of the list. I fixed that by adding to my ul css rules a height of 400px and overflow: scroll. That allows for the list to stay on the page and scroll bar to appear. Previously the scroll bar would expand the length of the list and then disappear.
I am not very good with javascripts, yet, so I couldn’t figure out how to add a list of ids to the script. Because I have 3 lists (dropdowns) to implement, on one page, I decided to copy the script three times, rename them, and change the ids listed within. Is that a proper solution or there a method to add the ids to the original script and still avoid scripting conflicts?

Thanks

Nobunaga on 11 Nov 2008 at 11:00 am

Okay, I was wrong, it’s not working. I tried changing the ids when copying the script, then added link refs to my header region to each script. Now the menus don’t expand at all. I am doing something wrong. Probably an easy fix but you know the story, I’m a noob.

Nobunaga on 11 Nov 2008 at 11:24 am

Figured out what I was doing worng, via trial and error. In order for these menus to be displayed on the same page I did not have to recreate the script. I had to change the name of the id assigned to the dt and dd elements. for instance what read “<dt id=”one-ddheader” onmouseover=”ddMenu(’one’,1)” onmouseout=”ddMenu(’one’,-1)”>Georgia</dt>
<dd id=”one-ddcontent” onmouseover=”cancelHide(’one’)” onmouseout=”ddMenu(’one’,-1)”>” on the first menu I changed to “<dt id=”two-ddheader” onmouseover=”ddMenu(’two’,1)” onmouseout=”ddMenu(’two’,-1)”>Georgia</dt>
<dd id=”two-ddcontent” onmouseover=”cancelHide(’two’)” onmouseout=”ddMenu(’two’,-1)”>” and it works great!!!!
I guess logic wins out on this one, but I am sure if I knew javascripting that would have been elementary (no pun intended).

Nobunaga on 11 Nov 2008 at 11:38 am

Michael, I can’t thank you enough for your help with this code. I have implemented the multi-column dropdown version in our website:

http://www.xango.com

thanks again!

Joachim Guanzon on 12 Nov 2008 at 11:51 am

anyone else having problems in IE6?

Even at the site: http://sandbox.leigeber.com/multilevel/
the first submenu didn’t show up..see the picture below

http://img148.imageshack.us/img148/1570/sandboxleigebercomslashpw9.jpg

Sara on 15 Nov 2008 at 10:49 pm

If you’re searching for ideas as for scripting, I’d really like to have a small and easy ajax tab script. The tabs would be able to load already existing content, or load external web pages…

Would you like to write a script like this? Pretty please!

Tensh on 16 Nov 2008 at 4:19 am

[...] have Dreamweaver or similar software, I just use Notepad… I’ve been using the free code here: Sliding JavaScript Dropdown Menu – Web Development Blog but have run into a couple of IE bugs with it that I can’t resolve (due to not knowing Javascript!) [...]

Javascript dropdown "sliding" menu wanted - any recommendations? on 16 Nov 2008 at 9:58 am

I will be releasing an updated dropdown script this weekend 11/23/08 that fixes any open issues, includes an example for a link-only heading and supports multiple levels. Comments will now be closed for this post.

Michael on 18 Nov 2008 at 12:51 pm

203 Responses