Floating Menu Sidebar Tutorial - Dreamweaver
Floating menus can be used for many different purposes. I use my floating html menu to house my social networking icons and a link to my contact form. The floating menu can be used to deliver a message to your web visitors or it can be a supplemental side navigation bar for when a visitor arrives at the end of a long article. You can see the floating menu that I use on this web page. It’s over on your left with a blue fuzzy border around it.
It’s a floating menu inside of an absolutely positioned div tag and it hovers down the page when a user scrolls down along the web pages content. It has an easing affect applied to the html floating menu using JavaScript. The floating menu also has rollover behaviours attached to the links. Why dont you rollover the floating menu on your left to see for yourself?
Now you can discover how to make a floating div menu and there is even a free download so you can create the same floating menu that’s on this website. If you want, you can change out the background graphics and adjust it however you want to make it suit your website design as it’s fully customizable. The script for the Floating menu was obtained from JTricks.com so special thanks to them.
If you prefer, you can watch a Dreamweaver video tutorial showing you how to install the Floating Menu
1. Create the Html for the Floating Menu
A div is created called ‘floatdiv’ and is our all encompassing div. All of the rest of the html code for the floating menu will be inside of this div tag. The ‘floatdiv’ is also the div tag that we shall apply our JavaScript menu script to and will ultimately give the hover menu its animated effect.
Another div is created inside of the main ‘floatdiv’ called ‘sidebar’ and this contains the div tags for all of the social network icons we are going to insert later.
You can copy and paste this html into your web document before your wrapper div or content div while still making sure it is inside of the body tags:
<div id="floatdiv">
<div id="sidebar">
<div id="rss"></div>
<div id="youtube"></div>
<div id="twitter"></div>
<div id="contact"></div>
</div> <!-- end sidebar -->
</div> <!-- end floatdiv -->
<!-- Script Hook -->
<script type="text/javascript" src="scripts/sidebar.js"></script>
You should take notice of the line of code for the JavaScript at the bottom of the html code. It is the link to the JavaScript file and this file will take the absolute floating menu and allow it to animate like a hover menu down the side of the browser window. It has a location specified to a folder called scripts and you should make sure that the scripts folder is in the main root of your websites directory unless you know how to link the script from another location.
2. Add the CSS for the Floating Menu
A style sheet needs to be created and these styles are then copied and pasted into the style sheet. Or if you prefer you can add the style directly into the web page document. The ‘floatdiv' is set to a position of absolute and positioned at 0 left and 0 top which will place it at the top left of all browser windows. A height and width is defined too.
Into the sidebar div, the blue background image has been inserted. The sidebar div is positioned relative and all of the divs inside of it will be positioned ‘absolute.’ and placed according to their image sizes. A ‘margin-left’ of minus ten pixels (-10px) has been set which will nudge the background image inside of the sidebar div to be flush with the browser window.
#floatdiv {
position:absolute;
width:94px;
height:229px;
left:0px;
top:0px;
}
/********** Side Bar Styles ********/
#sidebar {
background-image:url(../images/blue-background.png);
background-repeat:no-repeat;
position:relative;
height:229px;
width:94px;
margin-left:-10px;
}
#sidebar #rss {
height:48px;
width:48px;
position:absolute;
top:20px;
left:21px;
}
#sidebar #youtube {
height:44px;
width:52px;
position:absolute;
top:70px;
left:21px;
}
#sidebar #twitter {
position:absolute;
height:53px;
width:53px;
top:110px;
left:20px;
}
#sidebar #contact {
position:absolute;
height:42px;
width:43px;
top:160px;
left:25px;
}
3. Insert Rollover Images
You may not have an RSS feed or a You Tube channel. So If you have your own icons then you can install those instead. You may just want to put a message in the floating menu or some link text in which case you are alrealy finished. For those of you who still want to install the icons, carry on!
Place your cursor inside of the RSS div tag as you will need to insert the rollover images and links into the floating sidebar hovering menu. Go to:
Insert > Image Objects > Rollover Image:
Now you will need to browse for the RSS feed icons to insert for the floating div rollover effects. The original Image will be the image which is on show before the rollover hover effect so insert the ‘rss-back’ image first, and then browse for the image it will rollover to which is called ‘rss-front.’
Make sure you tick the ‘preload rollover image’ option otherwise there will be a loading delay when your web visitor hovers over the hover menu icons. Set some alternative text for accessibility and also set the hyperlink so that when an icon is clicked upon, it will take your web visitor to the destination URL.
After you have finished and click OK, Dreamweaver will add the necessary JavaScript behaviours to allow the hover effects for the floating div menu.
Now repeat the above steps to insert the rest of the rollover images into their corresponding div tags.
Test your new Floating HTML Menu !
Your floating menu is now ready for testing so make sure the page you have installed it on has enough content for the page to be able to scroll in a browser window otherwise your hovering floating menu will just sit there like a stone.
Good Luck installing the html floating menu, please leave feedback in the comments box below and let me know how you found the tutorial. - James.
Share this Dreamweaver Article:
Related Tutorials:
Floating Sidebar Menu - Dreamweaver Video Tutorial
