Web Designer Blog

Main Navigation Types & Usability
Main navigation, also known as global navigation (if the navigation is always present on each page) is a crucial element for web site or web-based application usability. There are many variations of main navigation systems, however for the vast majority of existing web sites or web-based applications* there are four primary types:

• Horizontal Menu
• Vertical Menu
• Inverted
• Mega Footer

Which main navigation system is used depends on several variables, including;

• Information architecture of the site
• Screen size or typical location of use of the web site
• User needs including any special accessibility issues

The screen size issue is a very important consideration now that more and more users rely on mobile devices to find and access content and functionality.  With mobile screen size being extremely limited vs. typical displays in homes or offices, It is important to consider which type of main navigation will work best for each environment.
The main navigation type chosen will have a direct and significant impact on the usability of a web site, and because of this great care should be taken before deciding on a navigation type. From a usability standpoint, there are multiple benefits and challenges for each primary type of navigation.
Main Navigation– Horizontal Menu
Horizontal menus have links placed across the page, well, horizontally. This has a tendency to work well for Western cultures, in which reading from left to right, top to bottom is the norm. Horizontal menus align with Western users’s expectations for important content being at the top of a page.

First level horizontal menu items Subject 1, Subject 2, Subject 3
Typically horizontal menu bars are located at the top of the page, but there are several notable exceptions to this rule, including the home page of Blogger.com, which has the main navigation at the bottom of the page.

Blogger.com home page horizontal main navigation is located at the bottom of the page.

This article is from usefulusability.com

If the window is full screen, positioning the menu in the center is easy; if not, you can see the samples, which keeps the menu in the center.

http://www.sothink.com/product/dhtmlmenu/store/floatcenter/floatingcenter.htm

The sample can be remained with users as scrolling the page. The location of menu always lies in the center according to the page size. This is a special alignment pattern of floating menu.

Steps:

• Click Global > Menu Type, select Float in Menu Type.
• Choose the first menu item, and click Condition in Menu Item.
• Enter the responding code below into the Prefix in Condition.
  Center Horizontally
  _STNS._aStMenus[_STNS._aStMenus.length-1].iX=”Math.max(stgcl()+parseInt(_STNS.fiGetCW()/2-_STNS.fiGetEleWid(_STNS.fdmGetEleById(_STNS._aStMenus[_STNS._aStMenus.length-1].aPopups[0].sUid))/2),0)”;
• If you want to set menu alignment as Center Vertically:
  _STNS._aStMenus[_STNS._aStMenus.length-1].iY=”Math.max(stgct()+parseInt(_STNS.fiGetCH()/2-_STNS.fiGetEleHei(_STNS.fdmGetEleById(_STNS._aStMenus[_STNS._aStMenus.length-1].aPopups[0].sUid))/2),0)”

Javascript provides the web page developer with an excellent and powerful programming tool – which is, of course, why it forms the core of that current hot Internet technique: Ajax (Asynchronous Javascript and XML). However, Javascript can be of benefit to any web site – especially when it comes to manipulating objects on a web page: objects such a menus.

The Basics of a Javascript Menu

In order to create a menu the web site developer needs to make use of two Javascript methods:

• · onmouseover – this is triggered when the mouse pointer is placed over an object
• · onmouseout – triggered when the mouse pointer is moved away from an object

The web site developer also needs to make use of the web page’s object’s style, and in particular the object’s:

• background-color
• display
• left
• position
• top
• width
• z-index

Read on »

Sothink DHTML Menu is popular navigation menu tool, so many users used it to create the wanted JavaScript menus for their website. One of Our warm hearted users has layouted the section for DHTML Menu, and solve the problem in creating DHTML Menu.

Unofficial Resources Site for Sothink DHTML Menu

In this website, the user writed many tutorials to share his experinces on navigation bar creation. If you are newbie on making web menu, you will get the useful tips from here. View some advanced tutorials:

Targeting an iFrame from a menu

Opening Links In A New Customized Window

Anchoring a menu in a table cell

Step1. Follow the visual tutorial.

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
%>
*/

Read on »

If you have published the menu in the method “Publish JS”

You can also set resource folder for js and image files manually and you should keep two points in mind:

1. The parameters marked green can be modified.

2. The setting folders marked red must be identical in stmenu.js file.

<script type=”text/javascript” id=”sothink_dhtmlmenu”> <!–
st_siteroot=”file:///E|/DHTML%20Menu“;
st_jspath=”/javascript/stmenu.js”;
if(!window.location.href.indexOf(“file:”) && st_jspath.charAt(0)==”/”)
document.write(‘<script type=”text/javascript” src=”‘+st_siteroot+st_jspath+'”><\/script>’);
else
document.write(‘<script type=”text/javascript” src=”‘+st_jspath+'”><\/script>’);
//–> </script>
<script type=”text/javascript”>
<!–
stm_bm([“menu0e98″,800,”/images“,”blank.gif”,0,””,””,0,0,250,0,1000,1,0,0,””,””,0,0,1,2,”default”,”hand”,”file:///E|/DHTML%20Menu“],this);

The problem happened when you chose “Every visit to the page” in settings of internet temporary files of the Internet Option. In this case, when you move mouse over the menu item, the browser will check the new version of the page and reload it as well as the images. In fact, the default setting there should be “Automatically” rather than “Every visit to the page”. Thus, the problem will not exist.

This feature is designed for CGI (ASP, PHP, JSP, Perl, etc.) programmers who want to create dynamic tree menus. Otherwise please keep this option checked (the default setting).

When you choose “Encode special characters” option, the program will encode some special HTML characters or symbols:

Read on »

Float Menu is a web menu used for site navigation, which locates in a fixed position on the webpage. This float menu enables to scroll along scroll bar, and always keep visible no matter how long your page is and how viewers change the window size. Generally, web menu is done by HTML, CSS and jQuery; but it is a difficulty to create such a float menu for web design newbies or if you face urgent design task while time is limited. Maybe, using DHTML menu builder is an easy way for all of us to build float menu in minutes.

Sothink DHTML Menu is an ultimate drop down menu builder; it can build JavaScript menus with simple steps. Besides float menu, DHTML Menu enables to create lots of functional menus, like scroll menu, highlight menu, multi-column menu, and disable items and separators and non-English menu. Now, let’s create float menu in the program:

View float menu sample, and it stays visible even if you scroll down a web page. They’re animated, so they move up and down as you scroll the browser window up or down.

Steps:

1.    Start DHTML menu from Built-in Template.

2.    Set menu type as Float to create Float menu

• Check “Global > Menu Type” in Tasks panel, and enter the property panel on the bottom. Input name for this menu and check “Float” option here.
  
• Check “Global > General” in Tasks panel, and enter the property panel on the bottom. Input value as coordinate to float menu on web page. Now preview menu, you will see the menu placed in a fixed position.
  
• Still in this panel, check two “Auto-scroll” options to make float  menu scroll along scroll bar.
  

Creating float menu is so easy in DHTML menu builder. To build more functional menus, download Sothink DHTML Menu to make them in minutes.

Get a brand-new attractive JavaScript menu from other navigation bars just in steps! Believe it or not, DHTML menu builder can work with various authoring files to create stylish drop down menu based on the existing menu contents and menu structure:

• Copy & paste the related menu items in one or two DHTML Menu windows to reset menu sequence;
• Import menu items from Sothink Tree Menu to get the same menu structure and contents tree menu;

To make your menu creation effectively; you can use one of above-mentioned methods. To make your web menu special, you can apply HTML code or image in DHTML menu as menu item.

Now, let’s view which elements can be use as menu item:

Use HTML code as menu item
Check the “HTML” option in “Menu Item > General” property panel after selecting the menu item in Menu Panel; input HTML code in it to use as menu item
Use image as menu item
Pick up the menu item in Menu Panel, and check the “image” option in “Menu Item > General”; and then re-enter “Menu Item > Image” property panel, click “Image Library” or “Folder” button to browse and choose image file, or type image file’s path, the image menu item will appear in the preview window.

Besides general text, DHTML menu builder provides more options to generate menu items. They enrich contents for web  menu, which gives us a wonderful journey to build navigation bar.

View more DHTML  menu samples >>
Download and try Sothink DHTML Menu >>