Vertical Flyout JavaScript Menu

17
May

Posted by Michael in Design, JavaScript

Flyout Menu

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 IE6/IE7, FF, Opera and Safari. Feel free to use it in any personal or commercial projects. Send any bug reports to michael@leigeber.com.

Click here for the demo.

Click here to download the source.

6 Diggs

33 Responses

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