Vertical Menus

Accordion Menus

Hamburger slide menu

Hamburger slide

Hamburger-slide vertical accordion menu

jQuery

By Anya

Design Shack Vertical menu

Vertical Design Shack menu

Hover-over vertical menu with submenus or content. Ideal for mobile devices.

jQuery 1.2.6

By Design Shack

Sam3k Accordion

Sam3k Accordion

This accordion menu has the default item 'Link 2' open when the page loads. The remaining menu items smoothly open (and close) on mouse-over and mouse-out.

jQuery 1.2.6

By Samual Roldan

DD Accordion 1

DD Accordion Menu 1

This accordion menu uses mouse-click to open and close its sub items. It cleverly closes any open list before opening another, keeping the space occupied to approximately constant. Images can also be displayed as well as text.

jQuery 1.2.2

Dynamic Drive

DD Accordion 2

DD Accordion Menu 2

The first item of this menu opens by default; the remaining open on mouse-click and it is selectable whether or not the open items stay open or close - in this demonstration they remain open, expanding the list vertically. Simply click on the title to close or open each list.

jQuery 1.2.2

Dynamic Drive

Tree Menus

Jquery Tree multi dropdown

Soh Tanaka mega menu

Feel like putting a tree style menu on your site? Smooth it out with jQuery (well, we'll do that for you of course to give it a smoooooth effect. So useful and user-friendly...

jQuery 1.5.1+

Found on HTML drive. Author to be confirmed.

jQuery tree menu

jQuery tree menu

There are three versions of a tree menu in this demonstration. The first is very basic and works similar to a file structure on your PC. The second uses a smoother animated effect. The third uses a similar animated effect but also has controls to open or close all parent-items.

By Zorn Zaefferer, Dynamic Drive

Other vertical menus

Meny menu

Meny menu

The name "Meny" is Swedish and this delightful space-saving menu is excellent for full-sized sites but comes into its own on mobile devices. Simply swipe the menu icon or mouse-hover near it to swing the menu into view. Nice.

Created by Hakim.

Disjointed rollover menu

Disjointed rollover menu

This menu is called 'disjointed' because the image on the left of the menu changes on mouse-over of the vertical menu on the right. Could be what you need if you have an image to show for each menu tab.

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Disjointed vertical menu

Disjointed vertical rollover menu

OK, we really can't see a practical implementation for this menu - but maybe you can! But it works by a simple image replacement technique... useful for a list of icons perhaps?

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Animated vertical menu 1

Animated bullet style menu

Simple slideout animation brings an otherwise standard vertical menu to life.

jQuery 1.3.2

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Animated vertical menu 2

Animated jQuery menu

The nice thing about this menu is that it animates itself when the page loads bringing attention to the menu. We put this menu to use on the Clefa website.

jQuery 1.2.3

Found on HTML drive. Author to be confirmed.

Vertical sprite menu

Animated jQuery menu

The 'vertical version' of the sprite menu shown above. A single image is positioned (and masked) to show this effect - modern day magic - but it does mean you can use whatever images (or font) you want in your menu - and it is fast loading.

jQuery 1.3.2

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Dragon glow menu vertical

Dragon glow menu

Mouse-hover causes these tabs to illuminate. Simple yet effective, mirroring the effect on the Dragon Interactive website.

No jQuery, uses CSS only

By insic

Vertical block menu

Animated jQuery menu

A really simple vertical menu. We're not so hot on the choice of background gradient that was used in this demonstration, and we'll get round to changing it when we have some spare time. Grey grey grey.

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Vertical pop out menu

Animated jQuery menu

A simple effect but it looks good and it works well. A nice alternative to using a horizontal dropdown menu, and because it uses CSS for its functionality it's fast-loading - and that improves your search engine performance too!

By Jorenrapini

Join us on Facebook Join Piccante on Facebook | Follow us on Twitter Follow piccanteweb on Twitter | View our latest website