Web Designer Blog

With Sothink DHTML Menu 9.5 release, 19 modern and fashionable menu templates are added to the program newly. Till now, Sothink DHTML Menu has provided over 100 free navigation menu templates. So, you will get more choices to pick up the suitable navigation menu to your website without starting from menu design.

Let’s check out excellent navigation menus:

1. Metallic navigation menu template

2. Skelecton navigation menu template

3. Tab navigation menu template

4. Flip navigation menu template

5. Scrolling navigation menu template

The above-mentioned templates are just small portion for built-in templates, all 100+ free templates are packaged in Sothink DHTML Menu; they are totally free for the registered users.

About Sothink DHTML Menu
Sothink DHTML Menu is powerful drop down menu builder; it includes 100+ templates & 30 styles, which enable you to create cross-browser menu, SE friendly menu and fast-loading menu in clicks. Seamlessly integrate with main-stream web editors; support database driven menus; fully customize menu style.

Main features of navigation menu builder:
* Full cross-browser compatibility.
* Seamlessly integrates with Dreamweaver, FrontPage, Expression Web and Adobe GoLive.
* Supports database driven navigation menu with ASP, PHP, JSP, ASP.NET, ColdFusion.
* Creates functional navigation menu, such as tab menu, highlight menu, scrolling menu, cross-frame menu, multi-level/multi-column menu, custom menu, floating menu, etc.
* Offers 100 + free templates, 30+ preset styles; and provides image library for menu design.
* Supports saving background color of preview window in authoring files.
* Publish wizard guides you to publish the drop down menu to website step by step.
* Customizes web menu properties, like font, icon, background, border, cursor, tool tip, etc.

Download Sothink DHTML Menu to view all 100+ free navigation menus. Apply your favorite menu now and light up your website instantly.

Sothink DHTML Menu releases its version 9.5 on August 31, 2010; in this version, 19 new templates are added to built-in templates. Till now, over 100 templates and 30 menu style are packaged in Sothink DHTML Menu; let’s check out another 10 new drop down menus after viewing the previous article:

Download Sothink DHTML Menu to view all 19 free navigation menus. Apply your favorite menu now and light up your website instantly.

Sothink DHTML Menu releases its version 9.5 on August 31, 2010; in this version, 19 new templates are added to built-in templates. Till now, over 100 templates and 30 menu style are packaged in Sothink DHTML Menu; let’s check out 9 new drop down menus:

These navigation bars are fashionable and useful, right? Keep on us to view other 10 new navigation menus.

Download Sothink DHTML Menu to apply them to your website right now.

We will create an adobe menu starting from built-in template from Sothink DHTML Menu, follow the steps to make the menu below:

• Launch the program, template windows open, and you can choose menu “Simple > Underline “.

• In Menu Tree, click the button to select all popup menus; enter the Tasks Panel, select the option “Popup Menu > Border”, and set border as 0 in property panel below; Unselect the top-level menu, enter the “Popup Menu > General” to set displaying as vertically; Enter the option “Popup Menu > Popup Direction”, change the popup menu direction.
  

• Still in Menu Tree, click the button to select all separators; right-click the selected separators to popup the context-menu, and choose “Delete” to delete all the separators.
• Choose the top-level menu items shown on website, and set their background color as website background color. Enter the option “Menu Item > Background”, and set bg color as website color for mouse out and mouse over.
  

• Choose 3-level menu items under the menu item “DHTML Software”, cut these menu items and paste them after “News” is selected, which makes them become 2-level menu items; move up & move down to adjust their position.
• Pick up “DHTML Software”, enter “Menu Item > font” to set the text as bold.
  
• Select “Sothink DHTML Menu”, enter “Menu Item > General” to modify the text and link.
  The basic steps to create adobe menu are over, you can download Sothink DHTML Menu to try building your ones, and attempt to find out more magic functions.

Sothink DHTML Menu provides many well-designed black menus in built-in templates, which you can apply them directly. Let’s view these black menus:

Silver Black

Silver black menu will change into blue when the mouse is over on menu item.

Board

Black menu is on the top, and popup menu uses the irregular background image.

List

The menu contains multi-column list popup menus.

With Sothink DHTML Menu, you just edit background setting for menu item or popup menu. You can set the background as black, or insert the black image as background in panel below:

If you want to set black for each menu item, enter the “Menu Iitem > Background” property panel.

If you want to set black for popup menu or the 1-level menu, enter the “Popup Menu > Background” property panel.

Simple enough? Download Sothink DHTML Menu to experience this process and create black menu from the built-in templates.

Generally speaking, some web developers and usability enthusiasts regard using drop down menus as the bad practice that makes them confusing, annoying and oftentimes dysfunctional. Nevertheless, as a designer part, drop-down menus are an excellent feature because they help clean up a busy layout.

Drop-down menus do in fact organize content into small and uncluttered elements, if structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

How to create a stunning and effective drop-down menu? Here are some tips and ways to make this controversial element more usable.

• Add a Hover Effect to Menu Options

As the navigation itself affects the usability of the drop-down menu, adding a hover effect to the menu options is good to make the menu work better with the drop-down menus. In this case, the user will be easily to find exactly which button in the navigation menu is extending from, and it is much helpful.

You can see the example below, which shows a strong hover effect on the navigation options, and it contributes to support the drop-down menu.

P.S. Such kind of drop-down menus can be easily created by Sothink DHTML Menu.

• Extend the Deactivation of a Hover

You had better avoid a hover structure and many levels in a drop-down menu, but it is restricted to the navigation you are trying to create, if so, just try your best to improve the usability of a hover and multi-level menu!
Please check the next drop-down menus, which have multiple levels with a wide focus range. It means that the user have to move the mouse pointer some distance away from the menu to close it.

If the user moves the pointer away from the menu, the drop-down menus will mostly disappear soon. So, please delay its disappearance or get a click function that requires users to click outside the menu area to close the drop-down menu like the Lightbox does.

• Keep off Multi Levels in a Drop-Down

It is unwise that one creates drop-down menus in terms of usability. For example, a hover menu structure will make the user lose focus on the menus once the user moves away from the mouse pointer.
The picture below shows the unpleasant hover menus. Apparently, it is hard to use because you have to start from the top whenever even slightly losing focus of the menu with the mouse pointer. To be worse, the tooltip there will hamper the navigation.

• Throw out Tooltips

Although it is certain that little details impact usability when you design drop-down menus, you’d better realize the presence or lack of tooltips, for the tooltips usually may get in the way and sometimes even block the first list item in the drop-down menu. So please remove tooltips from buttons with drop-down menus.
Take the website below for example, the drop-down menus take up a large part in the page, which let the tooltip block many listed items and make navigation much more difficult.

• Do Seamless Transitions

Many websites make such a mistake: in order to attract the more visitors, they make the websites look brilliant but with the heavy drop-down menus, which take more than an instant to load upon the hover. However, a good drop-down menu ought to appear seamlessly and without interruption once it appears, otherwise, it will be unpractical.
So transition effects are the better way to avoid it happens. It is cool that throw in a wipe down or fade in for the drop-down menu instead of the simply appearing menu, but please make sure the transition quick and not disruptive.
Observe the image below, you will find the drop-down menu is pretty clear with a seamless transitions.

Adobe is a well-known computer software company, it has historically focused upon the creation of multimedia and creativity software products. Though Adobe Systems Incorporated develops so many excellent software, services, resources, etc, you will find everything quickly with the help of Adobe menu, and won’t get lost on their website. How does Adobe menu navigation website effectively? Let’s take a look of snapshot from Adobe website:

Adobe Menu – Features:

In this Adobe menu, menu background and website background are the same, which makes you feel harmonious. At the first sight, just plain text links are on website, but you will see so many menu items after the mouse is over on the top adobe menu; in popup menu items, some items are classified into several categories by Bold and big-size font; the item with link guides the visitors to right web page with one click.

Tab menu is a space-saving and good-looking navigation bar on the website, which makes browsing easier for visitors. The tab menu divides the information into several sections and distributes them in simple text and nice image, the URL linked to destination description with image will guide the visitors to the web page that most interests them with single click. Tab menu is usually shown as horizontal drop down menu at the top of the page or bars along the side, which is specially used for the website of complicated structure and extensive contents.

Create Tab Menu

• Choose “File > New > Horizontal Menu” to create a horizontal menu.

• Enter “Global > Menu Type” and set the menu as “Tab Menu” in “Global – Menu Type” properties panel below.

• Set width for tab menu. Click “Global > General” and set width as “10%” in “Global – General” properties panel below.

• Set round-corner background for tab menu. Click “Menu Item > Background” and set round corner in “Menu Item – Background” properties panel below. You can click the button “Background Library” to apply the round corner background directly; also, you can click the button “Custom images” to customize the round-corner background.
Note: If installing Sothink DHTML Menu, you can get the background images at :/Program Files/SourceTec/Sothink DHTML Menu 9/images/Normal/

• Modify the text and link for menu item. Modify the text and link for your website. Click the text on menu panel, select the option “Menu Item > General”, and edit the text and link in property panel below.

• Add more menu items for this tab menu. Still in menu panel, select the “DHTML Menu” and click the left-side button “Insert Item After” to add menu items. The new items will inherit the properties of the menu item “DHTML Menu”.

That’s end, tab menu is finished. Download Sothink DHTML Menu to create your own one.

Tab Menu is a special drop down menu, which lists more menu items in the less space. This kind of tab menu is usually shown as horizontal DHTML menu, and its submenus list in below line. The sub menu items will be listed beneath it when moving mouse over a tab menu. The menu of round corner makes the navigation bar clear and good-looking. As a kind of widely-used JavaScript menus nowadays, it displays the sub-menu items vividly and gives the visitors deep impression.

Below websites include the excellent tab menus:

• http://www.listal.com/



• http://qrayg.com/



• http://www.box.net



• http://kurier.at/wirtschaft/

View tutorial to create tab menu >>

Dynamic menu can popup menu depending on user interaction, you can move the mouse over the top menu item to view sub menu, or you can click the menu item to popup sub menu item. If your website includes dynamic menu and Flash, which Flash is beneath the menu, maybe you need set dynamic menu or Flash to get your wanted effects. Generally speaking, there are three displaying ways between dynamic menu and Flash: dynamic menu show under Flash; dynamic menu show, but flash hide; dynamic menu display over Flash. Displaying dynamic menu and Flash at the same time is the ideal result, let’s learn it:

The dynamic menu shows over the Flash, you can see both clearly. Let’s learn it now:

1. keep dynamic menu in original status.
2. Set Flash in Dreamweaver. Choose Flash, and click the button “Parameters…” in properties panel; in the open dialog, input “wmode” in parameter column, and enter “opaque” in value column.

View visual tutorial to get it clearly >>