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.

Mozilla Firefox

Oracle

Apple

Roxio

Real Mac Software

gOSSkype

Loop Insight

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

  

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.
   

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.

Nav bar generally comes in one of two orientations: vertical and horizontal. Horizontal nav bar displays items side by side; vertical nav bar stacks items on top of each other. Next, we will enjoy 15 nav bar styles of horizontal and vertical to give your more inspiration.

Horizontal nav bar with rounded corners

LemonStand
LemonStand’s primary navigation features rounded dark-gray buttons with a slight gradient.

gugafit
gugafit’s navigation buttons change to green on hover. The active item is given a dark-blue pressed look.

PeepNote
PeepNote has beige rounded buttons, with the active menu item in blue. It also uses the CSS 3 text-shadow property to add drop-shadows in most modern Web browsers.

Modern web menu

This DHTML menu is clean and popular, which is widely used for many industry. The web menu made by Sothink DHTML Menu presents us the silver and rectangle shape of menu item.

Crystal JavaScript menu
This crystal menu delivers the sense of modern, fashion and elegance. Round rectangle design gives you more imaginations – button.

Horizontal nav bar with icon

Carsonified
Carsonified uses icons to indicate the active menu item; and upon hovering over an inactive menu item, its icon is revealed.

MobileMySite.com
The company behind this website specializes in creating mobile versions of websites, so the designer made the navigation look similar to the iPhone’s UI41, making it seem familiar to first-time visitors.

RedVelvetart.com
This website features hand-drawn elements, and the navigation menu continues that theme with hand-drawn and -sketched icons above the text.

Dot JavaScript menu
Sothink DHTML Menu creates this classic red & black nav bar, the red dots work as separator to divide the menu items. When moving the mouse over the menu item, you will see the popup menu shown in line, and white dots divide the 2-level menu item.

Image DHTML menu
The image works as icon, the top icon and the bottom text together explain the usage for this menu item. Just see the image, you will know where the menu item will link to.

Vertical nav bar with various styles

Mellasat Vineyard
Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.

Utah.travel
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.

A J Miles
The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.

Notorious Design
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.

Envira Media Inc
This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.

Step 1: Add Menu Items to scheme structure for navigation menu

Launch Sothink DHTML Menu, you can add menu item on the left panel. First, check one menu item; and then, choose the button to add the same-level menu items or sub-level menu items; final, click once to add one menu item, and click more add more.

Step 2: Apply menu style from templates to navigation menu

After menu structure is done, you can edit the menu item, including text, link, and font. To quick Apply the menu style from template, you can choose “Template > Apply template to menu” command to apply template style to your navigation menu.

Step 2: Publish navigation 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 for navigation menu.