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.

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/

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.

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.

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

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/

Here are great navigation tips on how to make your website design user-friendly:

A clean website with a good navigation is always a plus. You can enhance the look of your website with graphics but make sure that you focus on your content and use a lot of white space. If you are to create links to a content site, you can use contrasting colors.

Do not clutter links. Make sure that you organize your links and they are all working.

Dead links can give an impression of sloppiness and haphazard work? If you have too many links, you can categorize them accordingly in drop down menus. You can also use flyouts links for your main categories.

Create a navigation system that is consistent and clean-cut. If you have your links on a drop down menu under one category, then you must have the same navigation with the rest of your site categories.

Your website design should accommodate a large number of links as you may have to add links in the future. As you add more pages to your site, then you need to add more space for additional links.

Categorize your website content in sections so you can gather up related links. You can use section home pages for certain categories or sections.

Your main links should be kept together.
This way, your visitors can know what your website covers at just one glance. The links to your site’s main sections should convey what your website is all about. If it is a business website- your main links should show what products or services you have to offer.? Links can be placed on navigations bars. They are often listed on the right side of the menu bar. You can also line them up neatly, just below your header.

In creating text links for your website, have it short and simple. The words should precise enough to know what that page would contain once clicked.

If you think a link is important to your reader or if you want them to go to a certain section in your site, you can make this link as a feature link of your site. You can have a different front color for this special link, boxed it up or have it in bold font.

Article source: http://business.ezinemark.com/

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.

If you wanna change the existing web menu to Window vista menu, there are two methods available to make it come true. Supposed that your DHTML menu as below, we can make it change into Windows Vista menu by applying preset style or setting the background image from image library with the help of Sothink DHTML Menu.

Change navigation menu to Windows Vista menu

Method 1: Applying preset style to DHTML menu:

1. Select all the top menu items in menu panel.

   

2. Check “Menu Item > Style” in tasks panel; and double click the vista style to apply this style to web menu in bottom property window.
   
3. Modify the background as “Transparent” for all menu item; set properties for each menu item, popup menu. The new Windows Vista menu is as follows.

   

Method 2: Setting the background image from image library

1. Select all the top menu items in menu panel.

   

2. Check “Menu Item > Background” in tasks panel; choose the proper background image from image library; set “bg color” as transparent.
   
3. Modify the background as “Transparent” for all menu item; set properties for each menu item, popup menu. The new menu is as follows.
   

Introduction:

In the above tree menu, you can see that the node “Overview” is highlighted by menu font and bold style. That is because, through the analysis of tree menu, the link URL of node “Overview” is the same with “index.htm” you are visiting.

Steps:

Click Global Settings > Highlight in Tasks panel and check “Auto highlight current node” option.
The highlighted node is the same as the selected node of mouse out state when the highlight function takes efect; the highlighted node is the same as selected node of mouse over state when the mouse moves over highlighted node.

DHTML tree menus are navigation menu used for large scale website. It also known as a links bar or link bar, which pulls down its nodes after mouse movement. It contains hypertext links on web page so as to navigate between the pages of a website, and quick link to the target page.

Why choose this DHTML menu maker?

• Cross-browser navigation menu works excellently on main-stream browsers on various platforms.
• Edit web menu directly in HTML editors as add-on, Dreamweaver, FrontPage included.
• Build SE friendly navigation menu by the useful tool.
• Publish wizard guides publishing the navigation bar, JavaScript menu to website step by step.
• Customizes element for web menu, like font, icon, background, color, border, cursor, effects, alignment, transparency, size, etc.
• Offers 50+ free menu templates and image library resources .
• Any HTML code can be used within the JavaScript menu item.

DHTML menu templates

Sothink Tree Menu offers excellent menu templates by usage, and one customized type in the template gallery. You can start web menu from template; create a blank menu and apply a template to it later; and create new templates and modify the existing ones.

How to make tree menus ?

Step 1: Create DHTML tree menus from built-in templates

Launch Sothink Tree 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: Edit nodes and replace the contents

Add or remove nodes for DHTML tree menus. The added nodes will auto-inherit the node’s properties. Replace the text and set the link for each menu item.

Step 3: Publish menu to website

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

How to use Search Engine Friendly Code Maker?

When you finish JS menu configuration, click “Tools > Search Engine Friendly Coder Maker” or click on the toolbar to open Search Engine Friendly Coder Maker Dialog. The generated codes are listed within the dialog. You can click the button “Copy All” to copy these codes and then paste them into the page through web editor. These codes should be placed behind the menu code within BODY tag.

The codes are like this after they are copied to the web page:

The JS menu codes are marked by green.
The generated codes by search engine friendly code maker are marked by red.

<body>
<script type=”text/javascript”>
<!–
stm_bm(["menu0e98",800,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,2,"default",
"hand",""],this);
stm_bp(“p0″,[0,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#E6EFF9","",3,1,1,"#000000"]);
stm_ai(“p0i0″,[0,"Menu Item 1","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#E6EFF9",0,"#FFD602",0,"","",3,3,1,1,
"#E6EFF9","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0]);
stm_aix(“p0i1″,”p0i0″,[0,"Menu Item 2"]);
stm_aix(“p0i2″,”p0i0″,[0,"Menu Item 3","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]);
stm_bpx(“p1″,”p0″,[1,4,0,0,2,3,0,0]);
stm_aix(“p1i0″,”p0i0″,[]);
stm_aix(“p1i1″,”p0i1″,[]);
stm_aix(“p1i2″,”p0i0″,[0,"Menu Item 3"]);
stm_ep();
stm_aix(“p0i3″,”p0i0″,[0,"Menu Item 4"]);
stm_aix(“p0i4″,”p0i0″,[0,"Menu Item 5"]);
stm_ep();
stm_em();
//–>
</script>
<noscript>
<ul>
<li>Unspecified</li>
<li><a title=”/index.htm” href=”/index.htm” target=”_self”> Home</a>|</li>
<li><a title=”/product.htm” href=”/product.htm” target=”_self”> Products </a></li>
<li> Showcase </li>
</ul>
</noscript>
</body>

Now, the remarkable JS menu is shown on your website; and SE friendly menu code is available to make your website indexed and crawled quickly by spider.

Steps:

1. Create an iframe page in Dreamweaver.
   Select the menu item, add the linked page and Enter the frame name in the target filed in Menu Item > General.
2. Set the icon for the menu item by type the image’ path in Menu Item Settings > Icon; set the background image in Menu Item > Background; and set the border in Menu Item > Border.
3. Set the global properties for the whole menu. Check the option “Auto highlight current item”; set text color, Bg colcor, border color, Bg image and icon as the highlighted items style; and check “Clear highlighted item’s link” and “Highlight parent menu item” for the menu in Global > Highlight.