All menus

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.

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

Vertical Menus

Accordion Menus

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

Multi-level menus

Red Team CSS menu

Red Team CSS menu

Slick animation on hover. Nice job from CSS experts Red Team.

jQuery

By Red Team Designs

Sky Blue menu

Soh Tanaka mega menu

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

By apycom.com

DD levels menu

Soh Tanaka mega menu

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.

Dynamic Drive

Fancy dropdown menu

Soh Tanaka mega menu

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+.

By Brian Cray

Soh Tanaka

Soh Tanaka mega menu

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

By Soh Tanaka

Smooth dropdown horizontal menu

Soh Tanaka mega menu

Based on the DD levels menu, this has the same features, but it is just... smoother.

jQuery 1.2.6

Dynamic Drive

Smooth dropdown vertical menu

Soh Tanaka mega menu

Based on the DD levels menu, this has the same features as its horizontal counterpart, but it is ,well, vertical..

jQuery 1.2.6

Dynamic Drive

Superfish dropdown menu

Superfish dropdown menu

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

By Joel Birch

'Droppy' dropdown menu

Droppy dropdown menu

Multi-level smooth dropdown menu. No parent-item selector means that you can end up guessing which items have dropdowns.

jQuery 1.2.3

By onehackoranother

Sooperfish dropdown menu

Sooperfish dropdown menu

Another variation of Superfish, this having elements of the mega menu or big orange menu with dropdowns appearing in columns.

jQuery 1.4.2

By Sooper Themes

Grid menus

Mega menu

Soh Tanaka mega menu

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

By Soh Tanaka

Big orange grid menu

Disjointed rollover menu

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

Found on HTML drive. Author to be confirmed.

Infogrid menu

Infogrid

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

By CSS Tricks.

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.

Mega menus

Mega menu

Soh Tanaka mega menu

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

By Soh Tanaka

Big orange grid menu

Disjointed rollover menu

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

Found on HTML drive. Author to be confirmed.

Infogrid menu

Infogrid

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

By CSS Tricks.

Blue print mega menu

Another click action mega menu

A responsive mega menu, more great work from Tympanus Blueprints.

jQuery 1.9.1

By Tympanus

Click action mega menu

Click action mega menu

Great for those touch devices, nice job from Script Tutorials.

jQuery 1.4.2

By Script Tutorials

Circular menus

Mobily circular menu

Mobily circular menu

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

By To be credited

Bubble navigation

Soh Tanaka mega menu

A unique menu that features icons in bubbles that expand to show three or four sub-lists.

jQuery 1.4.2

By Tympanus

Circular navigation

Soh Tanaka mega menu

Another different circular based menu.

jQuery 1.4.2

By Tympanus

Tabbed navigation

Yens tabbed navigation

Soh Tanaka mega menu

Tabbed menu boxes useful for displaying small amount of information or images.

jQuery 1.2.6

By yensdesign

Coda slider

Coda slider

Slide text or images with the top tabs or side arrows.

jQuery 1.2.1

By N Doherty

Tabbed content slider

Tabbed content slider

An elegant way to display small amounts of text or images with top tabs indicating the current 'page' or window.

jQuery 1.3.2

By Gaya Design

Tab navigation

Tab menu

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

By Jon at spyrestudios

Responsive menus

Stripe Responsive Navigation

Codyhouse Stripe Navigation

A dropdown responsive menu featuring icons and sub-lists.

jQuery

By Codyhouse

Auto Hiding Navigation

Codyhouse Auto Hiding Navigation

A beautiful job by Codyhouse. Responsive menu featuring three different styles of menu. Simple - just the top level menu. Sub-nav with a second level of navigation... and a Hero version that you can swap out to include the Swiper by idangerous as they work nicely together. Auto-hides on scroll but reappears when scrolling back towards the top of the page. The sub-nav remains sticky.

jQuery

By Codyhouse

Horizontal dropdown responsive menu by Codrops

Horizontal dropdown menu

Nice, basic 'mega menu' from Codrops. Can be modified to dropdown with mouseover event rather than a click

jQuery

By Codrops

Multi-level responsive menu by Codrops

Multilevelmenu

Multi-level slideout menu, modified to suit HTML-based content rather than AJAX/dummy content.

jQuery

By Codrops

Emre - multi-level responsive menu with logo top left

Emre menu

Nice multi-level responsive dropdown menu that features animation and logo top-left.

jQuery 2.1.3

By Emre

Meanmenu - multi-level responsive menu

Meanmenu

Multi-level responsive dropdown menu. Note that on wide screens the sub and sub-sub menu items are not shown, only the top level links.

jQuery 1-9

By Mean Themes

Vertical responsive menu

Vertical responsive menu

A responsive, very functional menu. Full display shown on widescreen, collapsing to a sliding panel menu on small screens. Icons provided by FontAwesome, a good range of preset icons is in the CSS files.

jQuery

As seen on Github by Cleidson Franca

Vertical (sticky) responsive menu

Vertical sticky responsive menu

A responsive, very functional menu. Full display shown on widescreen, collapsing to a sliding panel menu on small screens. Icons provided by FontAwesome, a good range of preset icons is in the CSS files. This excellent, versatile menu was modified by Piccante Web Design to feature a 'sticky' header menu.

jQuery

As seen on Github by Cleidson Franca

Guide template and responsive menu

Guide template and responsive menu

A very nice template and menu operation from graphicburger.com

jQuery

By Graphic Burger

Adrian Gyuricska - off-canvas menu

Off Canvas menu

Nice off-screen sliding panel menu

jQuery

As seen on Codepen by Adrian Gyuricska

Smegnick

Smegnick responsive menu

An adaptation by Piccante Web Design of the menu developed by Nick Salloum. Responds to device width of course, and the menu uses a transition of opacity to occupy the space left open on smaller devices.

jQuery

Credit to CallMeNick

Iconick

Iconick responsive menu

An adaptation by Piccante Web Design of the menu developed by Nick Salloum. Integrates an SVG icon for each menu item.

Javascript only

Credit to CallMeNick

Sticky Responsive

sticky responsive menu

With thanks to the tutorial from CallMeNick, this menu has been significantly modified and given a tweak to make it stick - to the top of the page. Some jQuery magic has been added to animate parts of the page on scroll down. Also check out this version that includes the Skeleton responsive CSS framework.

jQuery

Credit to CallMeNick

Codyhouse Hero Slider

Codyhouse Hero Slider

A beautiful design job by Codyhouse. Responsive menu featuring an icon-based navigation slider with a full-screen background image or video. This design is ideally suited to pages that require a maximum of 5-6 landscape orientated images on each page.

jQuery

By Codyhouse

Bushell - off-screen menu

Bushell

Nice off-screen sliding panel menu

jQuery

Tutorial by David Bushell

Shay Howe menu

Shay Howe menu

Similar to the Bushell menu, this also has a left-aligned menu on larger screens reverting to a slide-in menu on smaller devices

jQuery

As seen on the Shay Howe website

Multiple level accordion side menu

Multi level accordion menu

Nice multi level accordion menu with icons and animation

jQuery

By Codyhouse

Multi-level push menu with subsubs

Multi-level-push menu

Multi-level push responsive menu with subs and icons.

jQuery

By Make.RS

Multi-level responsive menu with sub and sub-subs

Web Tuts plusresponsive menu

Multi-level responsive menu with sub and sub menus.

Simple javascript

By Web Design Tuts+

Trunk - simple effective responsive menu

Trunk menu

Simple responsive, effective top jquery menu. An added feature is the "sticky top" style of the menu.

jQuery 1-9

By Rob Luke Design

Codyhouse - mega responsive menu

Codyhouse mega responsive menu

A responsive menu that features several ways of displaying sub menus - through slideout secondary menus and icons

jQuery

By Codyhouse

Codyhouse - secondary fixed responsive menu

Codyhouse secondary fixed menu

A stylish and functional menu that suits a single page or long page. Key nav items can be placed in the top menu bar as well as a secondary menu with icons appearing in the page layout.

jQuery

By Codyhouse

Codyhouse - secondary responsive menu

Codyhouse secondary menu

A stylish and functional menu. Key nav items can be placed in the top menu bar as well as appearing in the responsive side panel which allows multiple sub menus.

jQuery 1-11

By Codyhouse

Slim menu

Slim menu

Multi-level responsive menu with sub, sub-sub, etc menus.

Note that this menu has an issue with closing when scrolling on touch devices. A fix to the .js file works and can be viewed here. Thanks to Dusty for this solution.

The correct js file is loaded to the piccante.co website for its own function.

jQuery

By adnantopal

Nexus menu

Nexus menu

A slick responsive menu that has multiple sub menu options as part of the left menu and a top links menu for often-used pages.

Note that on some mobile devices the menu does not operate after scrolling - only when the page is returned to the very top of the window

jQuery

By Codrops

Responsive block menu

Call me Nick responsive menu

Nice menu that suits an even numbered amount of menu items

jquery

By Call Me Nick

Hongkiat responsive menu

Hongkiat responsive menu

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

By Hongkiat

Navigateur

Navigateur responsive menu

Simple horizontal responsive menu with animation on hover.

Keyframes, no jQuery

By Mike King

Okaynav

Okaynav responsive menu

A new concept in responsive navigation menus where the (least important) right-orientated menu items form part of a dropdown menu on small screens and devices. This demonstration includes the responsive image technique of using srcset

jQuery

By Flo Preynat

Other menus

Thumbnail zoom menu

Thumbnail zoom menu

Hover over each icon to slightly enlarge the image and show an (optional) popup caption.

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.

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