/    Sign up×
Community /Pin to ProfileBookmark

How would I go about making my navigation bar fixed, like the one found on this site: [URL=http://www.w3.org/Style/]http://www.w3.org/Style/[/URL] ?

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@BonRougeMay 09.2006 — You can make a vertical menu a bit like this... http://css.maxdesign.com.au/listamatic/vertical13.htm

Then space the list items apart with margins and give them a background colour.

Make an image like this: http://www.w3.org/Style/sandydogsear.png and position it in the bottom right of each list item.

Then make an image like this:http://www.w3.org/Style/dogsear.png and put it in the bottom right of the list. Give the list a height and some left padding. Make sure you make the backgrounds of the ul and the li's the appropriate colours.

I hope this helps.

Oh, and please read this for future reference: http://www.webdeveloper.com/forum/showthread.php?t=68822
Copy linkTweet thisAlerts:
@SugaSuga42authorMay 09.2006 — Thanks.

Then how do I make the menu fixed on the page?
Copy linkTweet thisAlerts:
@WebJoelMay 10.2006 — [CODE] div.name { position: fixed }[/CODE]

And the DIV whose class="name" would be 'fixed' to whatever position coordinates you instruct it (none shown in example).

This doesn't work effectively in all browsers and is a bit jumpy at best, when you do get it to work.

There is a longer way to acheive this so that it works in non-IE, a bit too long to post here (and it's not my work, but would share it via e-mail if you want it).

Useful for positioning a navigation list to the left-side of the page and having it stay in the same spot even if the visitor scrolls the page... it this what you're looking for?
Copy linkTweet thisAlerts:
@BonRougeMay 10.2006 — 
This doesn't work effectively in all browsers and is a bit jumpy at best, when you do get it to work.

There is a longer way to acheive this so that it works in non-IE, a bit too long to post here.[/QUOTE]


'position:fixed;' works fine in good browsers. It's not jumpy at all. It doesn't work in IE6 because IE's a bit crap. It will work in IE7 though. You can fix it for IE with javascript, but that tends to be jumpy. There are other ways to do it too that involve hiding scrollbars and such. Here's an example... http://bonrouge.com/test/fixed.htm
×

Success!

Help @SugaSuga42 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...