Floating HTML Menu Using jQuery and CSS

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.

 

Step 1

 

Let’s start with the HTML markup for a nice menu consisting of three sub-menus:

 

This is the basic markup we will use. The main part in this bit of HTML is the

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 . 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):

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

Leave a comment