Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Cool Website Menu Design Ideas  

Cool Website Menu Design Ideas

Website navigation menus are no longer just plain lists but are intrinsic to the design of a website. Designers are making them ever more appealing and functional so that visitors can easily find their way around the website. Bold colors and design elements attract attention to the more important elements on a web page, and mega menu sliders, drop-downs and flyouts  arrange detailed lists of sub-menus to facilitate ease of use. At no time does the viewer feel lost in a site, as these mega drop-downs  function like site-maps.

We’ve found some fascinating navigation menu designs on the web and have put them together to share them with you.

Going MEGA

Mega Drop-Down Menus

www.foodnetwork.com
Groups of navigation options on clicking the main menu item make choices within sub-sets visible all at once, so that the user can decide exactly where to go in the site without scrolling.

 

Mega Flyout Menus

www.converse.com
Mega fly-out menus can contain a large number of sub-level links, while keeping the site design free of clutter and retaining user interest.

 

Mega Fonts

www.alessandrogiammaria.com
Oversized fonts work well for portfolio sites where there is a lot of visual content.  Here the menu links are also repeated in the footer.

 

Big and Bold Menu Design

www.aussiebbqlegends.com/beef-lamb-and-pork
Bold, earthy and action-packed, these menu tabs are placed on wooden boards to match the logo. They set the tone for the site and the Aussie BBQ Legends experience.

 

Stark Contrasts and Large Fonts

http://www.stripturnhout.be/
The red of the logo forms a stark contrast to the black horizontal stripes of this notebook style vertical menu on a grid.  The large distinctive font in neutral grey balances the contrast.

 

Bold Fonts, Bold Colors

www.cobahair.co.uk
Every page comes alive with menus using bold fonts and different vibrant colors in this predominantly black and white photographic layout.

 

 

Wide-Tabbed Menus

http://www.ronnypries.de/
Wide-tabbed menus give a neat appearance to website design, making it easy for the user to navigate through the site.  When the menu tab is clicked, more text is revealed (sometimes extending to three sentences or more), serving as intro web content that doesn’t get buried on the home page.

 

Multi-Level Sliders

http://www.utah.travel/  
Slide-out menu tabs look like belts to echo the header design. On mouseover and click, different levels of information are revealed in menu sliders,  in text and photographic images.

 

Poster Style Layout, Footer Navigation

denver2012.drupal.org
From dates to maps, venue information, highlights, forms and calls to action, everything is within scrolling distance in this scrolling website design. It effectively uses large poster-like fonts, attention-getting color and single-color photography, emphasizing that “everything is within walking distance” at DrupalCon 2012 at  Denver. Notice the footer navigation. 

 

Vertical Navigation Menus

www.mellasat.com
This gorgeous vertical menu integrates the brand name and logo very effectively while adding a touch of class to the website. It becomes a predominant design element.

 

Photographic Menu

www.huisoranje.co.za
This is no boring standard menu! It is a design element in its own right. The photographs on the menu add a personal touch and draw attention while adding interest to the page.


 

Dancing Vertical Menu

www.narrowdesign.com
This vertical menu seems to dance as it responds to mouse movements! When clicked, the corresponding content slides out.

 

Fonts With Character

www.cxxvi.net
The logo is centered in this layout, using neat old-style fonts and clean design for horizontal navigation. Typewriter font is used in the footer.

Casual Look

www.carbonica.org
Casual fonts and circled text highlight the navigation tabs in this vertical menu.


 

Hand Coloring

www.hdlive09.co.uk
Note the casing around the font and the pencil shading behind each menu tab, which matches the style of lettering in the header.


OR

http://www.underworldmagazines.com/wp-content/uploads/2010/03/hdlive09.png

 

Shadow Effects and Gradations

www.arvalabs.com
The menu tabs have an interesting gradation and embedded/etched font.

 

Understated Makes a Bold Statement

www.corporateriskwatch.com
The simplicity of the low-key, understated horizontal menu belies the boldness of this design. On mouseover and click, a band of black with vertical sub-menus highlights the section chosen. This design helps to manage sub-menus of varying lengths, without affecting the overall look of the page.

 

We hope this collection of great navigation menus inspired you to experiment with your own new-look, functional and creative navigation designs.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Related Articles, Tips & Ideas

Cool Website Menu Ideas

Logo Design Ideas

Brochure Design Tips

Text Ideas in Design

Logo Design Tips

Featured Template
Template # 38603
Type: WordPress
Price: $67