Web Designer Blog

White menu refers to drop down menu which adopts white as the main color to navigate your website. As we known, white is the feasible color to match with all kinds of color, it can create wonderful visual matchable effect with other colors. Similarly, white menus are also wild navigation menu to decorate most websites of different colors. Besides color, white menus can be built in horizontal level, vertical level, tab menu, round-corner menu and multi-column. Next, let’s appreciate changable menu styles:

White menu – horizontal menu with black website

White menu – round corner menu with blue website

White menu – vertical menu with green website

White menu – tab menu with yellow website

White menu – multi-column menu with purple website

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks.

So, with all of that in mind, take a look at these 5 excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

Veer9
These tabs have beautiful styling. Notice the use of different colors and a drop shadow for separation purposes.

Wire & Twine11
This is some excellent texture use with a clean layout.

Komodo12
A good example of tabs used in a module.

Inkd13
Good styling and usable because of size and separation.

Kinder-Aktuell15
Good gradient use and separation.

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

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

Sothink DHTML Menu can create the various drop down menus, JavaScript menus, navigation

bars amd web menus without coding.  With this drop down menu builder, you can create the  diverse menu styles, such as horizontal menu, vertical menu, etc. Next, I will show you the excellent JavScript menus made by Sothin DHTML Menu:

Drop Down Menu Samples – Tab Menu

JavaScript Menu Samples – Multi-level & Multi-column

Navigation Bar Samples – Clone of some famous menus

JavaScript Menu Samples – Database Driven & Special Effect

Come to our menu samples to view more well-design menus.

Many menu samples have been saved to built-in template; download Sothink DHTML Menu to create your own menu.

Tab menu usually has the crystal appearance and clean design, which makes the website designer love to use it in their web pages. To more important, tab menu can display more menu items in the limited space, save much more room to present the various contents for surfers.

Tab menus are the one type of drop down menus. This kind of tab navigation bar is usually shown as horizontal web menu, and its submenus list in below line. The tab menu of round corner makes the navigation bar clear and good-looking.

Let view the tab menu samples:

Here is the tutorial about making tab menu in Sothink DHTML Menu:

Hurry up, download Sothink DHTML Menu to create tab menu. Hope you like this tab menu.