This animated JavaScript flyout menu is clean and lightweight at only 1.6kb. The script 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 details.
This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.
@TaTaC – For now yes. It could fairly easily be extended to handle multiple levels. I plan on having both the horizontal and vertical versions with multi-level support within the next week.
Michael on May 21, 2008 at 7:58 am
color is so light.maybe can little deep.
Booto on May 21, 2008 at 10:15 am@Booto – You are free to alter the CSS in any way to accommodate your GUI.
Michael on May 21, 2008 at 10:32 am
Any chance for a wordpress plugin for this? Very Nice!
Bill Mead on May 28, 2008 at 12:24 pm
Michael – quick question – how does the opacity work on this?
What if I don’t want the background color to reach “opacity: 1;” -
I tried setting it in the css but I think it has something to do with the “flyout.js”.
Anyways – great job and thanks… – so glad I found your blog 
@Bill – It is possible, I will take a look at it.
@daveyp – On line 54 you will see that the opacity is simple a fraction based on the height. You could just divide the result by some number or change that code around to function as you please. Shoot me an email if you need any help.
Michael on May 29, 2008 at 12:40 pm
prob overlooking something really simple…but how would i make menu item #3 a link?
thanks!
jenn on May 30, 2008 at 3:46 pm@jenn – You might want to take a look at the original dropdown menu. It has the information about creating a new menu, the same markup applied the the flyout.
Michael on May 30, 2008 at 3:48 pm
I’m on FF3 RC1. I cant’ see any effect of the script 
Is there a vertical and horizontal menu combination? I need to implement a horizontal menu with the option of submenus to open vertically. Anyone come across that or know if it can be done with this menu?dropdown.js
Ray on June 08, 2008 at 8:25 pm@Ray – There is a horizontal menu a few posts back. Let me know if that isn't what you are looking for.
Michael on June 08, 2008 at 8:29 pm
Is there a vertical and horizontal menu combination? i try to combine them but unsuccessful.
mikiko on June 08, 2008 at 9:57 pm
Noticed this comment:
@TaTaC – For now yes. It could fairly easily be extended to handle multiple levels. I plan on having both the horizontal and vertical versions with multi-level support within the next week.
Any chance that it’s done yet?
John on June 09, 2008 at 11:15 am@John – I am about done, hung up on an IE issue as usual. Will post as soon as it is available.
Michael on June 09, 2008 at 11:16 am
@Michael – I want to have your babies! I cant tell you how much time you’ve saved me in this complete overhaul I’m working on. Looking forward to the release of the multi-level script. Your skill in lightweight java is priceless and the fact that you don’t horde it reminds me of the early days when the net was built by a share and share-alike community of dev’s.
Sean on June 20, 2008 at 10:50 am
Noticed that the background doesn’t change in the boxes in IE 6 if it’s an image. Works on other browsers. Is there a workaround?
Justin on June 25, 2008 at 10:07 am
Have you done a 3rd level of flyout? I am trying to get that, but am having some problems. Also, I am wondering about linking the main “button.”
Thank you for the menu!
Brenda on June 26, 2008 at 11:30 am@Justin – IE6 does not support the :hover property. You would code a “work around” with JavaScript but personally I am fine with the few IE6 users not getting the effect.
@Brenda – I almost have completed the code but have been far too busy to work out the couple remaining bugs. Soon hopefully.
Michael on June 26, 2008 at 8:17 pm
Dear author,
Is it possible to create sub menu of sub menu.
For example:
1. Customer
1.1. New Customer
1.2. Edit Customer
1.3. Serach Customer
1.3.1. By Company
1.3.2. By By City
Awaiting of your quick reply.
Shan Khan on July 03, 2008 at 2:26 amWhat about multilevel menu???
Is it ready???
Pls reply us soon.
@Shan Khan – I have had no time recently having taken a new job and moved cross country. Things will finally settle down next week so hopefully then I can catch up this script as well as a couple others.
Michael on July 04, 2008 at 8:20 am
hello! Nice work Can it be used normal frames (instead of inline frames)?
IN above “@jenn – You might want to take a look at the original dropdown menu. ” (May 30 reply) … where do I find original dropdown menu so I can make menu item 3 a link without screwing up alignment.
(The updated website not online yet…due to problem with alignment of adding the a to menu items like 3….)…
Hey guys. Micheal, I know you’re busy so i don’t expect that you have it completed yet, but has anyone come up with a solution to multi-levels?
Jesse on July 21, 2008 at 9:14 am
Amazingly perfect.. and sooo easy to customize. Don’t change a thing!! Great job!
Jeff on July 21, 2008 at 10:16 am
Hey Michael
Very nice work, and like Sean said, you’ve just saved me a lot of time. Love it – hugely appreciated.
little zed on July 22, 2008 at 5:11 pm
Is there a way to make the top level a clickable item? I have one item on my menu that doesn’t need any submenus, but can’t seem to figure out how to get the top level to act as a link.
Ben on July 30, 2008 at 11:17 amHas anyone succeeded in linking just the menu item, in addition to the fly-out menu?
Brenda on July 30, 2008 at 1:57 pmOK. This may be “old school,” but it works. I made a style for an anchor tag, with the background set to a transparent .gif file, and then linked the menu item. The definition list still produces the fly-out, but now I also have a “button” with a link for the main menu selection.
Brenda on July 30, 2008 at 3:55 pm@Erick – This script is really not intended for iframes.
@Katie Allen – The vertical dropdown is what I was referring to.
@Ben and Brenda – I updated the demo so that the fourth dropdown header is a link. Take a look at http://sandbox.leigeber.com/flyout/flyout.html.
Michael on August 03, 2008 at 9:34 am
Can you please let me know if it is possible to have a multicolumn version of the vertical dropdown?
Sukh on August 05, 2008 at 1:32 pm@ML
Thanks for that. For some reason, when I make it a link, it extends the color of the menu to the right past the boundaries of the box.
Ben on August 06, 2008 at 11:20 am
Yes, i am presented with the same problem. I also get the grey menu link that extends outward. I redownloaded the demo, but it has not been updated i nthe zip file. I assume you edited the css file as well? I am kinda stuck at the moment.
Gunnar on August 07, 2008 at 8:01 amok so i managed to get it working, kinda. I edited the css file, the grey block is now not extending outward anymore, however i still have a visible grey area on top of the button. When i remove the background it is very visible.
@Ben: edit the following line in css (.dropdown a). Change padding to 0px. This should remove the outward clickable area. the rest i am still trying to figure out.
Gunnar on August 07, 2008 at 8:26 amok, so changing the padding to 0px changes the flyout menu items as well, so rather don’t change it. Back to square one.
Gunnar on August 07, 2008 at 8:56 am
Hi Michael,
I used your vertical drop down box for the intranet site of my company (using IE7). With some moderations, it worked out really nice!
The only thing i cannot fix is that I want the original background back. You told someone to fix it in JS in line 54. But i am really a noob with JS. Can you send me the moderated section (code) for no opacity?
And the second problem: the image for the menu works, but not the hover image. Maybe because hover can only be used with “a”? You know how to fix it?
@Sukh – Sure, just float:left some divs/lis/etc.
@Ben – Probably an issue with the widths being set in the CSS. Play around with it and you should be able to resolve.
@Gunnar – Shoot me a link and I will take a look. It can be a little tricky.
@Carljin – IE6 only supports the hover on a link buT the other browsers should have no problems. I am not 100% sure what you are referring to with the opacity. Email me and I will get back to you when I can.
Michael on August 12, 2008 at 8:20 pm
Hi great menu Michael,
I’ve created a multicolumn version (4 of the menus side by side on one page). It works perfectly in firefox (v2), however in IE7 the pop up layers keep appearing underneath the next column. I can’t find out whats causing it (Zindex possibly?).
Anyone come across a solution to this problem?
Peter on August 19, 2008 at 8:47 amActually just cracked it. I needed to have each preceding menu with a higher z-index in the container divs. So the left most menu’s zindex needs to be 4, the next 3 and so on. Don’t mind me – today has been a bit of a learning curve.
Thanks Again!
Peter on August 19, 2008 at 8:57 am
Hello.
Awesome menu.
I am new to JS, but… is there a way to make the menu slide from the left.
So when I roll over a link, the sub-menu slides in from the left.
Also, how can I take away the offset from the top. So that I can offset the menu anywhere in the page I want. Any input would be nice, thanks.
P.S. Here is a site, http://www.rhinoliningsindustrial.com/, the menu is in flash, but you can get an idea of what I am talking about. That is what I want to re-create in JS and I can see this script bring capable, thanks.
Lamont on August 26, 2008 at 11:29 am
@ML – thanks very much for this, you’ve helped me out no end!!! I’m still learning this whole html/css malarky so still having a few teething problems.
Whats the div id “wrapper”? is it essential for this to work?
I’m using this in a shared php so only the right hand column will show this on every page. I need it to be 140px wide so the main body text for all the other pages will align at the top. At the moment the main body starts underneath where the drop down menus finish, so i’m wondering if the “wrapper” is in the way.
I hope i’m making sense explaining this!!! Can you help?
Many thanks, Sami
@ ML Never mind, i just changed it about a bit and got what i need! Thanks anyway!!
Sami
Sami on August 27, 2008 at 4:45 am@ML
OK i’m stuck again!!
I have 4 menu buttons listed with horizontal pop up menus. Ive managed to change the layout to what i want but i want one of them to be a different colour to the others and the pop up to different colour aswell. I’ve tried making a new setting but either nothing changes or the the colour does change but the pop up menu appears underneath instead of to the right.
How can i change this?
Thank, Sami
Sami on August 27, 2008 at 5:28 am
Great menu – it’s wonderful.
Smart Boy on August 27, 2008 at 9:23 am
I have used your code…THANKS!…but I have had to modify it a little bit and it doesn’t exactly look like the pretty buttons you have on your page, but I was more interested in the cool fade in type drop down effect than the buttons, what I have will work for me. I do not have this page up as of yet for you to see, but do have a question. Frequently I must change the information in the drop down box to link to different places, the site I am wanting to use it on has at least 15 pages which means the way that this is set up, I have to edit 15 pages every time something changes. Is there a way to make an external sheet to link to for the link information? If so could you show me how? THANK YOU
Mel on September 01, 2008 at 4:35 am
I am new to CSS and javascript…How do I link to a website if it doesn’t have a flyout. In this example, how would you link “menu item three” to another website?
Thanks for your help!!!!
Jennifer on September 01, 2008 at 1:18 pm
Hi! This is a great flyout menu! I’m wondering if you’d got any further with the wordpress plugin idea (original query by Bill). I’d love to use it in a site for my father-in-law.
Thanks!
can this menu be expandable dropdown menu please help
Padma on September 03, 2008 at 12:11 pm
great script… would it be difficult to modify so the flyout menus appear on the left side? i’d love to work this into a hebrew site i’m building…
cheers
dog on September 04, 2008 at 9:13 am
You can also do like this if you want the first menu button to be linked:
EXAMPLE:
<dl class=”dropdown”>
<dt id=”five-ddheader” class=”upperdd” onclick=”javascript:document.location.href=’http://www.google.com’”>GOOGLE</dt>
</dl>
Great.. i tried something similar with CSS2 but it was not not this smooth effect.. this one is awesome !!!.. thanks
Hey!, really nice script. Thanks for giving if for free. Greetings from Mexico.
excellent work, thank’s for you contribution.
M, did you finish the multi-level code and if you did where can we download it? BTW, great job, I have a great deal of respect for “old-school” programing when a programmer starts from scratch (no jquery, prototype etc) and produces a light and fast code!
Peca on September 23, 2008 at 6:03 am
Hello all. Thanx for the great menu!
Does anyone know how to put a link to the menu item three (the one with no sub category)?
Thanx again!
I have a question on this menu system. I’ve implemented it into a website, and one of the menus that I have has multiple links, and in some cases, it’s longer than the web page that is displayed. The menus don’t scroll down, so if the page is too short, you can’t get to the end of the menu. Can you help me with this?
Thanks.
Brenda on September 24, 2008 at 2:10 pm
OK, I know this is kind of novice, but how do I create a clean looking link from the main menu without a flyout?
Thanks much!
jeff on October 05, 2008 at 2:02 pm
Realy cool! thanks a lot!
Айрат on October 24, 2008 at 6:40 pm
This is awesome, anyway I can change all the parent sides be links in addition to the flyouts? If not, at least change “Menu Item 3″ to be a link would be fantastic.
Dan on October 30, 2008 at 6:52 pm
Michael, Thanks for the script – it looks just the thing. However, I need for the sub menus to fly out to the left, not the right. I’ve been experimenting but no luck so far. Can you give guidance? Many thanks.
Neil on November 01, 2008 at 2:54 pm
Super, great stuff. Thanks
Vitalia on November 08, 2008 at 11:05 am
Does it support multilevel ? I tried without success..Let me know. Otherwise it is awesome
Thank you so much for this – it rocks!
For my own use, I modified it so that it only does not do the slide effect, just the fade: http://www.gingerbeardman.com/flyout-fade.zip
matt on November 18, 2008 at 10:31 am
Thanks so much! This an awesome piece of work; too good to be free!
Thanks again, from South Africa.
SmL9 on November 21, 2008 at 9:50 am
I scanned the comments and as far as I know i didn’t see anybody with this issue. I have the menu working perfectly in all browsers except IE 7. When i mouse-over on the expanded menu, the menu disapears once i go between each item.. as soon as the “finger” goes away, it disapears.. Any thoughts? thanks..
Kurt D on December 09, 2008 at 12:08 pm
Re: Vertical Flyout JavaScript Menu
Per the example how would you make dropdown four link to another website?
When adding the “href” my style comes out as the flyouts not as the main menu.
I’ve been trying to put this into a table on dreamweaver and for some reason it just will not work, I tried both versions of this drop-menu and neighter has worked. I need help…
Hitoshi on January 26, 2009 at 6:54 am
Hi, very nice Menu and a big thx for the free use!!!
I wished a second level, but its not soo important.
Thank u very much.
ratsplayer
ratsplayer on January 28, 2009 at 5:52 pm
hmmm…works great in development and in preview. But expanded menu does not expand when live in IE and Firefox. Any thoughts?
Rusty on February 04, 2009 at 2:47 pmSorry…should have added IE 7 and Firefox 3.0.5. Any assistance would be much appreciated. Thanks for what you do.
Rusty on February 05, 2009 at 10:05 am
hi,
I now use the menu in my webpage and I very much like it so thanks for that, but there’s one thing: if I maximize my browser (1680*1050), the sliding effect is slower then when i use a small screen. Does anyone else have this problem and/or knows how to fix this?
hi again, in addition to my last post:
in IE the fade effect does’t occur at the first mouseover over a menu link, Then the submenu is just there. At the second mouseover the fade effect does occur. This happens everytime after i refresh the page. Could anyone help me out?
Hi,
How do make the sub-menu fly to the left? I tried but could not make it work.
Thanks
B. Tran on February 19, 2009 at 12:17 pm
Hi,
Awesome script, exactly what i’ve been looking for. I’m looking to use the slideup version of this menu, but am struggling to see the difference in code between it and the dropdown version. Is anyone able to tell me where i should be looking and what code i should be changing? It’d be a massive help!
Thanks,
Neil.
Hey i am using this script to..
but i need a 3 sub menu. Is this possible with this script?
Ty send me a mail at rovtar(AT)gmail.com
Luka on March 04, 2009 at 9:26 am
This is an awesome menu; however, I am new to HTML and CSS. How do I put these files into Front Page??? I downloaded the files already and opened each one up in FP separately. How do I get this to work? Do I copy and paste all of this into one file? Please help. Thanks, TW
Tony on March 08, 2009 at 1:16 pm
Nice script, would be cool to have as a wordpress plugin
Im not very good with javascript, if I wanted each button to have its own image, and own roll over image, is there a way to do that?
KawaiiAyu on March 20, 2009 at 9:58 am
This is a great, clean script. My current menu setup screws up with Firefox and Chrome. But is there a way of getting this so that the actual menus are embed in the script? That way, when a change is made to the menu, it would be represented on all pages. (I had also left this message on the “drop-down” version, but meant to leave it here. The joy of trying to cram real-life stuff in while at work.)
Craig on March 23, 2009 at 9:20 am
Im facing the problem wat Peter faced. Menu works perfectly in firefox, however in IE7 the pop up layers keep appearing underneath the next column. I can’t find out whats causing it (Zindex possibly?).
And in the next comment he wrote that he has fixed the prob by changing the Zindex. And it doesnt work for me. Any help for the needy!!!!!!
Can anyone help in creating a WordPress plugin from this ?? It is a much needed functionlity and i want to add this to my left navigation widget. Any workaround to accommodate this will be appreciated.
Thanks.
Purethoughts on April 09, 2009 at 12:26 pm
did you ever manage to adapt this script so that it allowed a second level of flyout? Would really like to use this on a site, but need more than one level
Jason on April 22, 2009 at 6:45 am
Hi,
Great Job! Just what I am looking for… I have one problem… A flash object slide show. The flyout is going behind the object. How do I get the flyout on top? Is it possible?
Boy I hope so… because this one nice little menu!
Judson
Heiii man… ur really gr8. but i would like 2 ask u 1 think, how i can make one more drop menu for the each sub menu???
shyju on May 15, 2009 at 10:58 pm
I’ve been able to get first level of the menu to use a gif file as the background, how do I get the second level to do the same? BTW, great menu!
mhug on May 28, 2009 at 4:28 am
Hi there, great menu, very easy to use… except for one problem!….. It seems so easy but it wont go for some reason…. how can i change the width of the submenus? they dont seem to change no matter what i change on the css.
Thanks, great work
JohnM on June 10, 2009 at 4:47 am
This is a really nice menu, well done.
How would you go about adding a 3rd level?
Ryan on June 16, 2009 at 9:22 am
Hi there!
Firstly, Thank you Michael, I love all of your scripts, so light, so clean, you are a generous genius.
Second:
Here is a quick little work around I figured out for multiple sub levels on the flyout menu, I have noticed many people asking for this function, me being one of them.
Ok, here we go:
First, use Michael's drop down menu instead of the flyout menu, it is a little bit leaner/ easier to modify and I prefer it.
After you have downloaded the dropdown menu files, open up the style.css and make these changes.
1. On "ul.menu" simply add a width property, anything but 100% seems to work, I went with 100px, this forces the menu to line up vertically instead of horizontally.
2. On "ul.menu ul" change the "top:26px;" to 5px or 0px, this brings it up, also add "left:149px;", this pushes the original dropdown over to the side of the menu.
That's it! Now you have a flyout menu with as many sub levels as you desire. I've tested this in Mozilla as well as IE 6 and 7, seems to work just fine.
I know this is quite a rudimentary fix, but hey, it's simple and it works.
I hope this helps some of you out.
Keep up the good work Michael.
I love this, I just need it in different colors. I guess it is possible to change the colors?
Allie on June 26, 2009 at 8:48 am
Hi,
is there a way for the menu to open from left to right instead of from top to bottom ?
Thanks
Squi on July 08, 2009 at 2:24 pm
siph, I search this script in a long time, thanks friend
cyber_seph on July 09, 2009 at 9:07 am
This menu doesn't handle wrapping well at all. Can you please tell me what I need to do to get it to wrap correctly. I have a client that has a flyout menu, but one of the choices in the flyout menu is "Biography & Autobiography" and when that is in place it will wrap because my menu is only 173 pixels wide. the wrapping doesn't bother me, but it squishes against the <li> below that one….any ideas?
cschneider on July 15, 2009 at 7:46 am
Hi,
Is there a way to add an on click function to this? So when someone selects one it says clicked.
Thanks!
Hi Michael, firstly thank you for creating these great navigation templates, they're fantastic! I'm trying to created a verticle drop down menu, where the submenu forces down the nav link on rollover, and goes back up on rollout. Here's how far I've got, any advice would be hugely appreciated – at the moment there seems to be some problem with padding/margin as it is different when first loaded to when the mouse has hovered. Sorry it's been driving me mad and I can't figure it out!
http://www.maisondieruck.com/sg/index.html
Many thanks
Mark
Mark on July 18, 2009 at 8:31 am
Hi Michael…
First of all thanks for the great menus.
Did you check it on IE8? It has a little bug while droping down and the mouse moves on submenus. Do you know what's wrong?
I've also checked it on different browsers such as Google Chrome, Mozilla Firefox and Opera. That's great…
I wish to thank Michael for a great job!
I had an integration problem where the first CSS line interfer with other CSS definitions. I noticed this issue in several places and I think that it
needs a consideration because in some cases – I simply cannot use those
remarkable tiny + elegant solution (unless I use it via iframe).
My solution to the flyout is the following:
1. Replace the first 2 .css lines with:
#leftcolumn * {padding:0; margin:0}
/*body {font:12px Verdana, Arial, Helvetica}*/
2. Only one figure needs a change: from 204px to 194px.
.dropdown a, .dropdown a:active, ….. width:194px}
Done.
I would like to increase the height of the lines but I leave it for later.
Thanks again!
Mulli
Thank you very much. I really happy……..
phanith on October 19, 2009 at 11:54 am
Hi, have you been able to look at the IE8 issue with this brilliant menu? the submenu items have a slight bug in it……??
Jamie on October 20, 2009 at 10:39 am
Sailing a little by Internet I did not find menus with as professional effects as this one, thanks for the contribution!
diseño web on October 26, 2009 at 6:45 pm
u r the man…. thanks a lot…my website looks a lot more professional…thanks to you…
hassan dar on October 28, 2009 at 3:55 am
For some reason, my link won't work. I am using frames, so the target=body directs the page into the center of the frameset.
Help!
<dl class="dropdown">
<dt id="calendar-ddheader" class="upperdd"
onmouseover="ddMenu('calendar',1)"
onmouseout="ddMenu('calendar',-1)">Calendar</dt>
<dd id="calendar-ddcontent"
onmouseover="cancelHide('calendar')"
onmouseout="ddMenu('calendar',-1)">
<ul>
<li>
<a href="calendar/currentSchedule.html"
class="underline" target=body>Schedule</a>
</li>
<li>
<a href="calendar/currentMonth.html" target=body>Calendar</a>
</li>
</ul>
</dd>
</dl>
I'm having a problem.. I have an exact type of menu like the one listed above but how to you assign each button to a link? I noticed the code is:
<dt id="two-ddheader" class="uppered">
But where do you put the link.. such as making a "home button" link to index.html?
Kelly Dannon on December 04, 2009 at 3:41 pm
Very good work. Thanks.
Lukas Heblik on January 07, 2010 at 9:46 am
Hello .
It's a must appreciable attempt to write such an
article. It helps us to build a nice one.
Zamshed Farhan on January 14, 2010 at 12:23 am
Hi Michael and all,
I second that: great job and beautiful menue.
Is it just me or has anybody else had trouble when there are more than 10 menu items? (I need up to 12)
At #11 it generates a JS-error:
Error: c is null
file: flyout.js
row: 9
This is row 9: "clearInterval(c.timer);"
Any help is greatly apprechiated!
Jonny on February 05, 2010 at 5:35 amReply 2 myself:
dude, just mixed up the dd-id, and that was it.
@all: never mind … /-)
Jonny on February 05, 2010 at 6:39 am
Good morning, in the "Categories" from the left side of my site I am not able to make the plugin work. Should I put some code on the page "sidebar1.php??
Already activated the plugin.
Thank you very much
Eduardo on March 04, 2010 at 12:22 pm
I like this flyout menu that this page uses at this university, anyone know why it creates that extraspace in IE and how to control it? I appreciate any info
Jameson on March 19, 2010 at 12:12 pmyou can forget my question, i emailed the guy and we figured it out together. Thank you
Jameson on March 19, 2010 at 3:31 pmGeneral comments only please. Visit forum.leigeber.com for technical discussion.
Mr. Leigeber,
You are so in control you are out of control!
Great job. Very nice. I appreciate its low foot print. As soon as I get this up I will be happy to let see your work in action…. domo. p
Peter A on May 18, 2008 at 6:42 pm