Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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.

floating side bar menu download files

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



blog comments powered by Disqus


Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials