Web Designer Blog

Google always come up with some design or layout changes to improve Search Experience. This time, the navigation bar present on the top of homepage and search result page is redesigned and the bar will show your name instead of the email ID. The redesigned navigation bar is having the same navigation links like Web, Images, Videos, Maps, News, Shopping, Gmail and More on left side, but the right side of the bar is changed. Earlier the right side of the bar was showing iGoogle, Search Settings and Sign In links, but now only Sign In and a settings icon is there.

Note: Redesigned navigation bar is available on Google.com only.

You can sign in using Google account by clicking on the “Sign In” link. The settings icon will show you options like “Search Settings, iGoogle and Privacy” without signed in. Once you will sign in with Google account, your name will appear on the right side of the bar and email ID will be visible only after clicking on the name. You can browse the list of subscribed services from “Settings Icon ==> Account Settings” which is available in the right most of the bar.

The redesigned bar is giving Google homepage and SERP much cleaner and improved look. What is your opinion on that? Share your thoughts on the new redesigned navigation bar of Google.

Website menu has really important role in almost all websites, it makes webiste navigation easier and saves space to display the more contents. Besides, the modern website menu has the features of usability and appearance. A clear and usable website menu can guide the users to the wanted page with one-click; and an attractive and eye-catching website menu can decorate the website better. To create a website menu, the several techniques are available, such as JavaScript, CSS, jQuery, Flash and Database. Let’s view the website menu styles made by various techniques:

Website menu styles made by JavaScript

Website menu styles made by CSS

From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

navigation bar

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.

JavaScript tree menu will be the best guide for website of a complicated directory structure. You can see such navigation tree menus on many large-scale websites, such as shopping and knowledge website. This type of tree menu has the features of clear navigation, unlimited level of tree menu, smart recording function and SE-friendly; that is the reason why tree menu becomes popular.

Now, you have decided to insert menu tree into webpage to navigate your website. Next, let’s think about how to make tree menu quickly? Create a navigation bar by CSS or HTML code? No, Sothink Tree Menu will be the ideal tree menu builder to create JavaScript tree menu because there is no coding and professional skills needed.

Build the professional menu tree as below in 3 steps:

Step 1: Start tree menu from free built-in templates.

Launch Sothink Tree Menu, choose “Business > Flip” from Startup window.

Step 2: Set properties for each menu items

• Choose menu item in Tree panel;

  

• Enter Tasks panel to choose required items;

  

• Set properties for the selected menu item in properties panel, such as text content modification, link, and item size.

  

Step 3: Publish menu tree to webpage

• Check “Publish” button on the toolbar to publish your tree menu.

  

• Choose right publish method to insert web menu to webpage step by step.

  

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 »

While waiting our SEO series to come out, I showcased for you pretty huge and comprehensive navigation menu and button tutorial article. All of those tutorials are selected carefully just featuring here, the most high quality ones.

Navigation is very important aspect in every web-design, because it is usually the place where people will click the most as well as notice creative and usable buttons. Really all we need is to get visitor remember our site! To complete and sharpen you need to use menu builder here, actually version doesn’t matter, I am sure everything can be completed in menu builders!

Let’s get started and learn how to create shiny, clean, stylish, glossy or even 3D navigation menus! Hope you will enjoy this article!

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.