Website menu has really important role in almost all websites, it makes webiste navigation easier and saves space to display the more contents. Besides, the modern website menu has the features of usability and appearance. A clear and usable website menu can guide the users to the wanted page with one-click; and an attractive and eye-catching website menu can decorate the website better. To create a website menu, the several techniques are available, such as JavaScript, CSS, jQuery, Flash and Database. Let’s view the website menu styles made by various techniques:

Website menu styles made by JavaScript

dhtml-menunavigation menudrop down menuWebsite menu styles made by CSS

css-menu

css menu

drop-down menu

The navigation of a website is meant to be clicked. It shouldn’t be hard to find. It’s important that it stands out from the rest of the elements on the page with elegant style but yet still matches the overall style and color of the design. Here is a showcase of websites that achieve this in a very stylish way. These navigations look amazing, have serious click appeal, and are guaranteed to inspire you for it’s beautifully color variation with the whole website.

navigation menu

Positive Impressions

DHTML Menu

Hart & Huntington

Amigo in Granada

drop down menu

Yankee Soda

web menu

Kelt

drop-down menu

What is one of the aspect of a website that always needed? It is the navigation menu. Navigation menu is a useful part of  the website because it leads the user to different part of the website. Interaction to the website is the main use of the navigation menu. More and more great looking and user-friendly navigation menus are being created that gives  life to the websites. I’ll be featuring 8 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

Dave Werner

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

Enila.fr

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

Got Milk?

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

Havaianas

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

HBO

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

Waterlife

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

Cognigen

Presents a pressed and clear view of the navigation.

Jeff Sarmiento

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

Step1. Follow the visual tutorial.

http://www.sothink.com/tutorials/how-to-create-dynamic-tree-menu-with-created-recordset-from-dreamweaver.htm

Step2.

Launch Sothink Tree Menu. Create a new menu item and Input ”

<%=sCatName%>

” in it.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
While Not Recordset1.EOF
sCatName=Recordset1.Fields.Item(“NAME”).Value
%>
*/

Then input the following codes in Suffix:

/*
<%
RecordSet1.MoveNext
Wend
%>
*/

Step3.

Create a sub item for this menu item, then input ”

<%=sProduct%>

” in it and input

<%=sLink%>

in link field.

Enter “Node Setting > Condition” and input the following codes in Prefix:
/*
<%
Recordset2.Filter = “CATID=” & Recordset1.Fields.Item(“ID”).Value
While Not RecordSet2.EOF
sProduct=Recordset2.Fields.Item(“NAME”).Value
sLink=Recordset2.Fields.Item(“LINK”).Value
%>
*/

Then input the following codes in Suffix:
/*
<%
RecordSet2.MoveNext
Wend
%>

*/
Step4.

Enter “Global Setting > Web Path” to set the webpath as below:

Script path:

http;//localhost/js

Image path:

http;//localhost/image
Step5.

Publish the menu to the ASP page we have just created in step1.

Now you have successfully use the created recordset from DW with Tree Menu.

From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

web menu

navigation bar

drop-down-menu

dropdown-menu

dhtml-menu

Black menu symbolizes fashion, business, reliance, which is widely used for the various website, such as commerce, government and education. Black menu is easy to match with website color which ranges from light to dark, the classic color scheme includes black & white, red & black and black & blue. Black menu is plain and high capacity to contain almost all URL links to reach the target page quickly.

black-menu

How to Create Black Menu?

With Sothink DHTML Menu, you can choose the proper one from 2 methods to get your wanted black menu.

We will take this menu for example to learn setting black menu:

Navigation Menu

Method One: Insert image of black background as background for the whole menu.

The black menu created by this method will be like this:

Navigation Menu - Black Menu

  1. Check “Top-Level-Menu” in the menu panel, and enter “Popup menu > Background” to choose black image as background for the whole menu.

    Black Menu - Popup Menu

  2. Check all menu items, and enter “Menu Item > Background” to set background color as “Transparent”.

    Black Menu - Menu Item

Method Two: Set black background image or background color to every menu item

The black menu created by this method will be like this:

Navigation Menu - Black Menu

  1. Check all menu items, and enter “Menu Item > Background” to set background color as “black” or insert black image as background image.

    Black Menu - Menu Item

  2. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0; and check menu items and enter “Menu Item > Border” to set border as 0.

Tab menu has the features of space-saving and eye-catching, which is the popular web menu applied to website navigation. Generally, tab menu is 2-level navigation menu, it displays main menu as tabs, and sub-menu will be shown vertically in below line when the mouse is over the main menu. Tab menu usually uses round corner as background, which makes the web menu appealing and pleasing.

Tab Menu

How to Create a Tab Menu?

Tab Menu is a standard compliant 2 level tab menu. With Sothink DHTML menu, you can create a tab menu in steps:

1. Create menu includes sub-menu.2. Enter Global > Menu Type in Tasks panel and select the option “Tab menu”. The menu is switch to a menu with 2 levels.

3. Enter Global > General in Tasks panel, choose “Mouse over” as the method to select the item. So you can move you mouse over one of the sub items to select it.

4. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0 and delete the arrow from “Popup Menu > Arrow”.

5. Select all menu items, enter “Menu Item > Background” to pick up the background image from image library.

6. Set “Transparent” for all menu items, popup menu and the whole menu in “Popup Menu > Background” and “Menu Item > Background”.

At present, website designers can complete the various navigation menus by different technologies, like CSS menu, JavaScript Menu, Flash menu, HTML menu and jQuery menu. Then, which is the popular way to create navigation bar? The website guru prefers to design web menu by JS and CSS code; but for majority of us, we’d like to make navigation menu by professional menu creator. Here lists three reasons why choose menu creator:

We will take Sothink DHTML Menu for example to explain advantages about menu creator.

WYSWYG Menu Creator Makes Menu Creation Simple

  1. Get a clear menu structure from menu panel; and freely adjust the position for menu item by clicking.menu-creator-panel
  2. Preview JavaScript menu in real time with menu creator.
    menu creator
  3. Choose menu properties and customize the corresponding menu style in menu creator.menu-creator-property

Finish Functional Menus in Easy Way

  1. Set menu type as Float to float menu in fixed position on webpage.float-menu
  2. Edit highlight settings for highlight menu to show where the user is on the web site.Menu Creator - Highlight Menu
  3. Make long menu items scroll and keep their scrolling in a fixed depth.Menu Creator - Scrolling Menu

Quick Start Menu from Rich Resources

  1. Start web menu from the various free menu templates.menu-creator-template
  2. Apply preset menu style to the menu item.
  3. Apply resources from image library to design menu in less time.

The above-mentioned features are only in menu creator; download Sothink DHTML Menu to get more features which other technologies are unable to achieve.

JavaScript tree menu will be the best guide for website of a complicated directory structure. You can see such navigation tree menus on many large-scale websites, such as shopping and knowledge website. This type of tree menu has the features of clear navigation, unlimited level of tree menu, smart recording function and SE-friendly; that is the reason why tree menu becomes popular.

Now, you have decided to insert menu tree into webpage to navigate your website. Next, let’s think about how to make tree menu quickly? Create a navigation bar by CSS or HTML code? No, Sothink Tree Menu will be the ideal tree menu builder to create JavaScript tree menu because there is no coding and professional skills needed.

Build the professional menu tree as below in 3 steps:

tree menu samples

Step 1: Start tree menu from free built-in templates.

Launch Sothink Tree Menu, choose “Business > Flip” from Startup window.

JavaScript Tree Menu - Menu Templates

Step 2: Set properties for each menu items

  • Choose menu item in Tree panel;

    JavaScript Tree Menu - Tree Panel

  • Enter Tasks panel to choose required items;

    JavaScript Tree Menu - Tasks Panel

  • Set properties for the selected menu item in properties panel, such as text content modification, link, and item size.

    JavaScript Tree Menu - Property Panel

Step 3: Publish menu tree to webpage

  • Check “Publish” button on the toolbar to publish your tree menu.

    JavaScript Tree Menu - Publish Button

  • Choose right publish method to insert web menu to webpage step by step.

    JavaScript Tree Menu - Publish Wizard

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.
Below we present over 10 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

  • Nopokographics8
    Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

    drop-down-menu-1

  • Cosmicsoda10
    This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

    drop-down-menu-2

  • Clearleft14
    Clearleft uses a couple of paper pieces for its navigation.

    navigation-menu-3

  • Water’s Edge Media19
    Patricia Abbott uses clothespins for the navigation options.

    dhtml-menu-4

  • Jeff Sarmiento24
    Why not try a sloping navigation options once in a while?

  • Mac Rabbit
    One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

  • DFW UPA34
    Icons reinforce the menu items on this website and add emphasis to each option.

    menu-samples-7

  • Duarte Pires36
    This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

    menu-templates-8

  • Eric Johansson42
    Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

  • Bern45
    I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

The article is from smashingmagazine.com.