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.

The tree menu has guide line to show the node’s hierarchy by default. If you dislike these guide lines showing in the tree menu, you can uncheck the option to delete them. Please click Global Seetings > Line on the tasks panel, and property panel in the bottom pops up, you will see the option “Show lines” checked. The tree menu is deleted the guide lines in the preview window immediately by unchecking this option.

–To get rid of the border of the main menu, please choose in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of the sub menu, please first select the menu item which has the sub menu in Menu Tree panel, choose “Popup Menu > Border” in tasks panel, and set the Border Width as “0”.
To get rid of the border of each menu item, please first select the menu item in Menu Tree panel, choose “Menu Item > Border” in tasks panel, and set the Border Width as “0”.

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.

Popup menu is widely used for web navigation, it can popup its sub-menu upon user interactions, such as moving the mouse over the menu item, or clicking the menu item to display more link items. Popup menu is designed as the hierarchy style; you will see only the top-level menu item on website if no mouse behavior involved.

The popup menu is like this:

Popup menu has the features of slim body and large volume. You can add unlimited sub menu items under the top menu. The popup menu is specially applied to the website design of compact structure and multifarious contents. It not only classifies the web pages clearly for website, but also switches to the destination page in one click. Popup menu can be vertical or horizontal style, which is pretty good decoration element for website design.

At present, many well-known companies use popup menu as navigation bar to navigate their website, such as Microsoft, Adobe, Amazon, etc. But, how can I create popup menu of my own? Be patient, I will show you the steps to create popup menu with Sothink DHTML Menu.

Sothink DHTML Menu enables you to create popup menu for compact website. With the built-in templates and rich preset styles, you can create SE friendly popup menu in clicks. Fully customize popup menu to match with web design. Freely integrate with web editors to build popup menus.

Download Sothink DHTML Menu >>

Follow me to start a popup menu now:

1. Start Popup Menu with Built-in Templates

Launch Sothink DHTML Menu. Template windows open and you can choose popup menu “Simple > Classic Silver”.

2. Add the sub menu items for this popup menu

Select the menu item which needs add sub menu items below, and click the button “Append Sub Menu Item” in the menu panel to add sub menu items.

3. Modify the text and link for popup menu

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.

4. Set resource folder to make popup menu work well in Intranet or Internet

Set resource folder to save JS and image files to the specific directory, which makes the popup menu display correctly. Enter the “Global > Resource Folder” to set them.

5. Publish popup menu and make it display on web page

Publish the resource files, menu code or JavaScript menu code to the specific folder; and insert two pieces of code to the tag “head” and “body” within web page.

Check the button “Publish” on the toolbar and choose the option “View/Copy Code…”; the dialog opens, follow the tips to copy and paste the codes to web page; and check the option “Copy the resource files” to copy resource to the defined folder.

Finish the above steps, you can preview menu locally; and upload all the resource files to web server to view popup menu on Internet.