Please click on the screenshot to view a working demonstration. If the demonstration does not work in your browser please contact us, thank you.
Remember that these demonstrations are often in their most basic, uncustomised form and may often not look that 'polished'. You may need to use a little imagination to see how they could work on your website with your images, colours or fonts.
Known commonly in the trade as a "fish-eye" menu, this bubble-up menu has achieved one of the smoothest effects we have seen in fish-eye menus. The level of magnification is completely variable so we can set a lower, subtle enlargement or go wild with a major zoom factor! Yeah, we love this one a lot and with PNG images with transparent backgrounds now being widely supported by all the browsers we can use icons in this menu that sit beautifully over an image or background.
jQuery 1.4.2
This one is based on the Mac's "dock" menu - with an option for top or bottom positioning. Slightly different from the Bubble up menu, this one pushes the other icons around on mouse over achieving a nice smooth mac-like effect. And who doesnt't love that? Don't be put off by the dark background, we can change that all for you and it is available with or without the icon's caption.
jQuery 1.1.2
This innovative menu uses five coloured sliding panels to demonstrate an accordion effect. Useful for revealing small amounts of text or images that are 'hidden' when the accordion is at its resting state.
jQuery 1.2.6
This sliding door menu has high impact, especially with images that are carefully chosen and have a feature on the left hand edge. This menu can be modified to have a specific panel open by default when the page loads. We've used this menu on our Saffron Bakery website.
Mootools
This is one of our absolute favourites. This original version uses only three panels but we have incorporated it into websites with five or six panels. Truly eye-catching and high-impact - but it does take up some screen 'real-estate'. This menu achieves 'multi-level' capability by it's sub-menus popping up over a transparent coloured background.
jQuery 1.4.2
From the same designers as the Background image sliding panel menu, this is another eye-catching horizontal menu with dropdowns. Images pop-up on mouse-hover and there is also a sub-menu capability (see the Portfolio and Projects tab in this example after clicking on the screenshot).
jQuery 1.4.2
This good looking and simple horizontal menu is reminiscant of the Apple website, hence it's name. It reveals a small icon on mouse-hover.
jQuery 1.2.6
Another beautiful sliding panel menu from Codrops. Images slide down to meet the menu options moving upwards on mouseover. Suitable for skinny images as demonstrated by these models! Naturally we can change the height and width of these panels to suit your needs.
jQuery 1.4.2
A simple horizontal menu that just looks good and doesn't go over the top with its animation effect - but provides a bit of movement to your website navigation.
jQuery 1.3.1
Shown as a glossy panel that stretches full width, this menu is super-fast loading. It is customiseable to show the current (open) page as well. Don't like glossy black? No problem, it comes in other colours.
Mouse-hover causes these tabs to illuminate. Simple yet effective.
jQuery 1.3.1
This horizontal menu achieves a similar effect to the Fade-in glow menu but uses images instead. Get the right images and you have a beautiful navigation bar at the top of your website. This menu was put to use in the website for Luxury on Peterborough.
jQuery 1.2.3
Hover over the small arrow icon (after clicking on the screen shot of course!) and this horizontal menu reveals itself. Move the mouse off and it slides back into it's compact and space-saving menu bar. Perfect for those websites that are limited in vertical space or want a subtle menu that is not always in view - but useful only for a single horizontal pop-out, not multiple menus...
jQuery 1.4.2
The original lavalamp horizontal menu. Three styles of this are shown to demonstrate its flexibility.
jQuery 1.2.3
A simple inline menu that uses images or simply coloured blocks as the background. Super-quick to load as demonstrated in our website for Imaginasia.
A simple inline menu that uses a background colour change or rollover effect.
jQuery
A simple inline menu that uses sprites to provide some animation. The uneven configuration of the menu tabs provides a casual influence to a horizontal menu bar. Four variations of the theme are demonstrated.
CSS only
This menu cleverly uses just one image to achieve it's remarkable effect and simply positions that image (masking the bits we don't want you to see!) depending on where you move your mouse. The advantages of this is that it is fast loading, still uses HTML lists for the construction of the menu and links and there are no problems putting fancy fonts in your menu. The only disadvantage of this menu is that it is not quick or easy to change - so if your navigation menu is not going to change often, go for it! We did, and it is used on the webpage of Piccante Web Design.
jQuery 1.3.2
This menu is so cunning you could put a tail on it and call it a weasel. Select an item from the first dropdown and the second is populated with choices based on your first choice. The third dropdown is populated in the same way. Awesome for websites with lots of pages.
A dropline menu is a good way to provide a few options from your horizontal menu without taking up a lot of space which dropdown menus can do. Because this menu uses CSS only for its functionality it is very fast loading.
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?
iPod lovers go wild. There are actually four demonstrations of this menus functionality, the third and fourth ones are the iPod style menus. These menus are great if you are limited for space... or you just love the clever functionality of your iPod menu!
jQuery 1.3.2
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
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!
A responsive mega menu, more great work from Tympanus Blueprints.
jQuery 1.9.1
Great for those touch devices, nice job from Script Tutorials.
jQuery 1.4.2
Slick animation on hover. Nice job from CSS experts Red Team.
jQuery
One of the nicest dropdown menus we've seen. It uses the lavalamp effect to animate the top menu bar and the smoothness of jQuery to animate the dropdown lists which in turn expand into sub-lists (and sub-sub-lists if you need to go that far!) Apycom.com require a link in order to use this menu or you can purchase a licence from them.
jQuery 1.3.2
This is one of the smartest menus that we've come across. It deals easily with increased font sizes and small window sizes. If your menu were going to expand into the edge of your window it simply opens in the other direction... how smart is that? We like this menu because it is easily customised and it's fast loading. We've used it on a number of sites, most notably for Follonico.
We almost used this menu for our newly designed Piccante Web Design site, but it tripped up in an old version of Internet Explorer. Fortunately, IE is dying (we'd like to put the final nails into the coffin of IE6 if we could) so we're hanging onto this in our collection of menus because we think it's got a great future... and it really works well in IE8+
Another nice product from Soh Tanaka. Although it doesn't feature sub-sub menu lists it is a visually pleasing horizontal dropdown menu. Just be aware that the dropdowns work by mouse-click, not just hover... some like that, some won't.
jQuery 1.4.2
Based on the DD levels menu, this has the same features, but it is just... smoother.
jQuery 1.2.6
Based on the DD levels menu, this has the same features as its horizontal counterpart, but it is ,well, vertical..
jQuery 1.2.6
A jquery version of the (fairly) famous Suckerfish menu. Not as smart as the Smooth or DD levels menu when it comes to window edge detection, but an option worth considering for multi-level menu requirements.
jQuery 1.2.6
Multi-level smooth dropdown menu. No parent-item selector means that you can end up guessing which items have dropdowns.
jQuery 1.2.3
Another variation of Superfish, this having elements of the mega menu or big orange menu with dropdowns appearing in columns.
jQuery 1.4.2
Got a lot to say? Heaps of pages? Then this mega menu could be for you. Kermit green certainly grabs your attention, though we could change that for you of course.
jQuery 1.3.1
Similar to the mega menu, the big orange grid menu offers sub-menus in lists. The parent menu items are animated, and you could find yourself chasing them round a bit, but we thought it was definitely worth including in our collection.
jQuery 1.4.2
A little imagination might be required to clear the superheroes from this menu and put your products or lists, but it will be worth it! Quite useful for quickly comparing (or expanding) information of a number of products.
jQuery 1.4.2
A quirky circular menu that opens either by hover or click... ideally suited to 6-7 icons that are circular in nature
jQuery 1.4.2
A unique menu that features icons in bubbles that expand to show three or four sub-lists.
jQuery 1.4.2
Another different circular based menu.
jQuery 1.4.2
Tabbed menu boxes useful for displaying small amount of information or images.
jQuery 1.2.6
Slide text or images with the top tabs or side arrows.
jQuery 1.2.1
An elegant way to display small amounts of text or images with top tabs indicating the current 'page' or window.
jQuery 1.3.2
Perfect for sites that don't want a large menu permanently displayed. Select from a left-positioned tab, left-positioned (fixed) tab or a right-positioned tab. The left-position fixed option always positions the 'info' tab in view. This type of menu was used for Paul Milburn Photography.
jQuery 1.3.2
Multi-level responsive menu with sub and sub menus.
Simple javascript
Excellent responsive menu that fluidly reacts to viewport / browser size. Note: Works perfectly in IE8 and up (IE6 and IE7 overflow the container) i.e. requires Windows 7 or 8+
jquery 1.7.2
Hover over each icon to slightly enlarge the image and show an (optional) popup caption.
jQuery 1.3.2
