Hamburger-slide vertical accordion menu
jQuery
Hover-over vertical menu with submenus or content. Ideal for mobile devices.
jQuery 1.2.6
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
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
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
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+
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.
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.
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.
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?
Simple slideout animation brings an otherwise standard vertical menu to life.
jQuery 1.3.2
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
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
Mouse-hover causes these tabs to illuminate. Simple yet effective, mirroring the effect on the Dragon Interactive website.
No jQuery, uses CSS only
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.
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!
