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!

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

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

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.

Very nice Micheal! Works well in IE and FF!

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

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

[...] 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. [...]

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

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

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

Thanks

[...] 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 [...]

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

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

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.

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.

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

-Thank’s

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!

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

Cheers!

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

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

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:

<ul id=”sddm”>

<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

excellent tool…thanks

@Michael,

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

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!

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

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.

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.

Hello,

I have finished the headers link. (With help from Michael)

The stylesheet file (.css) should you edit to:

——————————————————————
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;
width:204px;
}

.dropdown ul a:active, .dropdown ul a:visited {
display:block;
padding:5px;
color:#333;
text-decoration:none;
background:#eaf0f2;
width:100%
}

.dropdown li a {
display:block;
padding:5px;
color:#333;
text-decoration:none;
background:#eaf0f2;
width:100%
}

.dropdown dt a {
display:block;
color:#333;
text-decoration:none;
background:transparant;
width:100%
}

.dropdown dt a:active, .dropdown dt a:visited {
display:block;
padding:0px;
color:#333;
text-decoration:none;
width:100%;
background:transparant;
}

.dropdown li a:hover {
background:#d9e1e4;
color:#000
}

.dropdown .underline {
border-bottom:1px solid #b9d6dc
}
————————————————————————-

If you would add a headers link you should do the follow:

1. Search the <DT> rule into your file:
<dt id=”1-ddheader” onmouseover=”ddMenu(’1′,1)” onmouseout=”ddMenu(’1′,-1)”>

2. After this rule, before the </dt>, you should past the follow:
<a href=”LINK.html”><font color=”#232323″>NAME OF THE LINK</font></a></dt>

3. If you do it just you will finally see this:
<dt id=”1-ddheader” onmouseover=”ddMenu(’1′,1)” onmouseout=”ddMenu(’1′,-1)”>
<a href=”LINK.htm”><font color=”#232323″>NAME OF THE LINK</font></a></dt>
<dd id=”1-ddcontent” onmouseover=”cancelHide(’1′)” onmouseout=”ddMenu(’1′,-1)”>
I have test it with internet explorer 6 and 7 and with firefox 2, and it works great.

Do you have any problems?? Tell it me or someone.

@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!

Great job. Waiting to see the multilevel one.

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.

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!

Very nice menu.

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

Thanks

You can contact me from gercekkATgmailDOTcom

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 !

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.

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