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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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...
The original lavalamp horizontal menu. Three styles of this are shown to demonstrate its flexibility.
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.
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.
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.
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.