One of the most essential part of website is Navigation Menu, Navigation Menu guides visitors how to navigate, explore and interact with the other parts (web pages) of particular website, a navigation menu should be simple and easy to understand, should not conflict the mind of visitors.

SkyTechGeek explored numerous design sites and collected 21 beautiful high quality PSD files, so that users don’t need to explore hundred of Google Pages to find out an appropriate PSD file for their design, Designers and Web developers can use them in their upcoming projects and can give their websites stunning and beautiful look.

1. Simple Navigation Menu

Read on »

Google recently updated its all product with new design and also navigation menu in the top of the header. Most of the developers and me too likes google’s new nav menu and want to install this menu style to my blog. The simple code to add Google style navigation menu to header for blogspot user.

For Blogspot users:

1. Sign in to blogger.com

2. Go to design and Edit HTML (Note: Download template xml file with download full template)

3. Find  ]]></b:skin> and paste below code to above it. Read on »

When people are surfing the web they will get very impatient when they cannot find what they want quickly. Navigating the web has to make sense to the surfer and right away, so if the web design is done with this in mind, the layout of an effective website will have similarities to all the others.

You need to use standard conventional links like buttons underlining the text and changing the color. It is not such a good idea to use clever names for the links. Simple is good. Keep in mind the type of people who are going to visit your website and have it designed to suit them.

The elements of navigation are very important so whether you are trying to inform a person about a service or product, or trying to sell them this service or product, the web design for your links can be the important factor to consider. Read on »

Website navigation is our common communication system between all other web pages. Interlinking through unique identifiers (URLs) has worked for decades. If anything navigation links have been with the basics of web design since the early days. Through advancements in digital arts and design we have seen new practices bubbling up everywhere.

Accessibility has turned into a major concern for Internet browsers. With more users on their mobile phones and tablet devices it’s important to develop a navigation around common themes. Below are some themes repeated in modern designs for good, clear website navigation. Read on »

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, like in the example below. 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 (thanks, Allen).
So, with all of that in mind, take a look at these 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.

City of Grace
A good example of tabs that work nice colors into a usable layout.

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Magpie
Doesn’t get much more simple than this, but still a good example.

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

Inkd
Good styling and usable because of size and separation.

For all of us who deal with long web pages and need to scroll to the top for the menu,

here’s a nice alternative: floating menus that move as you scroll a page. This is done

using HTML, CSS and jQuery, and it’s fully W3C-compliant.

View floating menu samples here

This tutorial covers how to create a “floating menu” using HTML, CSS, and jQuery. To

reiterate, a floating menu stays visible even if you scroll down a web page. They’re

animated, so they move up and down as you scroll the browser window up or down. I am

going to show you how to make a floating menu using jQuery and CSS, and hopefully make

some new jQuery disciples 😀 .

Before we continue to the coding steps, have a look at the two screen snaps below. The

first shows a web page with a floating menu at top right. Of course, you can’t tell it’s

floating until you see it live and actually scroll the page. So look at the second

snapshot, and you can see that the menu has moved.

Figure 1

Figure 2

Step 1

Let’s start with the HTML markup for a nice menu consisting of three sub-menus:
view plaincopy to clipboardprint?

<div id=”floatMenu”>
<ul>
<li><a href=”#” onclick=”return false;”> Home </a></li>
</ul>

<ul>
<li><a href=”#” onclick=”return false;”> Table of content </a></li>
<li><a href=”#” onclick=”return false;”> Exam </a></li>
<li><a href=”#” onclick=”return false;”> Wiki </a></li>
</ul>

<ul>
<li><a href=”#” onclick=”return false;”> Technical support </a></li>
</ul>
</div>

This is the basic markup we will use. The main part in this bit of HTML is the <div id=”

floatMenu”>…</div> in Line 01, which encapsulates the whole menu. The three lists are

only used to demonstrate structure, which can be modified to suit your needs. In this

case, there are three sections to the menu, as represented by three unordered HTML

lists.

As a matter of habit, I disable the click on dummy links (href=”#”). Just to be sure

that a click on a dummy link doesn’t send the page back to the top, there is also an

onclick=”return false;” in <a href>. This method allows to add menu item features such

as lightboxing – something that requires the page to stay at its current vertical

position when the user clicks on a menu link.

Step 2

Now we need some CSS rules to skin and position the menu. (I used Eric A. Meyer’s CSS

Reset, so that’s why there is no margin:0 or padding:0 on the ul element):
view plaincopy to clipboardprint?

body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px “Lucida Grande”, “Lucida Sans”, “Trebuchet MS”, verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}

The body height (Line 03, above) has been set only to get enough room for our menu to

scroll up and down with the page. This should be removed in a real case scenario. The

two other things to take note of are the position:absolute (Line 08) and the left:50%

(Line 10), both in the #floatMenu CSS rule (Line 07), above.

The “position” attribute is used when you need to remove an element from the flow of the

document and keep it at a precise place in your page. If you use the text zoom function

of your browser, an element with absolute positioning will not move, even if the text

around it increases in size.

The “left” attribute is used to position the specific div element horizontally. The

value needs to be defined as a percentage in the case that we want a centered design.

With a 50% value, the left side of the container is positioned in the middle of the

page. To position it left or right we need to use the “margin-left” attribute (Line 11),

with a negative value for an offset to the left and a positive one for an offset to the

right.

The others elements in the above stylesheet rules customize the visual design.

Step 3

Now we have a menu of three sections positioned in the upper right hand side of the

page. To enhance the menu item roll-over effect, let’s add style classes menu1, menu2

and menu 3 to each menu section, respectively (to each <ul> element). We will have 3

distinct sub-menus using our 3 <ul> tags. The code below is a modification of the HTML

code shown in Step 1 above:
view plaincopy to clipboardprint?

<div id=”floatMenu”>
<ul>

</ul>

<ul>

</ul>

<ul>

</ul>
</div>

Now let’s define some CSS hover-based roll-over effects, which will be different for

each menu section.
view plaincopy to clipboardprint?

#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Now each menu section will display a different color when the mouse hovers over a menu

item. If you like, you can also add rules for other menu link states using :link,

:visited, :hover and :active pseudo classes. The order in which you should write them

can be easily memorized like this: LoVe and HAte, where the capitalized letters

represents the first letter of each state.

Step 4

We’ve got a nice looking menu and could stop here, but we do want that floating menu, so

it’s time to add some jQuery. You’ll need to download the jQuery library and the

Dimensions plugin. This plugin will be used to grab information about the browser’s

window (width, height, scroll, etc.). You can link to both bits of jQuery code from your

HTML file in the <head>…</head> section. Just remember to change the URL path according

to where on your server you place the jQuery library and plugin files.
view plaincopy to clipboardprint?

<script language=”javascript” src=”jquery.js”></script>
<script language=”javascript” src=”jquery.dimensions.js”></script>

We’ll need some custom jQuery code as well, so start a new <script> section, also within

the <head>…</head> section of your HTML document:
view plaincopy to clipboardprint?

<script language=”javascript”>
.
</script>

Add the following jQuery code inside the the <script> section:
view plaincopy to clipboardprint?

$(document).ready(function(){
// code will go here
});

The $(document).ready() function is similar to the window.onLoad but improved. With the

window.onLoad function, the browser has to wait until the whole page (DOM and display)

is loaded. With the $(document).ready() function, the browser only waits until the DOM

is loaded, which means jQuery can start manipulating elements sooner.

Step 5

We need a listener for the “scroll page” window event. Our custom jQuery script now

looks like this:
view plaincopy to clipboardprint?

$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});

A listener is an event handler waiting on standby for a particular window event to

happen – in this a page scroll up or down.

Step 6

Since our menu will “float” as the page is scrolled, we need to track its initial

position. Instead of hard-coding that into the jQuery, we’ll read it’s position using

the Dimensions jQuery plugin, then use the retrieved value. We will do the same with the

name of our menu. Let’s add two variable definitions (Lines 01, 02) so that our code now

looks like this:
view plaincopy to clipboardprint?

var name = “#floatMenu”;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(“top”).substring(0,$(name).css(“top”).indexOf

(“px”)))
$(window).scroll(function () {
// code will go here
});
});

Lines 01 and 02 define variables “name” and “menuYloc”. Line 05 sets the value of

“menuYloc”. The “name” variable will be used to reference our floating menu. The

“menuYloc” variable will contain the original vertical position of our menu.

Let’s look at how the value of menuYloc is set in Line 05. This statement is an example

of jQuery’s powerful function-chaining. First we read the “top” attribute value from the

CSS rules of our menu element (which is “150px”, set in Step 2). Then we strip off the “

px” string at the end, since we only need the “150? part. To do this, the jQuery function

call .css(“top”) first finds the value of the top attribute for the menu. (This

attribute was set in Line 09 of the code in Step 2, above.) That results in retrieving

the value “150px”. Then the .indexOf() function finds where the “px” in “150px” starts,

and the .substring() function ensures we save everything before the “px”. The .parseInt

() function turns the string “150? into an numeric integer value.

Step 7

We now arrived at the fun part of this tutorial: animating the menu to make it “float”.

To do this, we need to determine how far the page has scrolled in pixel dimension. We

have the original menu location stored in variable “menuYloc”. We need the offset of the

scroll bar, which we can get from the command $(document).scrollTop(), defined in the

Dimensions jQuery plugin. After grabbing the offset we can add the animate command.

Lines 07 and 08, below, show the new code:
view plaincopy to clipboardprint?

var name = “#floatMenu”;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(“top”).substring(0,$(name).css(“top”).indexOf

(“px”)))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+”px”;
$(name).animate({top:offset},{duration:500,queue:false});
});
});

The variable “offset”, in Line 07 above, contains the difference between the original

location of the menu (menuYloc) and the scroll value ($(document).scrollTop()), in pixel

measurement. To make it work as a CSS rule, we add the necessary measurement unit, “px”,

after the numeric value. Now we can apply the vertical offset, as calculated, to

position the menu and thus making it move.

To make it all look nicer, let’s make use of jQuery’s animation options. We’ve stored

the menu name in the variable “name” and can recall it when needed, to use it along with

the .animate() function. The animate function requires two parameters: (1) the style

properties, and the (2) animation options. In this tutorial, we just need to animate the

“top” CSS property, but to specify additional parameters, separate each property:value

pair with a comma (,).

We’re using two parameters here. The “duration” is the length of the animation
in milliseconds, and the “queue” is a list of all positions we want our object to be

animated to. Since we only want to animate our object to its final location (the browser

’s current scroll location), we set “queue” to false.

We should now have a functioning floating menu.

Successful, eye-catching and mainly user-friendly site navigation sometimes is key to whole web design, because users usually search for navigation at first, when they visit website. Also don’t shy to experiment – portfolio websites can stand out just by that, creating something beautiful and unusual. In our days there are times when whole websites slide over your eyes, possibilities are pretty limitless. Keeping in mind such parameters, I created a list with 10 innovative, beautiful, creative and eye-catching navigation menus for your inspiration in web development process.

  1. Panic – Coda
  2. Popular menu already, you may know about this one before.

  3. Helmy-Bern
  4. Excellent example of well implemented grunge website and JavaScript navigation

  5. SkiAlpine
  6. Simple yet well designed navigation dropdown menu.

  7. TapTapTap
  8. Exceptional navigation, you gonna love this one.

  9. TheHoleInOurGospel

  10. Apple
  11. Whole website is one big beauty and MAC section has interesting sliding menu.

  12. Creasenso
  13. Beautiful rollover effects in navigation.

  14. Branded07

  15. Aperfolio

  16. AteBits

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

drop down menuOracle

dhtml menuApple

web menuRoxio

drop down menuReal Mac Software

web menugOSweb menuSkype

dhtml menuLoop Insight

menu builder

google navigation bar

Google’s new cross-site navigation bar, which began rolling out, is actually a new measure to improve your surfing privacy, and not the ‘Google +1? social layer that we’ve been anticipating.

Basically, the bar elucidates the three ‘states’ in which you can use Google’s services. First this is ‘Unidentified,’ which is where Google only knows your IP address, tracks you with a cookie, but doesn’t know your name; then there’s ‘Psuedonymous,’ which is how most of us currently use Google — and finally there’s ‘Identified,’ which is where your real life identity is assured.

Interestingly, Google also answers a question we’ve always wondered about: when you’re logged out, you are effectively anonymous — even if your IP address matches one of your Google accounts, your surfing habits are still kept separate.

The navigation bar, then, is simply a way of making sure you always know just how private (or public) your actions are. It’s worth noting that the nav bar might still become a part of the upcoming ‘+1? social layer — but for the time being, we can only guess at how they might be combined.

Article from: http://my-very-cool-gadgets.com/

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

navigation menu

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

navigation menuAttribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

dhtml menu

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Article Scource: http://www.smashingmagazine.com/