Web Designer Blog

The drop down menu has somehow over the years become quite a complicated design element.  This is mostly due to the controversy surrounding its use.  In the opinion of some designers, these menus are simply not worth it.  They’re complicated and clumsy for the user and thus don’t live up to high usability standards.  Because the goal of most designers is to create the best user-friendly experience possible, drop-down menus end up tossed aside in favor of less frustrating options.

However, when done correctly, drop-down menus can be a workable way to organize cluttered layouts and can give a site a decent amount of flexibility and charm.  The key is to follow a few practices well-known for effectiveness and style.

In this post, we’ll explore these drop-down menus best practices and hopefully diminish some of the controversy surrounding this viable design element.

Two-Tiered Frustration

Perhaps the number one source of complaint concerning drop-down menus is the frustration that often results from using two-tiered menus. The main complaint is that they’re extremely difficult to navigate because of the fundamental complexity of the design.

When the user sets out to select an option, he must pinpoint exactly the right area on the menu or risk clicking an unwanted menu item.  After only a few unsuccessful attempts users usually get so frustrated that they simply give up on the site altogether.  The best advice is to avoid the two-tiered structure whenever possible.

Wait to Deactivate

This practice addresses the issue in hover drop-downs where the menu disappears the minute a user removes the arrow from the menu panel.  At that point, the user must start the menu’s search process all over again by hovering over the menu once more.

Designing around this involves coding allowing users to keep the menu open with a hover and to deactivate it with a click on some other part of the screen.  See, for example, the site below.
Read on »

A well-designed and well-executed navigation menu can have more impact on user’s appreciation of a site than any other single piece of the design. In this post,  we will take a look at more than 5 stellar examples of JavaScript 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 here for you.

SEO is a hot topic for website design all the time, since the majority of website traffics come from search engine instead of visual attractiveness. Every element in website design should take SEO into consideration. As for navigation bar, website designers usually choose SE friendly DHTML menu to get crawled easily by spider.

DHTML menu can be search friendly to search engine spiders by three ways:

• Generate the SE friendly code and insert it to webpage
• Make XML sitemap and submit it to main-stream Search Engine
• Generate sitemap to help navigate site and make it to be  indexed

As drop down menu builder, Sothink DHTML menu not only enables to create the attractive web menu, but also provides the useful tools to make navigation menus SE friendly. Let’s check out these SEO tools:

1. Search Engine Friendly Code Maker
   Pro: This tool enables to generate special codes which are readable for web crawlers; and these SE friendly codes can enhance the presence and visibility of a website on search engine listings. The maker will behave like sitemap if JavaScript is forbidden in the browser, which the menu is shown in text link.
   Usage: After publishing the menu into page, you can check button in the program to open dialog, and click “Copy All” button to copy these codes, and paste them behind the menu code between tag within webpage.
   Button:
   
   Dialog:
   
2. Google XML Sitemap
   Pro: This tool can generate XML sitemap, which is special for Google search engine. This XML sitemap makes good use of the search engine spiders’ time by make the engines index pages from your site efficiently; and provides the opportunity to make search engines know priority, update time and change frequency.
   Usage: Finishing the menu configuration, you can check button in the program to open dialog; input your website link and check the related options to set sitemap; click “Save XML” button to save XML sitemap to defined path. At last, submit this XML sitemap to Google.
   Button:
   
   Dialog:
   
3. Generate Sitemap
   Pro: Sitemap allows search engine crawlers index the website easily; it enables to make SE find all the pages. Even some internal links, sitemap still improves PrageRank or link popularity to all pages it links. Also sitemap helps with usability and site navigation based on existing menu structure used in website.
   Usage: Completing the menu creation, you can check button in the program to open dialog; choose theme, at
   tach CSS and check the related options to set sitemap page; click “Save…” button to save HTML page to defined path.
   Button:
   
   Dialog:
   

The eye-catching and attractive menu is vital element on website. The navigation menu is usually the area in site which gets the most traffic. To judge the web menu is good one, you can analyse it by three aspect: great interaction with mouse event; wonderful menu style and matchable with website; clear navigation and easy operation. Here lists five JavaScript menus, let’s check out these excellents DHTML menus:

Font setting is a part of web menu design. Though font setting is minor element in navigation menu, have you ever think it enables to affect on menu style greatly? It is Unbelievable? Let’s view JavaScript menu samples to prove it

View and download Sothink DHTML Menu to create you menu with special font face.

Tree Menu can be controlled fully on webpage by interaction with mouse event. Click the text or image on page, you will see the tree menu expanding or collapsing its sub-menu. View the tree menu sample below to experience it:

How to create JavaScript tree menu like this?

Steps to control the expanding or collapsing of the menu-tree in above sample:

1. Create an HTML page, and insert the tree menu into it.

2. Select the “Root” in the Tree panel, and then get the codes for expanding or collapsing the sub-tree from Global Settings > Advanced.

3.Insert the images and that refers expanding or collapsing the sub-tree. Then copy the codes which expand or collapse sub-tree and paste them to the web page as follows.

Four pieces of codes are inserted in this sample:

For expanding image:

<img src=”0609_f.gif” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;“>

For expanding text:

<a href=”#” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;“>expand all</a>

For collapsing image:

<img src=”0609_uf.gif” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;“>

For collapsing text:

<a href=”#” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;“>collapse all</a>

Note: Please input the above red codes manually, and make sure the function works well. The codes “return false” must be added into the <a></a> tag when the function “onclick” is called; if not, it causes the page refreshing in IE and Opera 9+ on Mac. And the codes can be copied from Tree Menu program except for the above-mentioned two parts.

Ok, click the image or text to experience.

When you surf the website, there are so many linked pages that needs to view, maybe tired or no enough time, you must close the tree menu page when finishing the partial nodes, and continue to fulfill the rest next time.

Still remember the last node that you clicked in previous time? Most of us maybe forget it, but the tree menu can impress that node and prompt the viewers. Now please re-open the tree menu page, there is node with white background in the tree menu. That is the last node you viewed in the previous time, you can continue the rest from here.

Check this tree menu samples to get it:

How to let the tree menu remember the state and recall for next time?

It is simple to get this function. Please check the option “Record the tree menu status and recall for next time” in Global Settings > Advanced. Just one click, your viewer can browse the pages with ease.

Download tree menu to create such a navigation menu.

For web designers, they always look forward to get visual appealing and better usability. It is not difficult to design attractive navigation bars and layout the wonderful website. Just adding a little creative, you can make website appealing and get better user experience.

Let’s share 5 creative navigation bars:

Basically, web menu is generated for website navigation. But, many website designers own so amazing creative , which makes navigation menus become wonderful website element to perfect website design.

Let’s check out six navigation bars to get inspiration:

–There are four ways to insert one DHTML menu into many pages.
First One:
If you have FrontPage, you can use the shared borders or include page function to do so. Please check work with shared borders.
Second One:
If you have Expression Web, you can use DWT (dynamic web template) to do so. Please check work with dynamic web template.
Third One:
If you use Dreamweaver, you can use the Library function to do so.
Please check work with library in Dreamweaver.
Fourth One (recommend):
Use the program alone to create a separate js include file. (Suggest you to use absolute path in links); and then insert the js file into the web page. Please check “Insert a Menu by Including Separate JS File“.