Another thing to keep in mind is that this article is an observation, not in any way should it be used as professional advice. The most important thing in designing a website is how the purpose, design, and the content itself complement each other.

Side Navigation (or vertical navigation)

Side navigation uses too much space, with today’s websites that display advertisements you can’t just enter the two in a contest to see who wins. Most of the time, the side bar is reserved for advertisement and widgets. Go to ThemeForest or other WordPress themes marketplace and you’ll see that 9/10 of the items don’t have side navigation, be it left or right.

So, when is side navigation practical? In the case of TheNextWeb, since their articles deal with a very wide range of categories from daily events to technology news to just about anything on the internet, instead of placing their categories at the top, they designed it so that it shows on the left side of the website. Imagine having all those categories at the top.

Such is also the case with Yahoo.com, the navigation is on the right side. If you have noticed, throughout the years they have added and removed menus without really changing the layout to accommodate new menus. This is the good part of having side navigation, you won’t find space lacking.

If you haven’t noticed yet, right-handed people are usually more comfortable looking at the left side of their monitor. This is the reason why websites like 1stwebdesigner have their content on the left side, because it’s much comfortable that way. So, it’s a bad thing to place the navigation on your left side, the right side is usually better, which is also the place for advertisements and other widgets.

Top Navigation (or horizontal navigation)

The placement of your main navigation at the top of the page, or just below the logo, should be carefully thought of not only for the present design and purpose, but for future expansion. No users/readers really like a 90% redesign, it just feels so alienating. Some elements of the original design should be kept, for familiarity’s sake.

Today, most websites use top navigation with the few exceptions of minor menus on their side bar, like in the case of Facebook and Google+, and other large websites. With today’s jQuery, CSS, and other effects plugins, designers can now create a drop down menu to fill every categories with countless sub-categories.

(a screenshot of 1stwebdesigner within 1stwebdesigner, it’s like Inception!)

So, is Side Navigation still practical?

For websites it might not be, but for tools and services like WordPress, your mailbox, and other end-side platforms, side navigation is still useful, but for blogs and websites that are updated regularly, it is common practiced that their navigation is on the top.

The rise of mobile device users is exponential, but mobile versions of websites aren’t. Although there are websites that look the same on different screen sizes, having side navigation looks bad because of the small display. Just recently, I browsed many websites with drop-down menus (like 1stwebdesigner) using my girlfriend’s iPhone. I noticed that I can’t make the drop down appear, so I was stuck. In which case, I suggest you guys use jQuery Mobile.

Things to Consider Before Designing

This is how reddit rolls, by clicking My Reddits a drop down appears containing all of the reddits you are subscribed to. It has both vertical and horizontal navigation. Notice that the horizontal (top) navigation is harder to read, and that the vertical navigation is easier. Or is it just me?

Always think of the future of the website and how will it affect the design. Present content, purpose, and design should be weighed and looked at how will they be months or several years upon conception.

During the first web development class I had in college I asked myself whether I should place my navigation on the top or at the side. I chose the right side. Bad move. Turns out, I only had to place a few pages for navigation and it occupied the whole 200px from top to bottom.

It depends on how the website’s designed. If it is aesthetically pleasing, why not?  Sometimes, listing items from top to bottom gives a lot of emphasis on the top part.

But, meh. You’ll end up having a top navigation 90% of the time.

Your Take?

I’m pretty sure that you have your own say on this topic that the world would want to know. Is horizontal navigation cool and current because we all jumped on the same bandwagon?

1. mb.verticalSlider

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Demo

1.1. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview.

View Demo

2. Fly Slideshow

Fly SlideShow is a jQuery Slideshow script to present images as an automatic slideshow with a nice “fly” effect. Images fly from left to right with and have a fade effect.

It also features:

• Direct navigation (you can jump to any slide by clicking dots at top-right corner)
• Previous/next controls
• Image decriptions (it gets them from alt tag)
• Only 5kb size

Demo

3. OS X Finder-like ColumnView

This is a jQuery (1.4 as of writing) extension for mimicing the OSX Finder column behavior. You specify an initial element: $(‘#columnview’).columnview(); And the plugin takes the contents() of that node and places it in the first ‘column’. Any links within that column are grabbed, preventDefault()’d and instead they will perform a $.get request and enter that data in the next column.

Demo

4. Blast Slider – jQuery Photo Slider

Blast Slider is a jQuery plugin to create sliders, carousels, rotators with crazy animation effects – slide explodes into particles and then collapses to a new slide!

Demo

5. Photo Rotator jQuery Plugin

Photo Rotator JQuery plugin is an easy to use JQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Highlighted features:

• Driven by xml or arrays
• 3D Transition Effects (support in Safari)
• Easy to setup
• Slide show controls
• Easy customization
• Compatible with IOS mobile safari

Demo

6. infiniScroll

“infiniScroll” was written as a jQuery plugin. It works for blog posts… but will work for anything where you scroll to get more data. Just like Twitter.com, Facebook status messages, etc. Instead of paginating items, why not just keep scrolling? We like to scroll more than we like to go to a new page in some cases. It’s easier to get to items, and you already waited for things to load, so why load again! Posts and tweets are one thing, but this plugin will also work for leaderboards, portfolio items, anything where you want to load subsequent elements.

Demo

7. jQuery Gestures

The jQuery Gestures project is a plugin for the jQuery JavaScript Framework, which adds mouse gesture support to a page or zone on a web page. This plugin also supports composite gestures, which combine several compass directions to create a shape. This gives gestures more variations than the eight compass points.

Demo

8. jQuery Menu Selector

This plugin makes menu items active by location path.

9. jQuery Stepy – A Wizard Plugin

jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.

Demo

10. jQuery Slidy – A Transition Plugin

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Demo

11. Slide Down Menu

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Demo

12. jQuery Pageswitch Plugin

This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.

13. Apple style Navigation with CSS3 JQuery

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the Apple website and this plugin recreates Apple’s navigation using CSS3 and jQuery.

Demo

14. Smart Cart 2 – jQuery Sopping Crt Pug-in

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Demo

15. Flyout Ribbon using jQuery and CSS3

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Demo-Click on the arrow on the right hand side of your screen to see the demo in action.

16. Easyrpc

This is a synchronous and an asynchronous library to communicate with a server application with almost zero configuration.

17. TN34 Facets

This plugin uses the CSS clip styling method and the jQuery.clip plugin to show sectioned containers positioned in the same area and to expand a hovered container to its maximum width. Just like an accordion but much more powerful.

Demo

18. Keyboard Links

Keyboard links is a plugin which allows the user to quickly find any link on the page and click it by just using the keyboard. The user presses “l” and a toolbar appears at the top of the page then they start typing to search for the link that they want and a list appears of those links, they can then select a link by moving up and down keys and whilst doing so the focused link will be scrolled into view and highlighted, here’s a demo page which should fill in all the blanks.

19. iX Framework

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Demo

20. Hijax

The Hijax plugin is a JQuery plugin which allows you to add Ajax capabilities to your site, while maintaining search engine friendliness and browser history button support. It provides a simple and easy way to transform your site into a dynamic Ajax site, providing a richer user experience.

Demo

21. JAWS: News Ticker and Mini Accordion

This widget-esque script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has ‘more info’ data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.

22. Subway Map Visualization jQuery Plugin

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Demo

23. Sticky Section Headers

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Demo

24. Headerlinks

The jQuery headerlinks plugin will automatically create a table of contents block anywhere on the page with any style and any content you desire. It has a tremendous amount of flexibility and does many things automatically.

24.1. Sliding Tabs – jQuery Plugin

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.

View Demo

25. WZSplitter

WZSplitter is a flexible, easy to use layout plugin. It helps end users to set up any combination of resizable panels just by providing a few configuration values. Main features:

• Resizable panels, collapsing/expanding and stretching/shrinking functions.
• Skins.
• Unlimited nesting and linkage effects on panels’ actions.
• Default values driven, panels can be customized by simply changing configuration values.
• Programmatically control and event triggers using callback functions.

26. Autobrowse Endless Scroller

When run on a DOM element, this plugin will make the element grow and fill its content automatically when the user scrolls to the bottom of the element. The content is fetched via ajax, and the plugin keeps a cache using local storage.

Demo

27. Panoscoper

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

28. jCrumb

JCrumb is a JQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with JQuery UI.

29. jxSlider

jxSlider widget turns the selected DIV into a small embedded ajax tabbed-navigator. The ajax-loaded content will automatically and recursively be shown into the initial DIV.

30. Ninja UI

Ninja user interface is skilled in the techniques of JavaScript and CSS, going unnoticed until called upon to perform the arts of webjutsu.

Demo

31. jQuery Scroller

With jQuery Scroller you can create easily smart scrolling text, news ticker, or image animations with few lines of code in jQuery!

Some Features:

• Velocity, horizontal or vertical direction, starting/ending points, finite or infinite loops, move type (‘linear’ or ‘ping pong’)
• Configure mouseover/mouseout events or control programmatically scrolling functions from an external element
• Play, pause, resume scrolling animations or set a custom pointer.

32. Image Hover Move

A simple and practical navigation or featured image jQuery plugin.

33. Dynamic Navigation Menu

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

34. jQuery One Page Navigation Plugin

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

35. Slider Menu

Though certainly nothing new in the world of jQuery or even menu systems Slider Menu is a small compact menu animation plugin that creates a simple yet smooth menu using a UL list.

36. Multi-Level Accordion Menu

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

Demo

37. Sliding Pictures Menu

This is a jQuery plugin that makes a beautiful sliding menu with pictures. Some features:

Some features:

• Set default menu item open.
• Leave active menu item open.
• Remember active menu item using cookies.
• Use debug function.

38. onCube

This plugin generate a die like a Rubik’s Cube. You can use it for navigation, categories or whatever you want. The plugin works in IE6 and IE7 as well as in Firefox and IE8. It also looks very good on iPhone, iPad & Co.

Demo

39. Memu – A simple CSS / JavaScript / JQuery Menu

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Demo

40. Dropp

Dropp is a jQuery plugin which replaces regular dropdown menus ( <select> elements ) with alternatives you can style.

41. Pretty Pie Menu

Right-Click on the selected element, hold the button down, pie menu appears and select icon.Uses jQueryUI animations, icons and styles to make it “pretty”. Easily modifiable by changing jQueryUI stylesheets.

42. jMenu

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

Demo

43. Facebook Menu System

This menu is based on the same idea used on Facebook. The menu system work only with the UL html tag, no other tags are used, you have only to create a simple menu.

44. MobilyBlocks

MobilyBlocks plugin allows you to simply create an unordered list as an impressive and stylish animated circle.

Demo

45. jQuery Menu Selector

This plugin makes menu items active by location path.

46. jOrbital

jOrbital is a solution for building circular menus. It’s purpose is to group elements with similar functionality ( like social buttons ) into one hoverable button. But it’s not limited to simple menu only. You can create circular gallery, multi-level navigation or RPG -like menu. This is a premium plugin though.

47. Multi Row Checkbox Menu

Plugin to put those cool little Google Gmail type ‘Select All/Select None’ action menus at the top of a list of check boxes.

Demo

48. Content Slider

Slider implemented based on the jquery-ui framework, not just for images, but for text and other content as well, In this way, we can use the CSS classes of jquery-ui to apply different look and feels and use its effects for the slide presentation.

Demo

49. Hyjack Select

This jQuery plugin replaces the traditional html select control with an improved or “hijacked” version. To begin, try exploring the various Hyjack HTML select examples. Notice, you may now type to search for available drop down items. Please feel free to discover the demos, expand on current ideas, or just drop us a note. Documenation can be found in code behind and through google code or at our jQuery plugin page.

50. jQuery Configurable Context Menu

This is a configurable context menu, it works in three ways: right click, hold down, hover.Callback is executed with parameter e, the menu action event object normalized by jQuery, and el, the element associated with the menu. Menu is an ul with position absolute, menu element are li with .hover class added on mouse over.

51. NavDock

NavDock is a simple dock style menu icon.

52. jQuery Content Panel Switcher

The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. You can have single or multiple content switching panels on a single page Content panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned.

Demo

53. jQuery Image Rotator with Fade

jQuery Image Rotator is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, with great looking fading effects, if desired.

Demo

54. jQuery xFade

A jQuery plugin (3.6 KB minified) to fade/slide the elements inside the container based/extended from jQuery InnerFade by Torsten Baldes with the controls as addition.

55. jQCloud

jQCloud allows you to build neat cloud-shaped word clouds and tag clouds. Since this plugin produces pure HTML code, the word cloud layout can be easily personalized with custom CSS styles.

Demo

I’ll be featuring 61 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

CSS – Based Navigation Menu

1. Loodo.com

Casino-like game or snakes and ladders with the touch of colorful menu.

2. Change.org

The calmness of the choice of color with the emboss feeling of the menu to reveal the submenus is a great choice for its advocacy change.

3. Acko.net

Steven Wittens gives us another perspective or view of this menu.

4. UXBooth.com

UX Booth uses stylish yet simple menu.

5. MacRabbit.com

MacRabbit uses a mac os or apple concept to its design.

6. Joyent.com

Joyent uses simple, business looking menu that offers their works.

7. Nopoko Graphics

Elegance and simplicity of this portfolio gives you.

8.  Icon Designer.com

Large images-based menu that will attract and will draw users attention. Not the usual menu that you see.

9. Designsensory.com

Drop down navigation that uses two colors that presents the active link to the passive one.

10. Smallstone.com

Small Stone recordings, a U.S. record label, uses a radio-like or  that so-called a the so-called Space Echo Roland SE-201 menu.

11. TNVacation

Feel of country or map-like that will let you travel to the whole website.

12. Clever Twist

Rounded, apple application-like menu that offers application for your iPhones.

13. Clear Left

Clearleft uses a calendar concept that makes a what-to-do stuff on a particular day feel.

14. Tulumarka

Pressed looking  to see the selected menu.

15. Ars Technica

Menu pressed reveals a submenu. Dark yet simple feel.

16. 45royale inc.

Nice hover effects  with this simple and clean menu.

17. CSS Beauty

The size of the letters are so cute and  not usual but that’s what will caught your attention.

18. Design Intellection

A good way to use a block navigation that shows an effective  hover effects.

19. Microformats

Leaf like plus the cool green color that suits into your eyes. From green to black that gives you on what menu you are.

20. ronnypries.de

One of the best concept is to use a floor plan to navigate your users to the entire website is what Ronny Pries did.

21. Jiri Tvrdek

Fruit bearing tree is one of the creative way to use a navigation menu.  It is like your harvesting a fruit and lead you to the taste or the content of the website.

22. Matt Dempsey

Brush strokes with the interchange of the colors over choosing a menu is what  Matt Dempsey did.

23. Cognigen

Presents a pressed and clear view of the navigation.

24. District Solutions

Vertical tab that looks like a folder that really works on this website.  Rarely use but really great to work with.

25. Jeff Sarmiento

Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.

26. Racket

It is like a hierarchy of menu up to its roots.  One of a kind navigation that added to the creativity of the website.

27. DFW

Icons gives emphasis on the interaction to the menu.

Flash based Navigation Menu

28. Iipvapi

Photo clipping navigation menu with touch of hover color effects used in a Photo Clipping path services.

29. Moodstream | Getty Image

It is designed to squeeze your creative juices by tweaking the mood sliders navigation.

.

30. Not Forgotten – The Movie

Devilish, freaky and rise to the dead theme of the navigations presented into  tarot-like cards.  The card will be put in fire if you clicked on it.

31.Waterlife

The fluid navigation menu that brings you to the motion of a lake.

32. Nick Jones

Nick Jones uses a simple yet dynamic navigation for his portfolio. It’s like pulling things up and down.

33. Marc Ecko

Marc Ecko presents an art gallery navigation that lets visitors to  tour for  art and philosophy.

34. HBO

HBO , a tv-movie network, creates an interactive selection of movies for its navigation.

35. Got Milk?

An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.

36. AgencyNet

Stunning and amazing navigation design studio based in New York City, NY and Fort Lauderdale, FL.

37. 2Advanced Studios

Stylish neo ancient navigation design with a background mural that leads us to another world.

38. NickAD

Nick Ad uses a flexible but easy to use navigation. The stars that changes to a navigation when it clicks anywhere in the page.

39. Dave Werner

A creative person uses his own works to lead the users on his portfolio.

40. Section Seven Inc.

Section Seven has a colorful pamphlet like navigation with a sub menu written on it.

41. Cathy Beck

A navigation that open and close like a scroll when choosing a menu.

42. Beside

Beside uses a rainbow navigation that puts your colorful fantasies.

43. Christian Sparrow

A cardboard concept of its portfolio. The navigation hovers a pencil-like drawing.

44. Enila.fr

Small squares that put together that acts as the navigation and collaboration of works.

45. Havaianas

A colorful map that has the touch of the slipper texture that Havaianas proud about.

46. Square Circle

A table filled with stuffs that are related to the menu such as telephone for contact us, magazine for portfolio, newspaper for news and others. Real thing that use for navigation is a great thing.

47. TBWA\HAKUHODO

A great, artistic scenario use for navigation. Every element is a wonderful piece that gives life to the website. Rarely used but magnificent.

JavaScript – Based Navigation Menu

48. Agami Creative

Simple and eye pleasing of this navigation with the touch of  paint colors.

49. Dragon Interactive

It looks like the navigation is made up of Flash but it’s not.  Clean, cool and stylish navigation with a hover effects of colors that made this navigation really pretty.

50. The White House

White House really holds up a lot of information for the public. It is easily manage with this drop down menu to contain all the contents.

51. Eric Johansson

Eric Johansson uses a JavaScript sliding menu to travel on it’s website.

51. Helmy Bern

The navigation layout is in a grunge theme that also has a jQuery drop down effects.

52. Internet Dreams

The creative hover effect is not usual but it gives a distinguish look over what menu users choose in.

53. Panic -Coda

Familiar and popular icons were used to navigate users easily.

54. TapTapTap

Restaurant menu-like navigation is really great. I really love this navigation because of its simplicity yet creative design.

55. Kobe

This navigation uses a scroll to and scroll in plugin to create  an interesting transitions.

56. BlogHelpr

Floater design to use for navigation. It is the creative way to save the person in swimming into the website.

57. EyeDraw

EyeDraw uses an expanding images whenever you hover the mouse over the menu.

58. Andreas Hinkel

Andreas Hinkel uses Polaroid navigation for the animation effect.

59. Museu Gulbenkian

The drag dock  navigation in the bottom is a great way to reveal and hide the menu and submenus.

60. Sapphire Sound

The thumbnail used as a menu that has caption effect, custom scroll bar, and you also can see the fading, sliding animation.

61. Design Slicing

Transition effects is what  I really like on this navigation. The menu are set of questions that when hover are given answers.

These are few navigation menu design that you can work out on your website but be sure that you don’t want to get lost in the design and interactivity aspect of your navigation. Let your users be guided on the navigation you choose to deal with.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

6. Horizontal Menus That Grow on You

In this quick tutorial, author is  going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position  property.

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

12. CSS Dock Menu

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 great looking icons. Here author will show you how to implement it to your web page.

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover  and position properties.

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

However enjoy and come back, I will release follow up article in next few days with many more free template resources for especially for web designers to make your job easier and better!

1. WEB UI Treasure Chest v 1.0 by ArtDesigner.lv

This is really one huge treasure chest with more than 100 elements in it!!! Outstanding and creator is from Latvia, same country I am from!

2. Free Interface PSD-Files by chaosLT

Amazing quality – great for learning purposes, psd files for free!

3. dA UI Button Pack 1 by Proxone

4. 150 Badges by stunthacker

5. Free Layout No3 by ZeroniX-Designs

6. One Fancy Icon by nonlin3

7. Website Navigation Menu by MericG

8. iPhone Gradation Set by woopsdez

Could come handy, great colors and free psd file with coloring.

9. Glass Navigation by hapikacsa

10. Glossy Apple Badges by MacTyler

11. Glowing Web Buttons by Mac002

12. Web Buttons by ahmadhania

13. Art PSD by MericG

This would be a really good way to showcase your latest works or designs, beautiful stock!

14. Realistic IES Lighting Effect by shimapa

15. Speech box by Fowz

16. Folders by Autoanswer

17. GreenLightOrb, GUI.S Resource by VidarWestfelt

18. Firstsession sample by woopsdez

19. WebDesigner Mini Kit by LazyCrazy

Just great, I always wanted that cursor buttons, which are useful to show active buttons, show place you’re pointing at and more. Extremely useful for every web and graphic designer.

20. Glowing Styles by Nanie-nyo

21. Win7 Library Icon Template 1.2 by Teri928

22. Stylish 3D Buttons by ahmadhania

23. Download button by SG3000

24. Navigation for web by Bartas1503

25. Vista Themed Template by soflyfx

26. Text Template – BOLD by arnoldisawesome

Template to help new users understand layer styles, effects used to achieve such good looking text.

27. Designer Portal v.1 + PSD by berkayuygun

28. SETUP ICON PSD FILE by LeMarquis

29. iKons Pack PSD by InfinityK4fx

30. Shouts PWN stamps by mindfuckx

31. Windows 7 Taskbar .psd by Carlos-Way

32. etiquette PSD by TLMedia

33. My Orbs by opelman

34. nApple PSD Resource by nonlin3

Good looking psd Apple template, great for testing and analyzing effects.

35. Classic 2 Templates by Kshegzyaj

36. Abode Pickleshop by leca

37. Free Template Number 2 by yiolo

38. Folder Menu Tabs by GraphicIdentity

39. Free menu PSD for you by grafxdesign

Here you’ll find mainly free solutions, but I would also suggest for some special occasions, quick projects to consider some of design/code marketplaces, where you can buy optimized,documented and update codes for really cheap prize. I can assure quality is high,otherwise marketplaces won’t get so popular..and my experiences are only positive and I really am ready to spend 5-10 for important code snippet saving probably hours of my time. I myself have tried CodeCanyon and Mojo-Themes marketplaces, I am sure there are many more out there, but these two are definitely the ones I recommend.

At least I am doing my designing process like this -

• 1st I do simple browsing to find if there is appropriate codes, snippets,tools available for free (like this article for example).
• 2nd If after like 5 min browsing I cannot find anything what suits to me, here is time for those marketplaces..where usually I always find something good and I can move forward.

What’s your experiences?

And why you are figuring answers – enjoy this quality article!

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

Preview Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

Preview Demo

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

Preview Demo

4. Create The Fanciest Dropdown Menu You Ever Saw

Preview Demo

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

Preview Demo

6.CSS3 Mega Drop Down Menu

This Mega Drop Down Menu is perfect for creating unique menus easily. It’s CSS / XHTML only, there is absolutely NO javascript.The content can be organized in 1, 2, 3, 4 or 5 columns based on the 960 grid system. This item comes with 9 color variants and a detailed documentation to help you start with your brand new menu.

7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

Preview Demo

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Preview Demo

9.Fancy Sliding Menu for Mootools

Preview Demo

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

Preview Demo

11. Dynamic PHP/CSS menu

Preview Demo

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo

13. Animated Drop Down Menu with jQuery

Preview Demo

14. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down!

Preview Demo

15. Make a Mega Drop-Down Menu with jQuery

Preview Demo

16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

Preview Demo

17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

Preview Demo

18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

Preview Demo

19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

Preview Demo

20. jQuery (mb)Menu 2.7

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Preview Demo

21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

Preview Demo

22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

Preview Demo

23. Super menu pack (10 menus)

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.

All menus are easy to customize from CSS . In each file you will find detailed coments.

Preview Demo

24. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo

25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview Demo

26. Reinventing a Drop Down with CSS and jQuery

Preview Demo

27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

Preview Demo

28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

Preview Demo

29. jQuery iPod-style Drilldown Menu

Preview Demo

30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

Preview Demo

31. mcDropdown jQuery Plug-in v1.2.07

Preview Demo

32. CSS Ultimate Menus

These Menus feature 3 different dropdown styles, Product view, multi-column view and single column view, it has different classes for different levels and could support endless dropdowns. This files does support multiple browsers, and includes a PSD for user customization.

32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Preview Demo

34. Professional dropdown #2

Preview Demo

35. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

Preview Demo

36. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

Preview Demo

37. Dynamic Drive – Multiple Level Menus

A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

39. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

Preview Demo

40. jQuery UI Potato Menu

Preview Demo

41. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Preview Demo

Navigation is very important aspect in every web-design, because it is usually the place where people will click the most as well as notice creative and usable buttons. Really all we need is to get visitor remember our site! To complete and sharpen you need to use Photoshop here, actually version doesn’t matter, I am sure everything can be completed in any of PS previous versions too!

Let’s get started and learn how to create shiny, clean, stylish, glossy or even 3D navigation menus! Hope you will enjoy this article!

1.Content Box With Orange Banner Heading

In this tutorial you will learn how to create a content box similar to the ones used on this site, where the corners are rounded and the heading has a 3D effect.

2. Vista Styled Button Photoshop Tutorial

Learn how to make a vista styled button by using lots of different layer styles, tools and techniques.

3. How to Create a Slick and Clean Button in Photoshop

This Photoshop tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).

4. Blue on Black Navigation Bar

Design a beautiful navigation bar in Photoshop. This tutorial will teach you how to combine several layer styles to create a beautiful yet simple navigation bar.

5. Green Navigation

In this tutorial, you will learn how to make a stylish looking green navigation with a shine effect.

6. High-Detailed Plastic Navigation Bar

This tutorial is describing detailed process of creation of “plastic” navigation bar.

7. Modernistic Navigation Module

Create this beautiful navigation module with Photoshop. This Photoshop layout tutorial will show how simple shapes and gradients can create elegant designs.

8. Create a Nice Stylish Glossy Button in Photoshop

9. Light Lime and Blue Navigation

10. Stylish Dark Navigation Box

In this tutorial you will learn how to make a more advanced styled navigation box using some more effects and tools.

11. Creating A Cool 3D Web Design Effect

In this tutorial you will learn some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.

12. Web Button Making Tutorial 1 by easydisplayname

The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.

13. Web Button Making Tutorial 2 by easydisplayname

The following tutorial is on how to create a set of web buttons. This tutorial assumes you to have basic understanding about the tools in Photoshop.

14. Photoshop Tutorial: Designing a Unique Bookmark Box

In this Adobe Photoshop tutorial we’ll be learning how to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

15. Volkswagen Inspired Navigation

16. Professional Menu Button

In this easy, step-by-step tutorial you are going to see how to design an interesting professional menu button by using some simple filters, for example Gaussian Blur & Motion Blur.

17. Design Watercolor Effect Menu

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article),you will learn how to design a watercolor effect menu in Photoshop.

18. Professional header design for your website

This Photoshop CS3 tutorial will teach you how to make a nice-looking and professional header for your website easily.

19. Glossy-Style Carbon Fibre Navigation Buttons

20. Interface Orbs

Shiny glass orbs have been popular fixtures for web interfaces and application skins for quite some time. In this tutorial, you will be going over a technique for making a standard interface orb.

21. How To Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

22. Clean Vertical Navigation Interface in Photoshop

In this photoshop tutorial you will learn how to create a Clean Vertical Navigation Interface for your website.

23. Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

24. RSS button in Photoshop

25. Stylish Dark Navigation Menu

In this tutorial, you will be learning some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.

26. Sleek Photoshop Header Design

27. Slick Blue navigation

Learn how to create a slick looking web 2.0 website banner / header!

28. Sleek Glossy Blue Button

Use a variety of different techniques to make a stunning button.

29. Simple Glossy Navigation Buttons

30. Navigation Bar – Create a glass type navigation bar

31. Simple and Clean Menu Bar

Learn how to make this simple and clean menu bar.

32. Glossy Web 2.0 Button

Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.

33. Pixel Style Navigation Box

Learn how to make a navigation box with a unique pixel style.

34. Professional Dark Web Button

This tutorial will show you how to make a Professional web button and also to use it like a Navigation Bar.

35. Clean Blue Navigation Box

This tutorial is going to go over how to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.

36. Create a Wii Web Header in Photoshop

This photoshop tutorial will teach you how to design the Wii header found at Nintendo.com.

37. Metallic Header Design in Photoshop

38. Design Web 2.0 Interface in Photoshop

Understanding the tutorial below is understanding it’s technique, with it you can draw yourself some graphical user interface for a website. Side navigation, buttons, headers, for instance. All Web 2.0 style.

39. Creating flexible buttons using Photoshop shapes and styles

40. Web 2.0 style buttons tutorial

41. Shut Down Button

42. Clean White Navigation

43. Photoshop Button Maker

44. Web buttons

45. Chrome Button Navigation

46. Glass Button Photoshop Tutorial

47. Green Gel Button

48. Awesome, War-Style Game Buttons

49. Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

50. Easily Create An Apple-Inspired Navigation

If you know any more quality navigation tutorials, please add links on the comments! Thank you!

Keeping in mind such parameters, I created a list with 30 innovative, beautiful, creative and eye-catching navigation menus for your inspiration in web development process.

1. AlexCohaniuc

2. Jeremymartin

3. Kriesi

If You want similar menu, find explanation in the JeremyMartin website above, inspired by this site navigation tutorial.

4. DragonInteractive

The most beautiful navigation I’ve ever seen to be honest, animation is so real, it’s hard to believe menu isn’t made using Flash.

5. AppStorm

6. Fubiz

Outstanding webdesign and JavaScript implementation.

7. CheckOutApp

8. EricJ

Very creative JavaScript sliding menu and website.

9. Concentric-Studio

10. InternetDreams

Whole website is loaded with jQuery and JavaScript features. Click through to check yourself.

11. Panic – Coda

Popular menu already, you may know about this one before.

12. MariusRoosendaal

13. Helmy-Bern

Excellent example of well implemented grunge website and JavaScript navigation

14. BenjaminDavid

15. DannyBlackman

Just click on the navigation buttons and you’ll understand what’s so unique with them.

16. Voll

Whole website is unique, slide from the sky to underworld using jQuery navigation.

17. SkiAlpine

Simple yet well designed navigation dropdown menu.

18. TapTapTap

Exceptional navigation, you gonna love this one.

19. TheHoleInOurGospel

20. ColourPixel

Very interesting navigation just like the whole design.

21. Apple

Whole website is one big beauty and MAC section has interesting sliding menu.

22. Creasenso

Beautiful rollover effects in navigation.

23. Polargold

Website and navigation created using both Flash and JavaScript techniques.

24. NavigantConsulting

25. Branded07

26. SearchInsideVideo

Static navigation while whole page slides magically.

27. Aperfolio

28. MacRabbit

Simple CSS design, but design on this website is too good to dare not to include this one.

29. MadeByGiant

Unique sliding menu and actually navigation itself is pretty interesting, at first not so recognizable but that makes even more fun to research.

30. AteBits

1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definitely will like it.

Preview || Download

2.Animated Menus Using jQuery

Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to Dragon Interactive (dragoninteractive.com).

Preview || Download

2.1. Sliding Tabs – jQuery Plugin

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.

View Demo

3. Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether.

Preview || Download

4.jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Preview || Download

5. jqDock menu

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Preview || Download

5.1. FloatMenu

A little similar to the above navigation menu, only more smarter and more pleasing to the eyes. It can float diagonally (both up and down), vertically (left and right), and horizontally (up and down). It is hard to discuss how cool this navigation menu is, you just have to see the live preview. Link below the image. Oh, it works for text links too with cool effects.

Live Demo

6.Sliding Jquery Menu

This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.

This is how looks finished demo version:

Preview || Download

7.CSS Sprites 2 – It’s JavaScript Time

Preview

8. CSS Mac Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my iTheme.

Preview || Download

9.Kwicks for jQuery

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

7 Examples || Download

10.Jquery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Preview || Download

Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.

View Demo

11.Learning jQuery: Fading Menu – Replacing Content

Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, this time he teaches how to use jquery fading options on menu.

Preview || Download

12. How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? This tutorial teaches how to do just that by building a menu and animate it with some smooth effects.

Preview || Download

13.Create Vimeo-like top navigation

Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.

Preview + Vimeo site || Download

14. jQuery (mb)Menu 2.3

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Preview || Download

14.1.Context Menu Class

Advantage: anyone can use this class even without enough programming experience. Or if you are a master coder but is short of time, this one is for you. very easy to customize. You can even make a website the same as how you see a contextual menu on your desktop!

Live Preview

15. Coda Slider

Preview || Download

16. jQuery idTabs

idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possibilities.

Preview || Download

17. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. This is great tutorial explaining to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.

Preview

18. LavaLamp for jQuery lovers!

Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.

Preview || Download

Mega Menu Complete Set

This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 10+ jQuery effects and one of the 13 color variants.Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.

View Demo

19. Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Preview || Download

20. Using jQuery for Background Image Animations

Five different ways, how to create background image animations using jquery – very live effect.

Preview

21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but this will be done in jQuery!

Preview || Download

22. Menumatic Mootools

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Preview Vertical || Preview horizontal || Download

22.1. Super menu pack (10 menus)

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. Collection is as varied as possible in style and appearance to give you choice. Thinking in design working with code.

View Demo

23. jQuery convertion: Garagedoor effect using Javascript

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

Preview || Download

24. Perspective tabs

Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.

25. Fisheye Menu

Fisheye Menu is an expanding menu based on the MacOSX doc.

Download

26. Sliding JavaScript Menu Highlight 1kb

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.

Download

27. Mootools Demo Redux

Simple expandable Javascript navigation menu.

Preview

28. HoverAccordion

A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).

29. Simple Javascript Accordions

Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.

Preview || Download

30. UvumiTools Dropdown Menu

The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unordered list, using Mootools Javascript Framework, it can be easily updated by simply editing a <ul> HTML element.

31. Create a multilevel Dropdown menu with CSS and improve it via jQuery

Preview || Download

32. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview

33. Floating menu jQuery&CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

Preview || Download

34. Superfish – jQuery menu plugin

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

Preview || Download

35. JQuery Pager

A simple JQuery plugin to provide paging UI functionality for data driven web applications

Preview || Download

36. jQuery feed menus

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound – this jquery feed menu is solution here!

Download

1.Fancy menu – very cool navigation menu:

2. Excellent CSS dock menu for MAC lovers made with jQuery:

Download dock menu

3. 37 different CSS navigation techniques:

4. Almost 5 years old menu, but looks great:

5. Nice jQuery sliding effect menu with 4 different examples:

6. Updated JQuery Nested Tab Set with Demo;

7. Vertical Flyout JavaScript Menu;

8. 13 hand-picked Vertical and horizontal CSS Menus ;

9. Different tutorials for CSS menu creation;

10. Big library of vertical CSS menus from dynamicdrive.com;

11. Nice collection of  ~150 different CSS menus from CSSplay.com – regularly updated.

I really recommend You to visit this site:

12. Menu with simple show/hide effect – 2 examples with CSS and MooTools;

13. Superfish v1.4.8 – jQuery menu plugin;

14.Accessible Image-Tab Rollovers;

15. Simple CSS vertical menu Digg-like;

16. Simple Javascript Accordions;

17. Unique navigation menu using jQuery and MooTools:

18.CSSmenumaker.com – offers professional CSS menus;

19. Cool JavaScript menus from JavaScriptkit.com;

20. Create a multilevel Dropdown menu with CSS and improve it via jQuery

21. jdMenu Hierarchical Menu Plugin for jQuery – vertical multilevel dropdown list;

22. Amazing apple style navigation menu:

23. Accordion style jQuery menu:

24. Cool animated navigation with CSS and jQuery:

25. jQuery Treeview Plugin:

26. 35 different unique Jquery demos with different features

27. Jquery fastfind menu – click toogle menu, to get popup navigation menu:

28. jQuery idTabs – 8 different cool jQuery examples:

29. jQuery ContextMenu – lightweight jQuery plugin that lets You selectively override the browser’s right-click menu with a custom one of your own:

30. jQuery UI tabs – different tab effects as simple tab, start with custom tab, slide effect, fade effect and much more;

31. iconDock jQuery – one more similar navigation to MAC OS X dock effect;

32. SlidingMenu – very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype)

33. Tabbed navigation

These eleven menus are created using the Sliding Doors technique, these menus work also correctly in Internet Explorer.

Download all menus

34. Another CSS tabbed navigation:

35. 9 different CSS block menus:

Download all menus

36. 12 more different CSS menus.

37. ADxMenu – 4 different examples of cool navigation menus:

Download

39. At CSSmenubuilder is huge list of different and modern look menus, take Your best pick:

40. Huge list of different menu examples:

41. CSSmenus: horizontal and vertical:

42. Great navigation and little more, one of the popular accordion versions:

Download accordion menu

CSS menu generators:

List-u-Like CSS Generator

This generator allows You to create 3 different styles of menu