Vertical Flyout JavaScript Menu

[...] Click here for a vertical flyout version of this menu. [...]

Sliding JavaScript Dropdown Menu - Web Development Blog on 17 May 2008 at 12:07 am

[...] скрипт выпадающего меню. Все это читайте на первоисточнике. Если же читать не желаете, то: демо можно просмотреть [...]

Блокнот » Blog Archive » Выпадающее меню на JavaScript on 17 May 2008 at 4:26 pm

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 18 May 2008 at 6:42 pm

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

Вертикальные выпадающие меню на Javascript | АяксЛайн.ру on 19 May 2008 at 4:19 pm

Only one level?

TaTaC on 21 May 2008 at 1:34 am

@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 21 May 2008 at 7:58 am

color is so light.maybe can little deep.

Booto on 21 May 2008 at 10:15 am

@Booto - You are free to alter the CSS in any way to accommodate your GUI.

Michael on 21 May 2008 at 10:32 am

@Michael. A good job you r.

Booto on 21 May 2008 at 11:36 pm

Any chance for a wordpress plugin for this? Very Nice!

Bill Mead on 28 May 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

daveyp on 29 May 2008 at 12:31 pm

@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@leigeber.com

Michael on 29 May 2008 at 12:40 pm

prob overlooking something really simple…but how would i make menu item #3 a link?

thanks!

jenn on 30 May 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. If you are still having trouble shoot me an email at michael@leigeber.com.

Michael on 30 May 2008 at 3:48 pm

[...] Vertical Flyout JavaScript Menu por Leigeber [...]

Freak-Log™ #12 — Freak Group on 30 May 2008 at 9:34 pm

[...] Vertical Flyout JavaScript Menu [...]

This Month’s Best: May 2008 - Six Revisions on 31 May 2008 at 12:16 pm

[...] Menú deslizante con efecto de aparición. [...]

JavaScript sin frameworks / acualicio.us on 01 Jun 2008 at 9:39 pm

I’m on FF3 RC1. I cant’ see any effect of the script

ArbuZz on 02 Jun 2008 at 1:33 am

Forget. Missed the demo link. Heh.

ArbuZz on 02 Jun 2008 at 1:35 am

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 08 Jun 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@leigeber.com

Michael on 08 Jun 2008 at 8:29 pm

Is there a vertical and horizontal menu combination? i try to combine them but unsuccessful.

mikiko on 08 Jun 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 09 Jun 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 09 Jun 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 20 Jun 2008 at 10:50 am

[...] al menú, está hecho en JavaScript y es la hostia de simple. El copyright de todos modos es de Leigeber (si alguno lo quiere implementar en su web tiene que bajarse el pack en la web del autor y debe de [...]

» Blog Archive » Things on 24 Jun 2008 at 11:36 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 25 Jun 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 26 Jun 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 26 Jun 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 03 Jul 2008 at 2:26 am

What about multilevel menu???
Is it ready???
Pls reply us soon.

Shan Khan on 03 Jul 2008 at 2:29 am

@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 04 Jul 2008 at 8:20 am

hello! Nice work Can it be used normal frames (instead of inline frames)?

Erick on 18 Jul 2008 at 1:06 pm

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….)…

Katie Allen on 20 Jul 2008 at 4:15 pm

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 21 Jul 2008 at 9:14 am

Amazingly perfect.. and sooo easy to customize. Don’t change a thing!! Great job!

Jeff on 21 Jul 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 22 Jul 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 30 Jul 2008 at 11:17 am

Has anyone succeeded in linking just the menu item, in addition to the fly-out menu?

Brenda on 30 Jul 2008 at 1:57 pm

OK. 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 30 Jul 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 03 Aug 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 05 Aug 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 06 Aug 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 07 Aug 2008 at 8:01 am

ok 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 07 Aug 2008 at 8:26 am

ok, 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 07 Aug 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?

Carlijn on 08 Aug 2008 at 7:19 am

@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 12 Aug 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 19 Aug 2008 at 8:47 am

Actually 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 19 Aug 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 26 Aug 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

Sami on 27 Aug 2008 at 4:24 am

@ ML Never mind, i just changed it about a bit and got what i need! Thanks anyway!!

Sami

Sami on 27 Aug 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 27 Aug 2008 at 5:28 am

Great menu - it’s wonderful.

Smart Boy on 27 Aug 2008 at 9:23 am

[...] Vertical Flyout JavaScript Menu [...]

This Month’s Best: May 2008 « Jonsunhee’s Weblog on 29 Aug 2008 at 2:00 am

[...] Flyout Menu : http://www.leigeber.com/2008/05/vertical-flyout-javascript-menu/ [...]

Zintak» Blog Archive » Sliding JavaScript Menu on 29 Aug 2008 at 2:55 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 01 Sep 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 01 Sep 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!

Chuck on 01 Sep 2008 at 7:04 pm

can this menu be expandable dropdown menu please help

Padma on 03 Sep 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 04 Sep 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>

d0ri0 on 07 Sep 2008 at 1:54 pm

Great.. i tried something similar with CSS2 but it was not not this smooth effect.. this one is awesome !!!.. thanks

deen d on 08 Sep 2008 at 3:40 am

[...] 7. Vertical Flyout JavaScript Menu; [...]

300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner on 12 Sep 2008 at 4:56 pm

Hey!, really nice script. Thanks for giving if for free. Greetings from Mexico.

Rodrigo Spesia on 13 Sep 2008 at 3:51 pm

[...] 7. Vertical Flyout JavaScript Menu; [...]

300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com on 14 Sep 2008 at 10:06 am

excellent work, thank’s for you contribution.

Alojaweb on 16 Sep 2008 at 10:52 pm

high level, thanks

Jersey on 16 Sep 2008 at 10:54 pm

[...] Vertical Flyout JavaScript Menu [...]

Navigation Effects Using JavaScript - Hidden Pixels on 22 Sep 2008 at 4:37 am

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 23 Sep 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!

nuntius on 24 Sep 2008 at 1:55 am

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 24 Sep 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 05 Oct 2008 at 2:02 pm

Realy cool! thanks a lot!

Айрат on 24 Oct 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 30 Oct 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 01 Nov 2008 at 2:54 pm

Super, great stuff. Thanks

Vitalia on 08 Nov 2008 at 11:05 am

Does it support multilevel ? I tried without success..Let me know. Otherwise it is awesome

Samir on 13 Nov 2008 at 5:09 am

[...] 7. Vertical Flyout JavaScript Menu; [...]

300+ Jquery, CSS, MooTools and JS navigation menus | Neurosoftware web dev on 17 Nov 2008 at 5:49 am

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 18 Nov 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 21 Nov 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 09 Dec 2008 at 12:08 pm

83 Responses

Leave a Reply