Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.

Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.

Riot Industries
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.

navigation menu

vertical

Village Version
Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).

Bruno Souza
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.

Cambrian House
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.

Comfort Brothers
Navigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.

Auberge de l’Ill
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.

The Hipstery!
This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.

Research at MICA
The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.

Power to the Poster
The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.

From the Couch
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.

Here at Design Shack we love a good navigation menu. Lately we’ve noticed a trend arising around menus that use icons either exclusively in place of text or as a support of additional textual information.

Adding icons to your navigation can not only give you an aesthetic boost but actually make for a quicker visual read of the link. Here’s a collection of over thirty icon-based navigation menus that we found online. We’ll conclude with a few resources you can use to snag some free icons to create your own fancy menus.

KK Media

dhtml menu

Bite Club

icon navigation menu

Mac Rabbit

drop down menuNarwhal Company

icon menu

Pixel Resort

navigation bar

Fishing Cactus

drop down menu

Tutorial 9

tab menu

Envira Media

javascript menu

Duarte Pires

horizontal menu

Weblifting

A good navigation would mean that you have a user-friendly website. And if you have a user-friendly website, expect that your online visitors would be comfortable browsing your site and would definitely come back for more visits. Come to think of it, where would you like to stay longer? In a website where you have to click on the sitemap every time your browse or in a website where you can easily find what you are looking for with just a few clicks?

Here are great navigation tips on how to make your website design user-friendly:

A clean website with a good navigation is always a plus. You can enhance the look of your website with graphics but make sure that you focus on your content and use a lot of white space. If you are to create links to a content site, you can use contrasting colors.

Do not clutter links. Make sure that you organize your links and they are all working.

Dead links can give an impression of sloppiness and haphazard work? If you have too many links, you can categorize them accordingly in drop down menus. You can also use flyouts links for your main categories.

Create a navigation system that is consistent and clean-cut. If you have your links on a drop down menu under one category, then you must have the same navigation with the rest of your site categories.

Your website design should accommodate a large number of links as you may have to add links in the future. As you add more pages to your site, then you need to add more space for additional links.

Categorize your website content in sections so you can gather up related links. You can use section home pages for certain categories or sections.

Your main links should be kept together.
This way, your visitors can know what your website covers at just one glance. The links to your site’s main sections should convey what your website is all about. If it is a business website- your main links should show what products or services you have to offer.? Links can be placed on navigations bars. They are often listed on the right side of the menu bar. You can also line them up neatly, just below your header.

In creating text links for your website, have it short and simple. The words should precise enough to know what that page would contain once clicked.

If you think a link is important to your reader or if you want them to go to a certain section in your site, you can make this link as a feature link of your site. You can have a different front color for this special link, boxed it up or have it in bold font.

Article source: http://business.ezinemark.com/

JQuery is a most useful component that can giving your visitor unique experience in a variety of ways, like image sliders, show your twitter stream, image galleries, navigation menu and contact forms.

jQuery menuIn this post you’ll find 15 really amazing jQuery navigation menu in tutorials and premium scripts, which will help you to create a navigation menu of your dreams.

Tutorials of Amazing jQuery Navigation Menu

Rocking and Rolling Rounded Menu with jQuery

jQuery menuby Mary Lou
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Halftone Navigation Menu With jQuery & CSS3

jQuery menuby Martin Angelov
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Beautiful Slide Out Navigation- A CSS and jQuery Tutorial

navigation menuby Mary Lou
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.

How To Create a Cool Animated Menu with jQuery

drop down menuby Chris Spooner
In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Beautiful Background Image Navigation with jQuery

web menuby Mary Lou
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

Animated Navigation with CSS & jQuery

navigation barby Soh Tanaka
As I was checking out some flash sites for inspiration, I ran across a couple websites that had some nice navigation effects. I’m not a huge fan of wildly animated navs, but these had simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today.

A Fresh Bottom Slide Out Menu with jQuery

javascript menuby Mary Lou
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

How to Make a Smooth Animated Menu with jQuery

menu makerby Zach Dunn
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects.

Overlay Effect Menu with jQuery

drop down menu makerby Mary Lou
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

CSS Dock Menu

menu creatorby Nick La
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom.

Little Boxes Menu with jQuery

menu builderby Mary Lou
Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image.

Premium jQuery Scripts for Cute Menu Navigation

SV Animated Menu Pack 2

dhtmk menuby SplitV
This is a set of 4 animated menu scripts. All are stand alone, requiring no external libraries or frameworks. They are extremely small at 1-2kb a piece uncompressed. If you compress them they are all closer to 1-1.5kb. These scripts make it possible to create great menus with flash like effects very easily.

Nice Menu V1.0

menu makerby Alexandra1710
A new way to slide between 2 level huge menu.
easy to use, valid html and css code
works in all majors browsers
easy to plug and play script to your website / blog or gallery

Super menu pack (10 menus)

js menu

by VanKarWai
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.

It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.

Cute Menu – 8 transitions pack

horizontal menuby arl1nd
Cute Menu is very simple to embed to your HTML code. It’s requirements are only JavaScript and CSS support.

Article source: http://www.dynamicwp.net/

Google always come up with some design or layout changes to improve Search Experience. This time, the navigation bar present on the top of homepage and search result page is redesigned and the bar will show your name instead of the email ID. The redesigned navigation bar is having the same navigation links like Web, Images, Videos, Maps, News, Shopping, Gmail and More on left side, but the right side of the bar is changed. Earlier the right side of the bar was showing iGoogle, Search Settings and Sign In links, but now only Sign In and a settings icon is there.

Note: Redesigned navigation bar is available on Google.com only.

navigation menunavigation link

You can sign in using Google account by clicking on the “Sign In” link. The settings icon will show you options like “Search Settings, iGoogle and Privacy” without signed in. Once you will sign in with Google account, your name will appear on the right side of the bar and email ID will be visible only after clicking on the name. You can browse the list of subscribed services from “Settings Icon ==> Account Settings” which is available in the right most of the bar.

The redesigned bar is giving Google homepage and SERP much cleaner and improved look. What is your opinion on that? Share your thoughts on the new redesigned navigation bar of Google.

Pop up menu is visible and placed on the top for majority websites. For some websites, the web designers want to navigate the website by DHTML menu, but there is no space to place menu, context menu type is the best choice to show menu and it can be shown anywhere just by right-clicking.pop-up-menu
Step 1: Create pop up menu from built-in templates

Launch Sothink DHTML Menu, “Startup” window opens, you can start menu from built-in templates or new blank. First, click the name from built-in templates to select the menu; and then, preview menu style in preview window of Startup; last, click “OK” to start menu creation.

Pop up Menu - Menu Template

Step 2: Choose menu type for the chosen menu

In tasks panel, click “Menu Type” option on the Global panel; and enter the “Global > Menu Type” to set the menu as “Context menu”.

Pop up Menu - Menu Type

Step 3: Publish menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources.

Pop up Menu - Publish Menu

White menu refers to drop down menu which adopts white as the main color to navigate website. As we known, white is the feasible color to match with all kinds of color, it can create wonderful visual matchable effect with other colors. Similarly, white menus are also wild navigation menu to decorate most websites of different colors. Besides color, white menus can be built in horizontal level, vertical level, tab menu, round-corner menu and multi-column menu. Next, let’s appreciate changeable menu styles:

White menu – horizontal menu

  • Special menu designed by Jason Reed Web

White Menu - Horizontal Menu

  • Gotmilk Flash menu

White Menu - Horizontal Menu

  • Web menu designed by Jeremy Levine

White Menu - Horizontal Menu

  • Maxandlous.com unusual menu

White Menu - Horizontal Menu

  • JavaScript menu with handwring style

White Menu - Horizontal Menu

  • Web menu with button style

    White Menu - Horizontal Menu

  • DHTML Menu for Jayme Blackmon

White Menu - Horizontal Menu

  • Alex Buga menu

White Menu - Horizontal Menu

  • Water’s Edge Media web menu

White Menu - Horizontal Menu

  • Ronnypries.de navigation menu

White Menu - Horizontal Menu

  • Pipe DHTML menu

White Menu - Horizontal Menu

White menu – round corner menu

  • Round style menu with mouse over

White Menu - Round Corner Menu

  • Silver round corner menu

White Menu - Round Corner Menu

White menu – tab menu

  • Silver tab menu

White Menu - Tab Menu

  • Vertical tab menu

White Menu - Tab Menu

  • Fubiz slidebar

White Menu - Tab Menu

  • Great FreelanceSwitch menu

White Menu - Tab Menu

White menu – multi-column menu

  • Barack Obama menu

White Menu - Multi-Column Menu

  • “Speaking” navigation menu

White Menu - Multi-Column Menu

  • Multi-column menu navigation

White Menu - Multi-Column Menu

White menu – vertical menu

  • lace web menu

White Menu - Vertical Menu

  • Cobahair.co.uk uses only BIG typography…

White Menu - Vertical Menu

  • jBunti Hover-effect Menu

White Menu - Vertical Menu

  • Icon vertical menu

White Menu - Vertical Menu

  • nBloom menu with animation
    White Menu - Vertical Menu
  • Checkout list-style menu

White Menu - Vertical Menu

  • Ruby Tuesday slidebar menu

White Menu - Vertical Menu

  • Alexandru Cohaniuc Navigation

White Menu - Vertical Menu

  • Web menu – handwriting style

White Menu - Vertical Menu

  • web menu of Porsche Canada

    White Menu - Vertical Menu

White menu refers to drop down menu which adopts white as the main color to navigate your website. As we known, white is the feasible color to match with all kinds of color, it can create wonderful visual matchable effect with other colors. Similarly, white menus are also wild navigation menu to decorate most websites of different colors. Besides color, white menus can be built in horizontal level, vertical level, tab menu, round-corner menu and multi-column. Next, let’s appreciate changable menu styles:

White menu – horizontal menu with black website

White Menu - Horizontal Menu

White menu – round corner menu with blue website

White Menu - Round Corner Menu

White menu – vertical menu with green website

White Menu - Vertical Menu

White menu – tab menu with yellow website

White Menu - Tab Menu

White menu – multi-column menu with purple website

White Menu - Multi-Column Menu

Auto highlight node to show where the user is on the web site. Sothink Tree Menu can automatically display the highlighted node linking to the current page in the browsers.

highlight tree menu

Introduction:

In the above tree menu, you can see that the node “Overview” is highlighted by menu font and bold style. That is because, through the analysis of tree menu, the link URL of node “Overview” is the same with “index.htm” you are visiting.

Steps:

Click Global Settings > Highlight in Tasks panel and check “Auto highlight current node” option.
The highlighted node is the same as the selected node of mouse out state when the highlight function takes efect; the highlighted node is the same as selected node of mouse over state when the mouse moves over highlighted node.

What’s DHTML tree menus?

DHTML tree menus are navigation menu used for large scale website. It also known as a links bar or link bar, which pulls down its nodes after mouse movement. It contains hypertext links on web page so as to navigate between the pages of a website, and quick link to the target page.

tree menu sampleWhy choose this DHTML menu maker?

  • Cross-browser navigation menu works excellently on main-stream browsers on various platforms.
  • Edit web menu directly in HTML editors as add-on, Dreamweaver, FrontPage included.
  • Build SE friendly navigation menu by the useful tool.
  • Publish wizard guides publishing the navigation bar, JavaScript menu to website step by step.
  • Customizes element for web menu, like font, icon, background, color, border, cursor, effects, alignment, transparency, size, etc.
  • Offers 50+ free menu templates and image library resources .
  • Any HTML code can be used within the JavaScript menu item.

DHTML menu templates

Sothink Tree Menu offers excellent menu templates by usage, and one customized type in the template gallery. You can start web menu from template; create a blank menu and apply a template to it later; and create new templates and modify the existing ones.

tree menu samples

How to make tree menus ?

Step 1: Create DHTML tree menus from built-in templates

Launch Sothink Tree Menu, “Startup” window opens, you can start menu from built-in templates or new blank. First, click the name from built-in templates to select the menu; and then, preview menu style in preview window of Startup; last, click “OK” to start menu creation.

tree menu templateStep 2: Edit nodes and replace the contents

Add or remove nodes for DHTML tree menus. The added nodes will auto-inherit the node’s properties. Replace the text and set the link for each menu item.

tree menuStep 3: Publish menu to website

Menu creation is finished. Click the button “Publish” to publish DHTML menu. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources.tree menu - publish