Create a clever sticky, floating navigation

[Graycode]

Hi,

I have been given the task to revamp/redesign a clients blog. I want to implement a navigation menu like www.mechanicaldummy.com. I like the fact that it sticks to the top of the page. The closest tute I managed to find was this http://www.jtricks.com/javascript/navigation/floating.html

Similar but not the same. I know I would be using CSS but what other language would I be using to create that 'stuck' effect and could anyone give me a knowledgable heads up on how to do this?

Thanks in advance.

Gray

[almostbob]

just css
absolute positioning of the div that contains the menu, and >0 z-index to allow other content to slide under
a background set with the little triangle for the active choice
all in css

its a pisspoor implentation using javascript addons that are not neccessary, parts of the menu slide offscreen when the page pans

the google search should be css menu

[Louilly]

I agree it's not the best solution but if that's the way you want to go you would need to give the surrounding div (in their case #header) a position of fixed and as the above post states a higher z-index. I believe the following css is what creates the sticking effect:

#header {
position: fixed;
z-index: 200;
}

[Louilly]

Also, have a look at the footer navigation on this page, it does the same thing but with no loss of the menu (or sliding) when the page pans

[matricol]

#header {
position: fixed;
z-index: 200;
}
also with right:0 or bottom :0 wherever you like it to be