The web designers usually apply “Cool” JS menu to navigate the website. This JS menu has the features of dynamic and interactive, which attracts the more traffic. Although JS menu is a stunning navigation menu, it is not friendly for search engine. How to make JS menu SE friendly to Google spider? Search Engine Friendly Code Maker included in Sothink DHTML Menu will help you to generate special code to make your JS menu crawled quickly by SE spider.

How to use Search Engine Friendly Code Maker?

When you finish JS menu configuration, click “Tools > Search Engine Friendly Coder Maker” or click DHTML Menu - Search Engine Code Maker on the toolbar to open Search Engine Friendly Coder Maker Dialog. The generated codes are listed within the dialog. You can click the button “Copy All” to copy these codes and then paste them into the page through web editor. These codes should be placed behind the menu code within BODY tag.

JS Menu - Search Engine Coder

The codes are like this after they are copied to the web page:

The JS menu codes are marked by green.
The generated codes by search engine friendly code maker are marked by red.

<body>
<script type=”text/javascript”>
<!–
stm_bm([“menu0e98″,800,””,”blank.gif”,0,””,””,0,0,250,0,1000,1,0,0,””,””,0,0,1,2,”default”,
“hand”,””],this);
stm_bp(“p0″,[0,4,0,0,2,3,0,7,100,””,-2,””,-2,50,0,0,”#999999″,”#E6EFF9″,””,3,1,1,”#000000″]);
stm_ai(“p0i0″,[0,”Menu Item 1″,””,””,-1,-1,0,””,”_self”,””,””,””,””,0,0,0,””,””,0,0,0,0,1,”#E6EFF9″,0,”#FFD602″,0,””,””,3,3,1,1,
“#E6EFF9″,”#000000″,”#000000″,”#000000″,”8pt Verdana”,”8pt Verdana”,0,0]);
stm_aix(“p0i1″,”p0i0″,[0,”Menu Item 2”]);
stm_aix(“p0i2″,”p0i0″,[0,”Menu Item 3″,””,””,-1,-1,0,””,”_self”,””,””,””,””,0,0,0,”arrow_r.gif”,”arrow_r.gif”,7,7]);
stm_bpx(“p1″,”p0”,[1,4,0,0,2,3,0,0]);
stm_aix(“p1i0″,”p0i0”,[]);
stm_aix(“p1i1″,”p0i1”,[]);
stm_aix(“p1i2″,”p0i0″,[0,”Menu Item 3”]);
stm_ep();
stm_aix(“p0i3″,”p0i0″,[0,”Menu Item 4”]);
stm_aix(“p0i4″,”p0i0″,[0,”Menu Item 5”]);
stm_ep();
stm_em();
//–>
</script>

<noscript>
<ul>
<li>Unspecified</li>
<li><a title=”/index.htm” href=”/index.htm” target=”_self”> Home</a>|</li>
<li><a title=”/product.htm” href=”/product.htm” target=”_self”> Products </a></li>
<li> Showcase </li>
</ul>
</noscript>

</body>

Now, the remarkable JS menu is shown on your website; and SE friendly menu code is available to make your website indexed and crawled quickly by spider.

I believe the navigation of a website should always be simple. However, if a website has many pages and sub pages, the thought of navigation simplicity goes out the window. This is where drop down menus come into play. A good and well executed drop down menu can make navigating a large site easy for the user. While drop downs make site navigation easy, sometimes they can seem difficult to implement, but the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or MooTools.

Superfish

drop down menu

jQuery SuckerFish Style

drop down menu

Smooth Navigational Menu

DHTML Menu

Animated Drop Down Menu with jQuery

navigation bar

droppy

Simple Drop Down Menu for jQuery

menu bar

UvumiTools Dropdown Menu

black menu

MooTools Drop Down Menu

web menu

MenuMatic

drop down menu

Drop-Down Menu with jQuery

menu maker

Simple CSS vertical menu Digg-like

menu builder

Drop Down Tabs

dhtml menu builder

JavaScript Dropdown Menu with Multi Levels

javascript menu

jQuery Multi Level CSS Menu #1

web menu

This is a frameset page including iframe and wonderful DHTML menu. Here displays the iframe content. Click the menu item above to see the picture in the iframe window, and you will find that the item is be activated, which the icon is shining and its background color becomes into blue.

frameset-highlight-menu

Steps:

  1. Create an iframe page in Dreamweaver.
    Select the menu item, add the linked page and Enter the frame name in the target filed in Menu Item > General.
  2. Set the icon for the menu item by type the image’ path in Menu Item Settings > Icon; set the background image in Menu Item > Background; and set the border in Menu Item > Border.
  3. Set the global properties for the whole menu. Check the option “Auto highlight current item”; set text color, Bg colcor, border color, Bg image and icon as the highlighted items style; and check “Clear highlighted item’s link” and “Highlight parent menu item” for the menu in Global > Highlight.

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks.

So, with all of that in mind, take a look at these 5 excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

Veer9
These tabs have beautiful styling. Notice the use of different colors and a drop shadow for separation purposes.
tabbed menu

Wire & Twine11
This is some excellent texture use with a clean layout.
tab menu

Komodo12
A good example of tabs used in a module.
tab menu

Inkd13
Good styling and usable because of size and separation.
tab menu

Kinder-Aktuell15
Good gradient use and separation.
tab menu

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.

Below you’ll find 8 beautiful and user-friendly Navigation Menus and solutions.

BREAKER DESIGN

nav bar

folietto

drop down menu

Pulmad, peod, lillesalong… – Annilill Peoteenindus

dhtml menu

coda.coza

drop-down menu

EGOLOUNGE *Büro für digitales Design

menu bar

Convan Design – Howdy

popup menu

far from fearless

pop up menu

Erika Greco – Blog

Nav bar is regarded as the most important element in website design because it is usually placed in the most visible location of the webpage, which makes a significant impact on the visitor’s first impression. Website designers always seek for outstanding nav bar styles to sustain the viewer’s interest. As the adage goes, “Content is king”, but getting to the content requires navigation. The modern nav bar not only needs clear-structure navigation, but also applies remarkable menu style to attract the eyes.

Nav bar generally comes in one of two orientations: vertical and horizontal. Horizontal nav bar displays items side by side; vertical nav bar stacks items on top of each other. Next, we will enjoy 15 nav bar styles of horizontal and vertical to give your more inspiration.

Horizontal nav bar with rounded corners

LemonStand
LemonStand’s primary navigation features rounded dark-gray buttons with a slight gradient.


Nav Bar - Horizontal Menu

gugafit
gugafit’s navigation buttons change to green on hover. The active item is given a dark-blue pressed look.


Nav Bar - Horizontal Menu

PeepNote
PeepNote has beige rounded buttons, with the active menu item in blue. It also uses the CSS 3 text-shadow property to add drop-shadows in most modern Web browsers.

Nav Bar - Horizontal Menu

Modern web menu

This DHTML menu is clean and popular, which is widely used for many industry. The web menu made by Sothink DHTML Menu presents us the silver and rectangle shape of menu item.

Nav Bar - Horizontal Menu

Crystal JavaScript menu
This crystal menu delivers the sense of modern, fashion and elegance. Round rectangle design gives you more imaginations – button.

Nav Bar - Horizontal Menu

Horizontal nav bar with icon

Carsonified
Carsonified uses icons to indicate the active menu item; and upon hovering over an inactive menu item, its icon is revealed.

Nav Bar - Horizontal Menu

MobileMySite.com
The company behind this website specializes in creating mobile versions of websites, so the designer made the navigation look similar to the iPhone’s UI41, making it seem familiar to first-time visitors.

Nav Bar - Horizontal Menu

RedVelvetart.com
This website features hand-drawn elements, and the navigation menu continues that theme with hand-drawn and -sketched icons above the text.

Nav Bar - Horizontal Menu

Dot JavaScript menu
Sothink DHTML Menu creates this classic red & black nav bar, the red dots work as separator to divide the menu items. When moving the mouse over the menu item, you will see the popup menu shown in line, and white dots divide the 2-level menu item.

Nav Bar - Horizontal Menu

Image DHTML menu
The image works as icon, the top icon and the bottom text together explain the usage for this menu item. Just see the image, you will know where the menu item will link to.

Nav Bar - Horizontal Menu

Vertical nav bar with various styles

Mellasat Vineyard
Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.

Nav Bar - Vertical Menu

Utah.travel
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.

Nav Bar - Vertical Menu

A J Miles
The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.

Nav Bar - Vertical Menu

Notorious Design
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.

Nav Bar - Vertical Menu

Envira Media Inc
This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.

Nav Bar - Vertical Menu

Having a clean and well-structured website navigation is key in designing an effective user interface. Drop-down menus are great for sites that have multiple levels of content hierarchy. The typical design pattern of a drop-down menu is that when a user hovers over the parent navigation item, a submenu of navigation items appea.

In this collection are many different types of drop-down menus used in websites all over the web for your navigation design inspiration.

Here are some related collections regarding site navigation that you may also be interested in:

Carreras Con Futuro

This drop-down menu’s design embodies the hand-drawn theme of the website.

drop down menu

Converse

Converse has a grunge-styled drop-down menu that has a cloth-like texture with frizzy edges.

Navigation menu

Bern

This rough grunge style website has an edgy drop-down menu that complement the look-and-feel of the website’s general aesthetics.

dhtml menu

Ski Alpine

This drop-down menu highlights the attention to detail that the site designer has.

navigation bar

Noizi Kidz

This navigation is bright and shaped unconventionally.

menu maker

Famous Cookies

This drop-down navigation menu showcases the yummy cookies that the store makes available to its hungry patrons.

Boden

Each menu item has a different font and the drop-down menu is very clean.

web menu

Navigant Consulting

The colours used on this site work together like players of a football team.

menu builder

Fall For Tennessee

Fall for Tennessee has a horizontal drop-down menu that slides out to the right hand side. The menu items that have a drop-down submenu have a small arrow next to them to indicate that they can be expanded.

web menu maker

Mozilla

This is a simple yet sleek drop-down menu on the Mozilla.

drop-down menu

In this post I’d like to take a look at more than 5 stellar examples of navigation menus that positively impact the design of a website. The list includes a great deal of variety. Regardless of what you personally prefer, there should be some inspirational examples in here for you.

Soula

web menu

Africa Oasis Project

DHTML menuTisha Creative

navigation bar

Tennessee Vacation

menu creator

Timothy Sykes

menu maker

It is time to design new style for your website. With festival arrival, special day coming, website designers will work out new style to dress up the existing website. When web has been changed its style to new one, it is obviously outdated if navigation menu still keeps unchangeable.  For website that needs to transform frequently, you should solve the problem about how to build navigation menu to match with versatile website styles. To get perfect visual effect between website and navigation, you need to edit two elements in navigation menu, background image or color. Let’s see how Sothink DHTML Menu create navigation menu:

Step 1: Add Menu Items to scheme structure for navigation menu

Launch Sothink DHTML Menu, you can add menu item on the left panel. First, check one menu item; and then, choose the button to add the same-level menu items or sub-level menu items; final, click once to add one menu item, and click more add more.

navigation menu builderStep 2: Apply menu style from templates to navigation menu

After menu structure is done, you can edit the menu item, including text, link, and font. To quick Apply the menu style from template, you can choose “Template > Apply template to menu” command to apply template style to your navigation menu.

drop down menuStep 2: Publish navigation menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources for navigation menu.

navigation menu

Website menu has really important role in almost all websites, it makes website 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 menu can guide the users to the wanted page with one-click; and an attractive and eye-catching web menu can decorate the website better. To create a website menu, there are several techniques available, such as JavaScript, CSS, jQuery, Flash and Database. Let’s view the website menus made by various techniques:

Website menus made by jQuery

jQuery menu is a trend for website navigation, it is the easiest and best supported way to implement simple animation online.

  1. Create Vimeo-like top navigationWebsite Menu - jQuery Menu
  2. Menumatic mootoolsWebsite Menu - jQuery Menu
  3. jQuery website menu for navigation Website Menu - jQuery Menu

Website menus made by Flash

Flash website menu impresses the viewers because of the stunning animation and well cross-browser compatibility.

  1. Classic Flash menuWebsite Menu - Flash Menu
  2. Float Flash menuWebsite Menu - Flash Menu
  3. Crystal Flash menuWebsite Menu - Flash Menu

Database-driven website menu

This type of website menu is generated from database, such as ASP, PHP, JSP, ASP.NET, ColdFusion and more.

  1. Website menu generated by JSPWebsite Menu - Database Driven Menu
  2. Website menu generated by ColdFusionWebsite Menu - Database Driven Menu
  3. Website menu generated by VB.NETWebsite Menu - Database Driven Menu