Web Designer Blog

Site root is very important step in navigation menu creation, if setting site root wrongly, maybe you will meet problems below:

• Navigation menu works well locally, but it won’t be shown on internet;
• Navigation menu is inserted many pages saved in different directories, the menu maybe not show correctly on all web pages.

In order to avoid these problems, you need to set resource folder to save js and images to the defined folder, which makes sure the navigation menu can be shown on every page locally and Internet.

What’s Site Root?

Site Root is the root directory of your remote web server on your local driver.

How to set Site Root?

Very important: Make sure the folder structure is the same between your local computer and remote server.

If
your web site is http://www.sitename.com/subfolder/,
your web pages are stored to D:\foldername\sitename.com\subfolder on local computer

While
http://www.sitename.com/ is the root of your web site,
it corresponds to D:\foldername\sitename.com on your local computer.
So you should set D:\foldername\sitename.com as Site Root.

From the example above mention, we know that Site Root refers to the corresponding local folder to the root of your web site. Thus, no matter what your web site address is, you should first find the root of your site, which must be like this http://www.sitename.com, and then set its corresponding local folder as Site Root.

Generally, we will save js and image files to different folders:
If
You save js files to D:\foldername\sitename.com\js
And save image files to D:\foldername\sitename.com\images
So you should set \js and \images as Resource Folder.

The figure like this:

How to set Web Path?

If the web address on your test local server is http:///www.testserver.com/subfolder, but the web address on your remote server is http://www.sitename.com, that is, your test local server and your remote server do not have the same directory to store your files, the Site Root can only work in one server, not both.

if,
your files are stored at D:\foldername\yourwebsite\subfolder on local computer,
for test server, Site Root corresponds to D:\foldername\yourwebsite locally,
while for remote server, Site Root corresponds to D:\foldername\yourwebsite\subfolder locally.

To solve the problem, you can set Web Path instead of Site Root, like
JavaScript Path: http://www.sitename.com/js/
Images Path: http://www.sitename.com/images/

The figure like this:

Then be sure to upload all the resource files to the relevant folders on your remote server, and your menu could be previewed not only on the test local server, but also the remote server.

Publishing navigation menu is the process which inserts your pre-designed menu to web pages, which makes it become web menu and shows on website. Basically, you need do two jobs when publishing menu:
• Insert two pieces of menu code to the corresponding HTML tag;
• Copy the resource files (image and js files) to the related directories.

You can preview navigation menu in web page locally when two jobs are done; after uploading all the files to web server, the navigation menu will be shown on Internet.
Sothink DHTML Menu introduces three methods to publish navigation menu based on menu applied range, and we will recommend the best menu publishing method for you. Let’s view these methods:

Publish JS… (Sign with red, recommend to publish menu to many web pages)

Benefits:

Generally, web designer will apply one menu to almost all web pages, which makes the website seem uniform. Using this method, you just update one js file to modify menus on the all pages, which wastes no time to change menu code page by page; comparison to other two methods, the HTML code of web page will be reduced greatly, which is better to speed up page display.

Steps:

1. Check “Publish JS…” option and open “Publish JS” window.
2. Set directory to save the generated js file.
3. Click “Copy All” button to copy first menu code, and insert these code to Head tag of HTML page; once again to copy and paste the second menu code to Body tag of HTML page.
4. Select “Copy the resource files” option to copy JavaScript and image files, and paste them to the defined folder automatically.
5. Click “OK” to quit the window and finish the settings.

Note: The menu code like “file:///E|/dmenu2010” is set on “Global > Resource Folder”. To make navigation menu show correctly on web pages which are in different directories, you should set resource folder for navigation menu.

Publish… (Sign with yellow, recommend to publish menu to few pages)

Benefits:

Few pages need to be inserted navigation menu, you can use this method to publish menu. Without opening HTML pages, Sothink DHTML Menu enables you to copy and paste the menu code to Head and Body tag of HTML page directly, and the resource files which are included in this menu will be copied to the defined folder automatically.

Steps:

1. Check “Publish…” option and open “Publish” window.
2. Choose page directory where the menu will be inserted. The HTML code of this page will be listed in field below.
3. Put the cursor in proper position where the menu will be inserted, and click “Insert Code” button to insert Head and Body code automatically.
4. Select “Copy the resource files” option to copy JavaScript and image files, and paste them to the defined folder automatically.
5. Click “OK” to quit the window and finish the settings.

Note: The menu code like “file:///E|/dmenu2010” is set on “Global > Resource Folder”. To make navigation menu show correctly on web pages which are in different directories, you should set resource folder for navigation menu. If you haven’t set resource folder, the resource files will be copied to the folder where the web page is saved.

View/Copy Code… (Sign with blue, publish menu manually)

Benefits:

If being familiar with menu code, you can use this method to publish menu. No need to re-generate menu code by program, you can manually modify the menu property, change resource folder, or update text and link for each item directly in HTML code.

Steps:

1. Check “View/Copy Code…” option and open “View/Copy Code” window.
2. Click “Copy All” button to copy the first menu code, and insert these code to Head tag of HTML page; once again to copy and paste the second menu code to Body tag of HTML page.
3. Select “Copy the resource files” option to copy JavaScript and image files, and paste them to the defined folder automatically.
4. Click “OK” to quit the window.

Note: The menu code like “file:///E|/dmenu2010” is set on “Global > Resource Folder”. To make navigation menu show correctly on web pages which are in different directories, you should set resource folder for navigation menu.

Depending on the menu page quantity and menu code skill you master, you can choose the suitable method from above-mentioned publishing methods to publish your menu. Download Sothink DHTML Menu to publish navigation menu to web page by yourself.

Navigation bar provides an easy and interesting way to navigate between the site’s main sections on your site for visitors. A navigation bar often extends along the top or side of a Web page and includes text, images, or animations, displayed as buttons that link to other sections or pages in the site.

Besides its function, navigation menu design is very important for your website; your web menu should match with website style. Below, we will show you 5 excellent navigation bars:

1. Red & black drop down menu

2. Link chain JavaScript menu

3. Arch DHTML menu

4. Bullet drop-down menu

5. Battery web menu

These well-designed navigation bars are packaged in Sothink DHTML Menu, you can apply them to your website freely as long as you are the registered users.

For web designers, they would like to layout each element in website precisely. As an important element, navigation menu needs to be placed in the proper situation on the website. But how to place navigation bar on special location, how to make it align to other elements? Next, I will show you the ways to position navigation menu:

Position Menu in Web Page by Layer

http://www.sothink.com/tutorials/position-menu-in-web-page-by-layer-properly.htm

Position Menu in Web Page by Table

http://www.sothink.com/tutorials/position-menu-in-web-page-by-table-properly.htm

You can download Sothink DHTML Menu to try position javaScript menu on the webpage.

Having set up a website, then you need a navigation menu that can be link to every page on the website. Build a drop down menu manually or generate a menu automatically? Obviously, generating menu automatically is a simple way to reach your needs.

Note: It would be better to use absolute link path in your page.

View visual tutorial to generate a navigation menu

Download Sothink DHTML Menu to build a web menu for the existing website.

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.

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.

Navigation menu is the vital element for website, it not only draws the outline of website structure and gives the visitors some sense of orientation though the site; but also spotlights your web design; even navigation menu is SE friendly to promote your website ranking. Navigation menu has been developed for years, its style and functions are not limited in image and text anymore, the navigation menus are various in future trend. Let’s share the popular navigation menus on web design:

• Tab menu to show more in less space
  
• Creative menu for individual website
  
• Mac style of navigation bar
  
• Navigation menu of multi-column/multi-level
  
• Vertical menu to navigate the website
  
• Stunning icon of JavaScript menu
  

They are great DHTML menu, right? Come here to enjoy more web menus.
Download drop down menu builder to design your own menu.