Floating Sidebar Menu - Dreamweaver Tutorial - 2 of 2

Host Unlimited Websites! http://bit.ly/hostgator-site Hostgator hosting, Unlimited disk space, unlimited bandwidth.

This is part 2 - Here is a link to part 1:

http://www.youtube.com/watch?v=wuTstiiz4fg

In this Dreamweaver Tutorial by James at http://www.dreamweavertutorial.co.uk We will insert a custom floating side bar menu which will hold our

social network icons in rollover links. We will create a floating div with a css float menu and the floating buttons will have rollover effects

attached to them. The floating navbar is very versitile and can be adapted to any web page design with a small amount of css and html knowledge.

There is a free download so you can get the social network images and custom background created by me. The side bar html code and css was also

created and designed by me. Here is the link to the FREE DOWNLOAD:


http://bit.ly/floating-menu


The floating menu is achieved using a floating menu script from J Tricks:

http://www.jtricks.com/javascript/navigation/floating.html

(feel free to go to his website and thank him or to make a donation)

The floating pop up menu will be programmed to appear and load into the head of your web page as well as pre loading all of the images. I have

tested the float div at my website and it is not slowing down the web page load time.

My Website:

http://www.dreamweavertutorial.co.uk

Follow me on Twitter:

http://www.twitter.com/dreamweaverman


My RSS Feed:

http://www.dreamweavertutorial.co.uk/feed.xml

Category:

Howto & Style

Tags:

• create a floating div
• css float menu
• floating bars
• floating buttons
• floating menu
• floating menu script
• floating navbar
• floating pop up
• html floating window
• sidebar html code
• sidebar script
• cs3
• adobe
• photoshop
• tutorial

[Zoske1]

with CSS3 is WAAAY easier!

[DreamWeaverTutorial]

@Zoske1 place the code below if it is so easy.

[GeeBi]

If I want it position on the right instead how do I do that? I tried changing left to right, but doesn't work.

[DreamWeaverTutorial]

@GeeBi Hi GeeBi, go into the sidebar.js file and you will see a targetX and targetY. change the targetX to -60 and that will put it on the right.

[lauArg1]

ummm this video is great, but why not just use #floatdiv {position:fixed;} ??

it would be much easier I think, but then again i am just a beginner..

please don't take this in a wrong way; i am just a curious kitty :P

[DreamWeaverTutorial]

@lauArg1 because this animates. you cant animate with position:fixed on its own.

[Zoske1]

@DreamWeaverTutorial is easier, but it's a lot more code. basically you just give a static proprety to the body and you make a transition in the CSS proprety: height; and set the timing as ease. too long proces maybe..

[McGrawTV]

I cant get it to scroll down with everything? Where could I have messed up?

[sureshrp1962]

As usual great tutorial. Please start an episode of joining form with log in session.

Thank you

[DreamWeaverTutorial]

@scottstobbe hi, it works in IE8. the only browser where there might be an issue is IE6 because of alpha transparency. You should check back on your code - James