Horizontal Menus

Fish-eye Menus

Bubble-up menu

Dock style menu

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

Dynamic Drive

Mac-style "Dock" menu

Dock style menu

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

By ndesignstudio

Sliding panel menus

Kwicks menu

Kwicks menu

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

By Jeremy Martin

Sliding doors menu

Sliding doors menu

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

By PhatFusion

Background image sliding panel menu

Sliding doors menu

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

By Codrops

Slidedown box menu

Slidedownbox

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

By Codrops

Apple-style sliding panel menu

Slidedownbox

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

By kriesi.at

Co-Drops Collapsing Panel menu

Collapsing panel menu

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

By Codrops

Smint sticky top menu

Smint sticky top menu

A classy jquery based sticky menu that scrolls the page to the appropriate part of the website. Suitable for 'one-page' sites or for navigating to sections of a page

jQuery 1.7.1

By Robert McCracken

Single level horizontal menus

Soh Tanaka rollover menu

Soh Tanaka rollover menu

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

By Soh Tanaka

Glossy black menu

Glossy black menu

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.

Stu Nicholls

Fade-in glow menu

Fade-in glow jquery menu

Mouse-hover causes these tabs to illuminate. Simple yet effective.

jQuery 1.3.1

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.

Soh Tanaka glow menu

Soh Tanaka glow jquery menu

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

By Soh Tanaka

Slideout horizontal menu

Slideout jQuery menu

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

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.

Lavalamp menu

Lavalamp jQuery menu

The original lavalamp horizontal menu. Three styles of this are shown to demonstrate its flexibility.

jQuery 1.2.3

By Gmarwaha

Solid block horizontal menu

Solid block menu

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.

Dynamic Drive

jQuery background menu

jquery background menu

A simple inline menu that uses a background colour change or rollover effect.

jQuery

Dynamic Drive

Horizontal uneven sprite menu

Sprite menu

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

Deepu Balan

Sprites horizontal menu

Horizontal sprite menu

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

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.

Chained menu

Chained menu

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.

By Xin Yang, Dynamic Drive

Dropline horizontal menu

Dropline menu

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.

By Skyrocket Labs

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