Home Insipiration Horizontal Navigation Menus: Tips, Tricks and Showcases

Horizontal Navigation Menus: Tips, Tricks and Showcases

It is true to say that visitors will look at your navigation menu and will immediately leave your site if you don’t have a clear and directive navigation.

There are 2 types of navigation menu:- horizontal or vertical navigation menu. Horizontal menu has became the mainstream in web design, probably due to the space limitations. This is true especially for blogs or content related websites. Although they may have vertical navigation menu at sidebar, but the primary navigation will be the horizontal menu.

We have a showcase article for navigation menu before, but we would like to focus on some tips, tricks, tutorials and some showcases of horizontal navigation menus here.

Location Of Your Navigation Menu

Let’s start with the location of your navigation menu. Where should you place your menu? There are 3 places where you can place it:-

  • Top of the page, above the logo or banner.
  • Beside your logo or banner.
  • Below the logo or banner.

Example: Artificial Studio

Artificial Studio

The navigation menu sits on top of the logo and content. They also use different color to represent different links and destinations.

Example: Cosmic Soda

Cosmic Soda

The menu standing right beside the logo.

Naming For The Links

Use common and understandable name for the links. This is exceptionally important as unusual terms will drive visitors away from your site.

There are a few standard terms such as “About or About Us”, “Portfolio”, “Contact or Contact Us”. Just make sure you follow the conventional terms and don’t be too creative!

Horizontal Menu With Drop Down Menus

If you are going to implement multi level drop down menu, make sure you place an indicator for links that will reveal drop down menu.

Another consideration when you build your multi level drop down menu is the compatibility across the major browsers. Make sure it works properly and it is not cluttered if the anchor text is too long.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

Example: inkd

inkd

inkd has a user-friendly multi level drop down menu that works well across different browsers.

Main Navigation With Other Components

Some websites do include other components such as search box or other buttons on their main navigation bar.

Make sure you clearly distinguish between the navigation links and the buttons. Navigation links shouldn’t sit at the left while other components should sit at the right hand side.

Example: Bookkeeping in a box

Bookkeeping in a box

The buy now button is clearly distinguished with the main navigation menu.

Tutorials

How to Make a Smooth Animated Menu with jQuery

This tutorial teaches you how to create a smooth animate navigation menu with jQuery framework.

How to Make a Smooth Animated Menu with jQuery

WordPress: “Magazine style” Horizontal dropdown menu

A magazine style drop down menu tutorial for WordPress users.

Wordpress:

A Stylish Navigation Menu With jQuery

A simple horizontal menu tutorial, with the uses of jQuery for the hover effect on menu.

A Stylish Navigation Menu With jQuery

Kwicks for jQuery and an awesome horizontal animated menu

The author demonstrate how to use both jQuery and its plugin, Kwicks to build an awesome horizontal menu with a nice Mootools effect.

Kwicks for jQuery and an awesome horizontal animated menu

Horizontal Subnav with CSS

This tutorial will walk through how to create horizontal menu with second level navigation using both jQuery and CSS.

Horizontal Subnav with CSS

Showcases

Tennessee Vacation

Tennessee Vacation

Studio Racket

Studio Racket

Bazar Solidale

Bazar Solidale

The Creative Dot

The Creative Dot

Vince Mazza

Vince Mazza

Under the Sun Garden Centers

Under the Sun Garden Centers

Loodo

Loodo

Sarah Longnecker

Sarah Longnecker

Ryan Couser

Ryan Couser

Rzepak Pure Pl

Rzepak Pure Pl

Regines Patisserie

Regines Patisserie

Sarah Hyland

Sarah Hyland

MacRabbit

MacRabbit

Face Designs

Face Designs

Manndible Cafe

Manndible Cafe

The Peach Design

The Peach Design

Green Label

Green Label

BiteClub

BiteClub

nanyate

nanyate

WE.CSS

WE.CSS

The Art of Non-Conformity

The Art of Non-Conformity

Mission Bicycle Company

Mission Bicycle Company

Petshopbox

Petshopbox

TwitterLane Interiors

TwitterLane Interiors

Owltastic

Owltastic

21st Century Odyssey

21st Century Odyssey

Lake Tahoe Ski Resort

Lake Tahoe Ski Resort

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

EyeMagine

EyeMagine

Wetaskiwin Regional Public Schools

Wetaskiwin Regional Public Schools

Glocal Ventures

Glocal Ventures

Hotel Arca lui Noe

Hotel Arca lui Noe

APAA

APAA

Trale

Trale

Must Read

How Much Does It Cost to Build an App in 2019

Software application building is one of the fastest growing fields for over one decade now. The major mobile app stores like Google Play and...

Reasons Why We Give Importance to Visual Content

Take a look online and you’ll find it difficult to locate a web page that doesn’t have an image attached to it unless you’re...

How to Organize Your WordPress Website Better

The best feeling is having a clean website, especially when you started on a clean slate when installing WordPress. Many times, content creators may...

Magento 2 vs WordPress WooCommerce – Which Is the Best Ecommerce Platform for Your Business?

Nowadays, building e-commerce is more comfortable than never before thanks to e-commerce platforms. The only hard part of starting is choosing the best platform...

Why You Should Choose Managed WordPress Hosting

If you're competing on the internet and chosen WordPress as your content management system, you have an important decision to make. Are you going...
Load WordPress Sites in as fast as 37ms!Horizontal Navigation Menus: Tips, Tricks and Showcases 1