Effective jQuery & CSS Navigation Solutions

Building websites is surprisingly much about to find a somewhat logical and effective and visually appealing navigation. Often the menu building efforts end up with a simple ugly list because of lack of time. But one thing is for sure – a good, beautiful and (almost most of all) logical navigation is absolutely essential for your sites usability and appearance.

During our work with CSS and jQuery articles we have seen many good examples of nice and effective navigation solutions. Many of them are relatively easy to implement for your own projects, if you have some basic coding skills and good portion of patience.

CSS3 Framework: With this free CSS3 Menu framework you can create great looking navigations in just a few clicks. The visual design user interface allows you to create menus without the need for complex hand coding. You can download it right HERE.

Cashrevelations presents an adequate selection of jQuery and CSS navigation solutions – 15 effective jQuery and CSS navigation solutions that will effectivize and enhance your website. All these navigation solutions are presented with demo where available.

15 CSS & jQuery Navigation Solutions

1. Background Image Navigation – jQuery
In this tutorial we are going to create a beautiful navigation that has a background image slide effect – by using the Background-Position Animation Plugin. The main idea is to have three list items that contain the same background image but with a different position.
View Demo

2. Slide Down Box Menu – jQuery & CSS3
In this tutorial you will learn how to create a cool and unique sliding box navigation (with submenu box with further links). The main idea is to make a box with the menu item slide out, while a thumbnail pops up in the top of the menu.
View Demo

3. Cufonized Fly-out Menu – jQuery And CSS3
In this tutorial you will learn how to create a full page cufonized menu – when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and slide out a description bar from the left side of the page.
View Demo

4. CSS3 Mega Drop-Down Menu
In this pedagogic tutorial by Guillaume Marty you will learn how to build a cross-browser, awesome and impressive CSS only drop-down mega menu, using nice CSS3 features – an effective solution to display a lot of content while keeping a clean layout.
View Demo

5. One Page Navigation – jQuery Plugin
This is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. The plugin is also available on Github.
View Demo

6. CSS Menu Builder
With this tool you can create a standard compliant xhtml/css menu for your website for free via the online navigation generator. It contains more than a 1000 horizontal, vertical and breadcrumb menus via the CSS Menu Builder. The page downloads a bit slow.

7. Lava-Lamp Style Navigation Menu – jQuery
In this logically done tutorial Jeffrey Way of Nettuts+ will teach you how to build a neat looking lava-lamp style navigation menu for your site using jQuery and CSS. As usual you can download the complete source files.
View Demo

8. Visual CSS QuickMenu
This extensive and practical online tool offers a solution for generating fast and feature rich drop down menus. It produces fast clean Cascading Style Sheet list based menus, even capable of functioning in browsers with the JavaScript disabled.

9. Scrollable Thumbs Menu – jQuery
In this tutorial with downloadable source code you will learn how to build a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of scrollable thumbs appear when hovering over a menu item.
View Demo

10. Easy Accordion – jQuery Plugin
The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still. You can download the source files for this plugin.
View Demo

11. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

12. Awesome Bubble Navigation – jQuery
In this tutorial you will learn how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. You will use the jQuery Easing Plugin for a even nicer and improved effect.
View Demo

13. Vertical Scroll Menu – jQuery
In this tutorial with downloadable source code Kevin Liew will teach you how to create a vertical scroll menu. You will also use the jQuery.color plugin to animate the background color changes. The HTML is as simple as possible, and the jQuery and CSS do the rest.
View Demo

14. Elastic Thumbnail Menu – jQuery And CSS
In this easy to follow tutorial Sam Dunn on Build Internet will learn you how to make an elastic and good looking thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

15. Mega Drop Down Menus – CSS And jQuery
In this relatively easy to follow tutorial by Soh Tanaka, you will learn how to make an awesome and practical Mega Drop Down Menu with the help of CSS, jQuery and the Hover Intent jQuery plugin from Cherne.
View Demo

The different CSS and jQuery navigation solutions presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors or service providers.

Related Posts :

iCheck - New jQuery Plugin

Announcing jQuery Mobile 1.2.1

Windows 8 - Beginners Guide

jQuerin Grid Builder