Floating Sidebar Menu - Dreamweaver Tutorial
Discover how to download and install the Floating Sidebar Menu that you can see on the left side of your browser window. It can act as a supplemental navbar menu or you can house your social network icons inside of the floating menu. More information below. Here is the Link to Part 2
Create the delicious floating navbar menu which scrolls down the screen with a sophisticated easing effect. It is a floating sidebar menu which is in an html floating window. A JavaScript file hooks onto the sidebar html code and animates its movement along the vertical path of the browser window.
I use my floating menu to hold my social network icons that you can see on the left. It has floating buttons with rollover effects against a blue transparent background. The whole floating sidebar menu complete with the floating menu script, the css for the float menu and the social network icons are available for a free download with this Dreamweaver video tutorial. Simply click on the download icon just below the Dreamweaver tutorial video.
Whats included in the Floating sidebar menu Download?
Included in the free download to create a floating div, are a transparent blue striped background, 4 gray scale social network buttons and 4 color rollover buttons, a lorem ipsum text document for you to create a testing web page with, and most importantly the sidebar script which is the floating menu script that will help to animate the floating sidebar menu along the screen and provide clever easing effects to it too.
Once you have created the floating navbar, you can customize it however you want to. The background can be swapped out for one of your own designs as the floating menu is completely customizable.
If you know a little about JavaScript you can also make adjustments to the floating menu script like changing its starting position on the page, what side you want the floating menu to be on, and how fast the html floating window will travel along the screen.
The sidebar html code can be changed to a height or width of your choice or you can create a floating div of your own and apply the sidebar script to make it animate.
Apart from learning how to create a floating sidebar, you can also discover how to insert rollover buttons using Dreamweaver’s built in Ajax functionality.
Related Tutorials:
Floating Sidebar Menu - Dreamweaver article tutorial
jQuery Lavalamp Menu - Dreamweaver and jQuery article tutorial
jQuery Lavalamp Menu - Dreamweaver video tutorial
CSS Dropdown Menu - Dreamweaver video tutorial
CSS Drop Down Menu - Dreamweaver article tutorial