Web Designer Blog

The navigation menu is the most important element for a website, either in appearance and usability. The web menu designers are trying their best to make the menu more appealing and functional for the visitors easily find what they want. A bad navigation menu will make the visitors feel lost in the site. Here I collect some creative website navigation menus for you to find some inspirations of making your own.

Creative Flu

Read on »

Creating rounded corner in web design absolutely not a new thing, but with the presence of CSS3 in popular browser like Firefox, Chrome, Safari, and Opera, now is easier for us to creating rounded corner, sometimes I remember before when I need to add an image in each corner of the box, what a frustrating. Untill these day many websites still using it as a main navigation style, even in the corporate website, and some of more simple websites their menu style inspired by apple.

Mozilla Firefox

Oracle

Apple

Roxio

Real Mac Software

gOSSkype

Loop Insight

Pop up menu is visible and placed on the top for majority websites. For some websites, the web designers want to navigate the website by DHTML menu, but there is no space to place menu, context menu type is the best choice to show menu and it can be shown anywhere just by right-clicking.
Step 1: Create pop up menu from built-in templates

Launch Sothink DHTML Menu, “Startup” window opens, you can start menu from built-in templates or new blank. First, click the name from built-in templates to select the menu; and then, preview menu style in preview window of Startup; last, click “OK” to start menu creation.

Step 2: Choose menu type for the chosen menu

In tasks panel, click “Menu Type” option on the Global panel; and enter the “Global > Menu Type” to set the menu as “Context menu”.

Step 3: Publish menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources.

White menu refers to drop down menu which adopts white as the main color to navigate 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 menu. Next, let’s appreciate changeable menu styles:

White menu – horizontal menu

• Special menu designed by Jason Reed Web

• Gotmilk Flash menu

• Web menu designed by Jeremy Levine

• Maxandlous.com unusual menu

• JavaScript menu with handwring style

• Web menu with button style

  

• DHTML Menu for Jayme Blackmon

• Alex Buga menu

• Water’s Edge Media web menu

• Ronnypries.de navigation menu

• Pipe DHTML menu

White menu – round corner menu

• Round style menu with mouse over

• Silver round corner menu

White menu – tab menu

• Silver tab menu

• Vertical tab menu

• Fubiz slidebar

• Great FreelanceSwitch menu

White menu – multi-column menu

• Barack Obama menu

• “Speaking” navigation menu

• Multi-column menu navigation

White menu – vertical menu

• lace web menu

• Cobahair.co.uk uses only BIG typography…

• jBunti Hover-effect Menu

• Icon vertical menu

• nBloom menu with animation
  
• Checkout list-style menu

• Ruby Tuesday slidebar menu

• Alexandru Cohaniuc Navigation

• Web menu – handwriting style

• web menu of Porsche Canada

  

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

For website, navigation tree menu maybe keep the same menu link and menu text for long time.  Is it tedious? No, web designer won’t make it come true. The experienced designers can apply diverse styles to make tree menu attractive and stunning.  Almost all elements in tree menu can be customized, and become the spotlight to beautify the website.

The tree menu will present a new look even a tiny element is modified, which brings exciting to website. With Sothink Tree Menu, the beginners can customize the styles in intuitive interface with ease; it provides image library of various types to design menu tree style; and the outside files can be imported to tree menu to form your own style.

Let’s compare some tree menus, and view the magic about tree menu style:

1. Set size to get another tree menu, which is completely different menu tree.
   (Enter “Global Settings > General” to set width and height for the whole tree menu)
   
2. Set properties for tree menu and its items to build a totally different web menu, these properties include background, color, font, etc.
   (Select node in  Tree panel, and enter  “Node Settings > Font” or “Node Settings  > Background” panel to set their properties.)
   
3. Add graphics to customize button, line, arrow and cursor images.
   (Select node or sub-tree; enter the related option in “Global Settings” panel to set image properties.)

   

4. Disable some nodes in tree menu, which needs to be changed from time to time.
   (Check the selected nodes, and enter   “Node Settings > Advanced” to set this function)

   

5. Tree menu expands its sub-tree with dynamic and visual effect after mouse interacts with menu tree, which gives the visitors deep impression. The program presets the various effects for showing or hiding sub-tree respectively, effect speed can be set too.

View more tree menu samples to get inspiration; download tree menu builder to DIY your tree menu with customizable menu style.

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

A well-designed and well-executed navigation menu can have more impact on user’s appreciation of a site than any other single piece of the design. In this post,  we will take a look at more than 5 stellar examples of JavaScript menus that positively impact the design of a website. The list includes a great deal of variety. Regardless of what you personally prefer, there should be some inspirational examples here for you.