Accomplishing matchless navigation that successfully performs its function is almost similar to mounting Mt. Everest. Getting an exceptional navigation with wonderful functionality makes the website easy to navigate and interesting for the visitors, therefore assuring a better user experience.

At this time, we have selected some websites with marvelous and distinctive navigational elements that will not only enthuse you, but will demonstrate to you how to merge novelty with realism. Enjoy!

1. Tvrdek

On this website, you may feel that the website does not have any content but once you explore its navigation, you will love to browse this website more than anything.

2. Racket

Here you will see the navigation menu hanging in the air. The navigation menu looks somewhat off the cuff but at the same time it looks so cool.

3. Iamyuna

Here the navigation may appear minimal and negligible but once you keep your mouse on the option it shows you the complete list of all available choices. The mouse over effect is simply amazing.

4. Kutztown

Kutztown creates a very artistic look with its design and typography, further the navigation adds more beauty to it.

5. Samsung Mobile

Samsung Mobile features an extremely dynamic and animated website with a unique and appealing navigation style.

6. Case Studies

Centrally aligned navigation with some links at the top of the page is truly an extraordinary approach for a navigation menu. Clicking on any centrally aligned option will reveal the detail page.

7. Acko

An artistic representation even through the choice of navigation menu. Acko takes advantage of its bright color combination to make its navigation even more attractive.

8. Helmy Bern

Helmy Bern features a somewhat disorganized top navigation but the side bar and the bottom navigation menu are simply amazing. The use of the right color to create the right impact can be seen here.

9. Cathy Beck

Cathy Beck makes use of a unique approach for her site navigation. Here the navigation is set at the bottom of the page rather than the top of the page, further the mouse over effect is out of the ordinary.

10. TinyTeam

TinyTeam offers a very systematic and pragmatic navigation menu that eliminates any confusion a new visitor may have in browsing the website and finding its desired information.

11. Alexbuga

The sliding effect on mouse over is the key point of navigation plan of this website that makes this navigation extremely classy and elegant. The main navigation reveals when you place your mouse on the logo design at the top of the page.

12. Thibaud

It’s truly fun to browse this website. You can actually arrange and rotate the cards present on the home page by simply dragging and dropping them to your desired location and can see the portfolio by clicking on it.

13. Small Stone

An unusual navigation that matches the website name. Here the designer has successfully imitated a recording device as a navigation menu.

14. Gleis3

The navigation plan used in Gleis3 website looks somewhat like a road map that leads you to your desired location easily and effortlessly. Simply click on an option and you will get the relevant information.

15. Amore

With a horizontal as well as vertical navigation plan, this website holds its own charm. The main navigation menu is placed at the bottom of the page with some cool and beautiful mouse over effects.

16. Yodabaz

Here the navigation is presented with an animated background image sufficient enough to create that attention grabbing first impression. Clicking on the portfolio reveals some of their excellent work.

17. Sensi Soft

The whole navigation is set to be at the center that makes this website extremely well-organized and easy to navigate. The effects that this website uses are beyond the ordinary mouse over effects.

18. Nickad

Nickad brings flash into play to make its navigation menu and overall website design look stunning. This is something that you will never find in any other website navigation plan.

19. Not Forgotten Movie

The navigation options in this website are in the shape of playing cards and when you put your mouse on it, they will give a burning effect suitable with the theme of the website.

20. 75b

75b also has a horizontal and vertical navigation plan. The main options or menu is placed with the vertical navigation while the sub-menus are placed with the horizontal navigation.

21. Dave

This website not only brings an exceptional use of navigation into play but also experiments with unique typography to set it apart from dozens of other similar websites.

22. Vernon Clarke

Here the whole navigation has been summed up within an icon of a film tape with some small icons on it. Besides that the website also features some exceptional work on the main page.

23. Booma Webdesign

Simple and efficient navigation without extra or jumbled up elements. The navigation used here is also easy to understand for the new visitors.

24. Revolution Driving Tuition

Simple and nice navigation with no more classy effects, even a novice can also understand how this website works.

25. Jeremy Levine

An imaginative demonstration of the navigation menu that makes this website fun to browse. Jeremy Levine takes advantage of its dazzling color combination to make its navigation even more eye-catching.

26. Wards Exchange

The whole navigation has been placed at the side of the website design that makes this website tremendously well-ordered and easy to navigate. The effects this website uses are beyond the ordinary mouse over effects.

27. Sideshow Press

The navigation is presented with some cool and appealing effects giving this website a personal and human touch. Clicking on any option will take you horizontally to the relevant section.

28. Bountybev

Bountybev make the most of its bright color combination to make its navigation even more attention-grabbing. The use of bold typography further makes this website design hard to forget.

29. Noonstyle

Here again, the navigation has been set at the sidebar to make this website look well organized and efficient. When clicked, the website also shows the relevant options in the sidebar.

30. Vanity Claire

Easy and on the contrary an artistic approaches to design navigation for Vanity Claire that not only matches with the main concept of the website but also affords regularity.

31. EwingCole

Here, the navigation options are divided into two parts. The top most navigation reveals the content in the customary style while the second navigation is presented in a somewhat trendy style.

32. Custom Tshirts

Here the main links are presented at the top while a portfolio or T-shirt photo are presented with a mouse over effect that enlarge the photo when you place your mouse on it.

33. Hello Goodlooking

When browsing this website, initially you may feel like that this website does not contain any content but once you explore its navigation, you will love to browse this website more than anything.

34. Christian Sparrow

Christian Sparrow makes use of a simple but attractive navigation plan that not only grabs the attention of the visitors but also creates an everlasting first impression.

35. Enila

Enila has a rather jumbled navigation menu but the side bar at the top of the page makes it simple and easy to navigate, and also add an interesting feel to the design.

36. Salt Films

In this navigation menu the thing that stands out is the animated hand which gives the whole website a very unique and appealing look.

37. Blue Bug Digital

Blue Bug Digital makes use of an animated background that revolves 360 degree providing you a complete preview along with the navigation menu.

38. Section Seven

Section Seven also uses its navigation menu in an extremely creative and artistic way making the whole website look and design visually appealing and remarkable.

39. Sq Circle

While the website loads completely, the message says we are creative and pragmatic. That proves true when you explore the site in detail. The navigation truly is out of the box and extraordinary.

40. EyeDraw

EyeDraw presents a very non-fussy and clean website layout giving its visitors an easy to navigate and understand website. The main options slide to give you a complete preview when you place your mouse on it.

41. Light Motion design

Light Motion design also provides a navigation plan or guide for those who are not very internet savvy. On the whole, the navigation is exceptional and has been designed in a very systematic way.

42. Studio Stemmler

Studio Stemmler combines effective navigation, excellent design and a beautiful color combination all in a one to get this visually appealing and attractive website to the surface.

43. Eric johansson

A fun and irreverent site that also give you the option to view the site in a more traditional way.

44. Iipvapi

Innovation at its very best is what that describe this navigation menu perfectly. Simple but effective navigation with some cool effects.

45. Narrow Design

A vertically sliding navigation menu that moves to the left when one item is clicked giving its details on the remaining part of the screen.

46. Organic Grid

Organic Grid holds a visually appealing website navigation that consists of more than 90% of the main page.

47. Smriyaz

An extremely beautiful website design with neat and efficient navigation menu that guides its visitors how to explore the site to make the most of it.

48. Unfold

Simple but a creative approach to design navigation for Unfold that not only matches with the main concept of the website but also provides symmetry. Simply click on the top navigation links to explore the site in detail.

49. Yugop

The navigation is placed at the bottom of the page with some exceptionally animated effects.

50. Vanalen

Vanalen also presents a very unusual and unique navigation menu that is totally different from the ordinary websites. The navigation plan used in this website is rare and exceptionally creative.

Reducing complexity is an art and a “breadcrumb” is one tool that designers love to use. Breadcrumbs act as the navigational device for a website visitor. When used smartly, breadcrumbs make website navigation effortless. This article will enlighten you about the basics of breadcrumbs and help you understand the importance of breadcrumbs in your upcoming web design.

Why the word breadcrumb?

It has something to do with the tale of two siblings, Hansel and Gretel, who were tricked into a house made of cake and candy. They were threatened by the owner of that dream home – a witch! In that story, the kids drop breadcrumbs to create a trail from their home which they use to escape the witch and get home. Just like the real breadcrumbs that helped those kids find their way out, breadcrumbs in an application helps users trace their path back to their starting point.

If you still don’t understand what breadcrumbs are then see the image below. The navigational links that are circled are the breadcrumbs that Google uses for the navigational ease of its readers.

Why breadcrumbs?

That, I agree, is a smart question! When your client (or readers) do not ask for breadcrumb navigation why should you use it?

Breadcrumbs are performers nibbling in the corner of your design. Removing breadcrumbs might leave your design unchanged but they do matter when used smartly. Please understand that it isn’t the client who will tell you if they want breadcrumbs or not. It is your genius that should decide if a particular design requires breadcrumb or not. They will make a design more intuitive for users.

Should breadcrumbs “blindly” follow the fairytale model of Hansel and Gretel?

That is one question that people ask me often. In our (aforementioned story) the two kids, Hansel and Gretel, walk through the mystifying forest, dropping breadcrumbs with a hope of finding their way out.

It is often an invitation to confusion when you take metaphors too far especially in the case of user interface design. If breadcrumbs were to follow the fairytale model of Hansel and Gretel without any modifications per se then it might just add to the complexity of any app design.

Let me take the case of a regular 1WD reader:

• Starts from Home Page.
• Clicks on the category “WordPress” from menu.
• Clicks on the sub-category “Showcase” from the drop down menu.
• Suddenly changes mind and navigates to “Freebies” category.
• Finally, checks the “About Us” page out of curiosity.

Can you imagine the breadcrumb navigation that this will result in if the fairytale was being literally followed? Here is a quick glance at what it would look like:

Will you want the breadcrumb navigation like above? Dainis, founder of 1WD, would never want any 1WD reader to believe that Freebies is a sub-part of Showcase when it actually isn’t. Such breadcrumbs (ideally called “Dynamic Breadcrumbs” in Internet lingo) often end up confusing the user. Remember, we are trying to use breadcrumbs to help the user discover the correct path to home and not the path that they have followed.

Pros of using breadcrumbs

As already mentioned before, removing breadcrumbs from your design might not bring many visual changes to your design but they surely add up to the much wanted user experience. Here are a few advantages of using breadcrumbs:

• User Experience: That is the major reason why a designer might want to use breadcrumbs in an application. They simply add up to the overall user experience of any design. You don’t have to think about the navigational structure in a design when you have breadcrumbs helping you with the same.
• Reduce in useless page views: Users usually use the browser back button in order to track back their paths. In such cases they hardly stay on a page that comes by while clicking the back button because their goal is some other page. Breadcrumbs reduce such views!
• Increases average time on website: Once a user visits an internal page of a website directly using a search engine then either he has the choice of closing the window after his job is done or navigating to other related pages of the same website. This is when breadcrumbs help the user navigate to related stuff on that website. Henceforth, the average time that the visitor spends on the website multiplies.
• Small in size: Usually breadcrumbs are pretty small in size and nifty to use – unless you do something very unusual with them!

Cons of using breadcrumbs

Everything has its dark side and breadcrumbs aren’t any different!

• Dynamic breadcrumbs (explained above) add to the navigational complexity of an application.
• Using breadcrumbs where they aren’t required simply adds to confusion. Consider the example of 1stWebDesigner itself. This website has two menus in its header that are more than enough to help users navigate through the complete website structure. We really don’t need breadcrumbs here (hence you don’t see them!)
• Using breadcrumbs as the only source of navigation can lead to information hiding. Breadcrumbs help the users navigate to home page. It can never help the user navigate through every possible content present in the website. You got to have menus for that!

NOTE: It is solely the choice of a designer when it comes to breadcrumbs navigation. Think first, then make your decision.

SEO and breadcrumbs

I ain’t gonna skip this! You talk of adding text (in any form) to a web page and a webmaster (like me) will start figuring out the keywords that can be used to optimize the same. Well, we are webmasters and we want our websites to be featured at the top page of Google!

Breadcrumbs can be a useful way to leave keywords on a page. This enhances keyword rich internal linking which as a result might help in SERP. Before you go the extra mile and optimize your breadcrumbs with keywords, I want you to go through below points:

• First think about usability and later on, if possible, use keywords in your breadcrumbs. Never miss out on the main purpose of your breadcrumbs – user satisfaction.
• Over stuffing of keywords could result into disastrous results. Be warned!

The Showcase

Enough said already! Use breadcrumbs if you feel like and if you require inspirations then we do have few exciting ones following up:

1. Apple

2. Booreiland

3. Bubble Stick

4. Cool Spotters

5. Delicious

6. Devlounge

7. Girls Scouts

8. Lonely Planet

9. Overstock

10. Unique Martique

Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.

Components of Good Website Navigation:

1. Primary Navigation

Primary navigation are the main menus or categories of a website. These are considered as the most important links that can be seen the moment your website loads. Most of the primary navigation consists of Home, About Us, Contact Us and other links depending on what kind of website you are creating.

Keep in mind that primary navigation should not have more than seven or eight links. Choose the most important links and put them as the main menus and the rest will be placed on the sub-menus.

2. Secondary Navigation

Secondary navigation are the secondary links or sub-menus of a website. Usually, these are to be found from a drop down menu or a fly-out menu.

A drop down menu is when a user mouse over and click on a menu button, then sub-menus will be shown.

Sample Image of a Drop Down Menu

A flyout menu is when a user hovers onto a menu button, then sub-menus will appear. In this case, the user doesn’t have to click the button for the sub-menus to appear.

Sample Image of a Flyout Menu

3. Position of Menus

It is important that you position your menus on a place where your viewers can easily see them.

Usually, horizontal navigation is put on top and under the header of your website. While a vertical navigation, this is commonly put on the left side of the website.

To add up on to this, always put your menus from left to right since most viewers start reading from the left.

Even you put your links from right to left, your viewers will still read them starting from left. Take the image below as an example. Even the links are put into a right to left position, viewers will still read them starting from the Contact Us, Blog, About Us and then Home.

4. Size of Buttons and Menu Label

The size of your menus must be noticeable, but not too large that they would occupy too much space. Adjust them where they can be seen easily by your visitors while maintaining a professional look.

When putting menu labels, make sure they are readable in size. Also, choose a font color that is in contrast with the color of your button. If the color of your button is light, use dark color for your menu label and vice versa.

5. Color of Menu Buttons

Colors are one way to entice the visitors of your website. Use a color for your menus that is in contrast with the background color of your website. This way, you can capture the attention of your viewers and your buttons will stand out with the other elements of your website.

Take a look at this example. Even the buttons have the same color as the background, it still stands out for it has button-click effect and the text color is white.

6. Icons and Effects

Icons are great way to differentiate your buttons and they also inform users on what viewers could expect on that link. Also, hover effects is a good way to attract viewers’ attention. This also informs the visitor that they can click the button which looks different from the others. You can also put a button-click effect to inform your viewers on what button they clicked.

To give you more idea about this, I have here a good example of website navigation. The designer of PixelResort put icons on top of each menu label to represent the link. Also, it has a hover effect (glowing circle) and a button-click effect (arrow pointing on the link). In this case, the page is on the Blog link and the mouse pointer of the viewer is put on the Goodies link.

And my last tip for you…

7. The less click, the better.

Viewers tend to be impatient when searching for information, they want to seek what they are searching very quickly. Make sure that your navigation respond as quickly as possible to your viewers’ instincts.

In this article, I will highlight amazing horizontal and vertical navigations for your inspiration. First, let us take a look at horizontal navigation.

Horizontal Navigation

Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.

Good Characteristics:

1. It occupies less space

Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.

2. More noticeable

Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.

3. Easier to use

Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.

4. Viewers are already used to it

Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.

Bad Characteristics:

1. Limited space for your menus

When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.

2. Can only be used if number of menus are already known

Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.

Here are some example of horizontal navigation for your inspiration:

1. Rayman

2. Davroc Interiors

3. Rzepak

4. Owltastic

5. Sarah Hyland

6. Racket

7. Kinder Aktuell

8. Acko

9. Red Velvet Art (Horizontal Navigation)

10. Xedum

11. Design Nut

12. Jay Taylor Design

13. Mac Rabbit

14. Getraenke Kukral

15. Noizi Kidz

16. Chris Guille Beau

17. Small Stone Recordings

18. Max and Lous

19. Loodo

20. Boukarabila

21. Jiri Tvrdek

22. Ungarbage

23. Duarte Pires

24. CSS Beauty

25. Manndible Cafe

Now let us go to vertical navigation.

Vertical Navigation

Vertical navigation are usually placed on the left side of a website and the menus are placed from the top to bottom, like a ladder.

Good Characteristics:

1. It allows grouping of menus

Vertical navigation allows you to group your menus and place sub-menus under each main category. Unlike in horizontal navigation, you still need to create a drop down menu for the sub-menus.

2. It is easier to add or remove menus

If you are trying to put more or remove menus in the future, you can use vertical navigation. It will be easier for you to add or remove menus without resizing each buttons.

Bad Characteristics:

1. It occupies a lot of space

Usually, menus in vertical navigation are placed on the left side of the website and this occupies a lot of space on the whole website template. Unlike when using horizontal navigation, you are just using the top part of your website.

2. Limited characters for your menu label

For your buttons not to occupy too much space, you are limited to few characters when putting labels for your menu. If you will be putting many characters, tendency is the font size of your menu label would be small or you will occupy too much space on your template.

3. Scrolling down is needed for websites with many menu buttons

If you have several menus for your website, the tendency is that your viewers need to scroll down their to see the other menus placed at the bottom part.

4. Viewers are not used to it

Viewers expect that a website should always have a horizontal navigation, since it is mostly used by web designers. But nowadays, there are already websites that are using vertical navigation and are designed creatively to make it easier and noticeable for visitors.

To give you more idea about vertical navigations, take a look at these websites.

1. Brian Handley Design

2. R.I.P. Cube Club

3. INNOVATIVE Imaging Professionals

4. Envira Media Inc.

5. Oink El Rellano

6. Gary’s Real Life

7. Total Body Care

8. Red Velvet Art (Vertical Navigation)

9. Extra Tasty

10. Power to the Poster

11. Cambrian House

12. Cassys Design

13. Diego La Torre

14. Brown Blog Films

15. Wards Exchange

16. AJ Miles

17. Washtenaw Community College

18. Adventure Here

19. KKMedia

20. National Television

21. Utah Travel

22. Notorious Design

23. This is Leaf

24. District Solutions

25. Thora

Other Examples of Navigations

Here are some examples of websites with one-of-a-kind navigations.

1. Noroutine

2. Good Man

3. Time for Cake

4. Steven Holl

5. Michael J. Yang

6. WOW Brand Impact

7. Nathan Borror

8. Creative Storm

9. Nora Rose Travis

10. Deconstruction Records

What are your favorites among the selection? Comment out and feel free to share.

For high quality Photoshop navigation menu tutorials, click the link below.

50 Really High Quality Photoshop Navigation Menu Tutorials

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.

Yes, and of course such sliding content always is great from design point of view and giving your visitor unique experience while he is visiting. Great isn’t it? – here you will find a lot of customizable plugins, tutorials helping you to understand accordions at all as well as great examples, where this technique has been implemented in successful sites!

Accordionza – jQuery Plugin

Accordionza is a very flexible and lightweight jQuery (v1.4+) accordion plugin.

• Many features — Easily configure all effects and speed; pause on hover; autoplay and autorestart; collapseable captions; and more.
• Keyboard navigation — Optionally enable the cursor keys to browse an accordion.
• Lightweight — The plugin takes only 3kB to load.
• Flexible — Three accordion styles are included. Create your own with some HTML&CSS skills.
• Solid — No wobbly edges as often seen in other accordion scripts.
• Progressive enhancement — All content is still viewable without JavaScript enabled.

View Demo

1. Yup, Yet another JQuery Accordion Plugin

Simple free jQuery accordion plugin. Available in 4 versions. Check out the tutorial how to use it, get the code, and download all the source files. Some of the new features:

• Built according to the JQuery Plugin pattern
• No more need for menus to have an ID
• An ‘active’ class is now added to each toggle that has an open panel below it
• Panels that hold other things than lists. You can now add anything
• Nested accordions

Check out the demo here.

2. jQuery UI Demo

See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.

2.1. Grid Accordion

Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio. You have the option to use either XML or HTML . The powerful API will allow to further enhance the functionality of this jQuery plugin and make it possible to easily integrate it into your own application.

View Demo

3. Stupid Simple jQuery Accordion Menu

Very detailed tutorial about including jQuery in your mockup, creating the JavaScript, creating CSS and HTML.  You can also view the demo and download all files.

3.1. Classic Accordion

Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. You have the option to use XML , which will make the accordion panel much easier to setup and maintain. However, you also have the option to use HTML instead of XML . The plugin also provides an easy to use API which will allow to further enhance the functionality of the accordion and make it possible to integrate it into your own application.

View Demo

4. Making Accordion Menu Using jQuery

In this post, you’ll see two examples of accordion. First menu’s visibility gets toggled on clicking on the header while the another menu’s visibility gets toggled when mouse is moved over it. See the tutorial and download source files as well.

5. jQuery Accordion Menu

Step by step tutorial that will take you through the creation of a jQuery accordion menu. Of course, you can view the demo and download source files.

6. jQuery Examples – Horizontal Accordion

Learn how to create easy horizontal accordion menu.

7. jQuery – Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. Explore tutorial, see documentation and different examples of use here.

8. State-Saving jQuery Accordion Menu Without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them. View demo and download source too.

9. Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.

10. Regular and Hover Accordion Menus

See example of hover accordion menu, learn how to create it and download the plugins.

11. Haccordion – Simple Horizontal Accordion Plugin for jQuery

Simple and fast plugin for creating simple horizontal accordion menus. Demo included.

12. Exactly How to Create a Custom jQuery Accordion

The plan for this tutorial is to show how to create an accordion using the jQuery UI function, then create one using some custom coding. You’ll be using a blog sidebar as an example. View demo and get the source.

13. Simple Accordion w/ CSS and jQuery

Detailed tutorial how to create great looking accordion menu. You can also check out Toggle tutorial. View demo.

14. Accordion Madness

One of the options how to create accordion menu.

15. A Simple and Beautiful jQuery Accordion Tutorial

Learn how to create the well-known JavaScript accordion with the most minimal amount of HTML, CSS, JS and of course, with a beautiful interface as well. Check out demo and download source.

16. Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Demo and code included.

17. Create Simplest Accordion Menu using jQuery

Another simple tutorial how to create standard accordion menu. View demo and download files.

18. TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle. For more information visit leigeber.com.

19. Javascript Accordion Menu Wizard

Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.

20. Horizontal JavaScript Accordion 1kb

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.

Examples

21. Alex Cohaniuc Portfolio

22. Deluge Studios

23. Rzmota

24. Screenfluent

25. Artisanmedia

26. Exotics RTC

27. Two Chaps

28. Ten 18 Photography

29. We Are Lighthouse

30. DJ Eric C

Extra: Grid Accordion – $8

Perfect for a grid gallery. The usual worry about displaying multiple images at the same time is eliminated here because of its smart code structure. Seen in Code Canyon, a marketplace of Envato where all sold items are topnotch in quality because before they even get to be showcased, experts see to it that products are up to standards. Plus very warm support from the coder himself/herself!

Anyways, I ended up mixing those two which resulted in this cool effect. I found it really useful and hope you will too, as you can use in on almost every website that has some sort of menu – and let’s face it, most do.

The video below will show you what you’ll be making and how to do that. Unfortunately, since I had only 5 minutes for this, I focused only on the jQuery part. Everything else you need for this you will find in the tutorial below. You can also hit the “Live Demo” button to see the final effect yourself.

NOTE: To fully enjoy all of this extravaganza, you need to see it in a browser based on WebKit engine – Safari and Chrome being the best ones. Current version of Firefox doesn’t fully support it, not to mention Opera, or IE.

Table of Contents

1. What’s Needed
2. All the HTML Stuff
3. Importing jQuery and Nagging Menu Script
4. Let’s Make a CSS Soup
5. CSS3 Extravaganza
   • Spicing Up #menu
   • Spicing Up ul li a
   • Spicing Up ul li a:hover
   • Spicing Up .default
   • Spicing Up .fixed
6. jQuery Magic
7. After Word

What’s Needed

Just four things and we’re good to go:

• index.html
• style.css
• nagging-menu.js
• you

HTML markup will be just copy-and-paste thing, as it’s not really important here. Instead, we will dig little deeper into CSS3 and jQuery.

All the HTML Stuff

Create index.html and paste all of this in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Stay-On-Top Nagging Menu with CSS3 and jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>

<div id="navi">
	<div id="menu" class="default">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Development</a></li>
			<li><a href="#">Freebies</a></li>
			<li><a href="#">Inspiration</a></li>
			<li><a href="#">Resources</a></li>
			<li><a href="#">Tutorials</a></li>
			<li><a href="#">WordPress</a></li>
		</ul>
	</div><!-- close menu -->
</div><!-- close navi -->

<div id="content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div><!-- content -->
</body>
</html>

Depending on your screen resolution, you will need a lot of text so…

IMPORTANT: Keep adding paragraphs with “lorem ipsum” until the menu disappears from your sight entirely when you scroll down to the very bottom of the page.

Importing jQuery and Nagging Menu Script

In your index.html file, just before the closing </body> tag, paste those two lines:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>

Bravo ;D!

Let’s Make a CSS Soup

This is just the basic CSS, so create style.css file and paste all of this in:

body {
	background: #efefef;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	font: normal 13px Verdana, sans-serif;
	color: #222;
}

#navi {
	height: 50px;
	margin-top: 50px;
}

#menu {
	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 750px;
	margin: 0 auto;
	margin-bottom: 25px;
	padding: 30px 0;
	text-align: left;
}

ul {
	padding: 0;
}

ul li {
	list-style-type: none;
	display: inline;
	margin-right: 15px;
}

ul li a {
	color: #fff;
	text-decoration: none;
	padding: 3px 7px;
}

ul li a:hover {
	background: #01458e;
	color: #ff0;
}

.default {
	width: 850px;
	height: 50px;
}

.fixed {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;
}

The .default and .fixed classes are very important to us. They will change the look and position of our menu; the former is responsible for how the menu looks at the beginning and for its position in the browser window, the latter is responsible for where the menu goes after we kick it out from its original position and how it looks then.

CSS3 Extravaganza

Now for the fun part :)! Let’s go from the top to the bottom through our CSS soupe and add some CSS3 sugar accordingly:

Step 1: Spicing Up #menu

We’ll add a subtle gradient and rounded corners.

The gradient for browsers based onWebKit engine:

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));

Simple as it is. We’re adding linear gradient, going from the top to the bottom vertically. Our gradient consists of three colors, color-stop simply tells the browser where that particular color should stop and the next one begin.

The gradient for browsers based on Gecko engine:

	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

The same as above, only we don’t have to be specific about where each color stops, because it looks great as it is already.

Let’s add rounded corners, first for browsers with WebKit engine:

	-webkit-border-radius: 5px;

That’s really self explaining. The syntax for browsers with Gecko engine looks like this:

	-moz-border-radius: 5px;

And at last, the proper syntax:

	border-radius: 5px;

Your CSS3 styles for #menu should look like this right about now:

#menu {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Step 2: Spicing Up ul li a

Here, let’s add rounded corners, text shadow and some subtle transition. We know the syntax for rounded corners already:

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

Now, the shadow for our links:

	text-shadow: 1px 1px 1px #000;

This will place the shadow 1px to the right and below our link. The shadow will have 1px blur radius and black color.

Now, our smooth transition:

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;

The transition-property determines which properties fall under the transition, in our case it will be color along with background. The transition-duration determines how long the transition should last, it will be 0.5s for color and 0.5s for background accordingly.

Your CSS3 styles for ul li a should look like this:

ul li a {
	text-shadow: 1px 1px 1px #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

Step 3: Spicing Up ul li a:hover

Nothing new here, CSS3-wise:

ul li a:hover {
	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

Step 4: Spicing Up .default

Here we’ll add only box shadow:

	-webkit-box-shadow: 0 5px 20px #888;
	-moz-box-shadow: 0 5px 20px #888;
	box-shadow: 0 5px 20px #888;

Similiar to text-shadow, this will place the shadow 0px to the right and 5px below our menu. The shadow will have 20px blur radius and #888 color.

Step 5: Spicing Up .fixed

The same goes for .fixed, we’ll add only box shadow:

	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;

This time it will place the shadow 0px to the right and 0px below our menu, but the shadow will have 40px blur radius and #222 color.

The entire file should look like this right now:

body {
	background: #efefef;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	font: normal 13px Verdana, sans-serif;
	color: #222;
}

#header {
	background: #0F1620 url(bg.jpg) no-repeat top center;
	width: 100%;
	height: 120px;
	border: solid #0F1620;
	border-width: 3px 0 3px 0;
}

#navi {
	height: 50px;
	margin-top: 50px;
}

#menu {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 750px;
	margin: 0 auto;
	margin-bottom: 25px;
	padding: 30px 0;
	text-align: left;
}

ul {
	padding: 0;
}

ul li {
	list-style-type: none;
	display: inline;
	margin-right: 15px;
}

ul li a {
	color: #fff;
	text-decoration: none;
	padding: 3px 7px;

	text-shadow: 1px 1px 1px #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

ul li a:hover {
	background: #01458e;
	color: #ff0;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

.default {
	width: 850px;
	height: 50px;

	-webkit-box-shadow: 0 5px 20px #888;
	-moz-box-shadow: 0 5px 20px #888;
	box-shadow: 0 5px 20px #888;
}

.fixed {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;

	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;
}

Great job, we’re done with CSS. Let’s add some jQuery!

jQuery Magic

All our code should be executed after the DOM is loaded. For that we’ll use this great method jQuery has, called .ready(). You’re probably familiar with the long notation:

$(document).ready(function() {

	// all our code will go here

});

But this time let’s use the short notation, which does exactly the same thing:

$(function(){

	// all our code will go here

});

Now, first thing we should do, is to grab our menu (which is a div with ID “menu”) and assign it to a variable, because we’ll use it several times. The same goes for its position, and for that we’ll use jQuery’s .offset() method which, unlike .position() method, returns the position of the element we use it on relatively to the document, not to the offset parent. Let’s do it:

var menu = $('#menu'),
	pos = menu.offset();

Next, we need to listen for the scroll event, so every time we scroll the page up or down something happens:

		$(window).scroll(function(){
			// code here
		});

Now we need to check if we scrolled down so far that our menu is not visible anymore. This point is exactly the position of our menu from the top + its height. We also need to check if the menu is now in its default position and has the default look:

			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				// code here
			}

If the result of our if statement is true – we want the menu to fade out, the we need to remove the .default class, give it a class of .fixed and then fade it back in, so we can see it:

				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});

Right now the effect works only in 50%; it fades out when you scroll down and then it reappears at the top of your browser window – but it doesn’t return to its original position and size when you scroll back up. Let’s fix it now.

For this we need another if statement. This one will be the exact opposite of the first one we made, so:

			else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				// code here
			}

If the result of our statement is true, we want the menu to fade out again, remove the .fixed class and give it a class of .default this time, and then we want it to fade back in, so it’s visible to us:

				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});

The script is complete now, this is how it should look:

$(function(){

	var menu = $('#menu'),
		pos = menu.offset();

		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

Well done! Now, go and implement it somewhere and have fun :).

After Word

With a little customization you can easily tweak the whole thing to your liking and/or need, which makes this little effect very useful. Combine it with CSS3 and you’re done :). That’s it guys! If you have any questions, feel free to ask in the comments, I’ll do my best to answer them. Cheers!

I hope you will  enjoy this post. Please feel free to chime in by leaving a comment at the end of this post as well!

1. Pixlogix

2. RainSong Media

3. Clockwork

4. Freestyle Sport

5. Fight For Future

6. Plug And Play Design

7. Zaplee

8. Media Temple

9. Deportation Day

10. Active Consulting

11. Arbutus Photography

12. Flickr Design

13. Deren

14. Lupus

15. Soh Takana

16. Thoughtbot

17. Abduzeedo

18. Squaredit

19. 3.7 Designs

20. Evan Eckard

21. Pixel Resort

22. Lonn Roth

23. Interactive

24. Nathan Borror

25. UX Booth

26. Clear Left

27. Real Mac Software

28. Appstorm

29. Dragon Interactive

30. Helmy Bern

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