Web Designer Blog

Black menu symbolizes fashion, business, reliance, which is widely used for the various website, such as commerce, government and education. Black menu is easy to match with website color which ranges from light to dark, the classic color scheme includes black & white, red & black and black & blue. Black menu is plain and high capacity to contain almost all URL links to reach the target page quickly.

How to Create Black Menu?

With Sothink DHTML Menu, you can choose the proper one from 2 methods to get your wanted black menu.

We will take this menu for example to learn setting black menu:

Method One: Insert image of black background as background for the whole menu.

The black menu created by this method will be like this:

1. Check “Top-Level-Menu” in the menu panel, and enter “Popup menu > Background” to choose black image as background for the whole menu.

   

2. Check all menu items, and enter “Menu Item > Background” to set background color as “Transparent”.

   

Method Two: Set black background image or background color to every menu item

The black menu created by this method will be like this:

1. Check all menu items, and enter “Menu Item > Background” to set background color as “black” or insert black image as background image.

   

2. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0; and check menu items and enter “Menu Item > Border” to set border as 0.

Tab menu has the features of space-saving and eye-catching, which is the popular web menu applied to website navigation. Generally, tab menu is 2-level navigation menu, it displays main menu as tabs, and sub-menu will be shown vertically in below line when the mouse is over the main menu. Tab menu usually uses round corner as background, which makes the web menu appealing and pleasing.

How to Create a Tab Menu?

Tab Menu is a standard compliant 2 level tab menu. With Sothink DHTML menu, you can create a tab menu in steps:

1. Create menu includes sub-menu.2. Enter Global > Menu Type in Tasks panel and select the option “Tab menu”. The menu is switch to a menu with 2 levels.

3. Enter Global > General in Tasks panel, choose “Mouse over” as the method to select the item. So you can move you mouse over one of the sub items to select it.

4. Check “Top-Level-Menu” and enter “Menu Item > Border” to set border as 0; check the popup menu and enter “Popup Menu > Border” to set border as 0 and delete the arrow from “Popup Menu > Arrow”.

5. Select all menu items, enter “Menu Item > Background” to pick up the background image from image library.

6. Set “Transparent” for all menu items, popup menu and the whole menu in “Popup Menu > Background” and “Menu Item > Background”.

At present, website designers can complete the various navigation menus by different technologies, like CSS menu, JavaScript Menu, Flash menu, HTML menu and jQuery menu. Then, which is the popular way to create navigation bar? The website guru prefers to design web menu by JS and CSS code; but for majority of us, we’d like to make navigation menu by professional menu creator. Here lists three reasons why choose menu creator:

We will take Sothink DHTML Menu for example to explain advantages about menu creator.

WYSWYG Menu Creator Makes Menu Creation Simple

1. Get a clear menu structure from menu panel; and freely adjust the position for menu item by clicking.
2. Preview JavaScript menu in real time with menu creator.
   
3. Choose menu properties and customize the corresponding menu style in menu creator.

Finish Functional Menus in Easy Way

1. Set menu type as Float to float menu in fixed position on webpage.
2. Edit highlight settings for highlight menu to show where the user is on the web site.
3. Make long menu items scroll and keep their scrolling in a fixed depth.

Quick Start Menu from Rich Resources

1. Start web menu from the various free menu templates.
2. Apply preset menu style to the menu item.
3. Apply resources from image library to design menu in less time.

The above-mentioned features are only in menu creator; download Sothink DHTML Menu to get more features which other technologies are unable to achieve.

The initial vertical position of a floating menu is often lower on the page than it needs to be when the page is scrolled. On this site, for example, the initial “Y” coordinate is 140 pixels below the top of the page in order to leave room for the page header. However, as the page is scrolled, the menu would look funny if it were a third of the way down the page, so, when the page is scrolled, the menu is only 10 pixels below the top of the page.

Here is how to change the initial “Y” coordinate from 140 pixels to 10 pixels when the page is scrolled:

1. Select the first menu item in the Menu Tree (the item just below <Top-level Menu>) and select Condition under Menu Item Settings.

2. Enter the following code in the Prefix window:

var myitem=

3. Enter the following code in the Suffix window:

myitem.oParMenu.iY=”Math.max(140,stgct()+10)”

In the code you enter in the Suffix window, be sure to change “140” to the initial Y coordinate of your floating menu.

The tutorial is from the warm-hearted DHTML Menu users

In order to create a DHTML Menu with a transparent background, there are three places where the background must be set to transparent:

1) Select (highlight) <Top-level Menu> in the menu tree, go to Popup Menu – Background, and check Transparent.

2) Select (highlight) all menu items (Edit > Select > All Items), go to Menu Item – Background, and check Transparent for both Mouse out and Mouse over.

3) With all menu items still selected, go to Popup Menu – Background, and check Transparent.

Here is a sample menu with a transparent background:

This is not a tutorial site. Sothink has an an extensive DHTML Menu Tutorial Center with tutorials on getting started and more advanced subjects. Also, the DHTML Menu program has a Help section. The suggestions we offer here are based on our use of DHTML menu They work for us, and they might work for you, too. Before we start with the step-by-step instructions, here are three recommendations that we feel are important:
•    Use DHTML menu as a standalone program. If you use Adobe GoLive, Dreamweaver, Expression Web, or FrontPage you may be tempted to integrate DHTML menu with your Web authoring software using one of the plug-ins supplied with DHTML menu. Do not succumb to the temptation; if you do, you are making more work for yourself and asking for trouble.
•    Do not include menu code in your pages. Always generate a JavaScript include file. There are many advantages to having your menu in an external JavaScript file, but perhaps the most important advantage is that you only have to edit and upload a single file whenever your menu changes.

Read on »

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)”

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 »

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

The simplest, the best. So does the drop down menu. We find some classic navigation bar currently, which they are so simple to navigate the website, and many web designers would like to apply such that JavaScript menu to their webiste, let’s view them: