sidebar menu that adjusts its position

T

tench

Registered
i have noticed on several websites a type of sidebar menu that adjusts its position as you scroll down the page so that it is always the same distance from the top of the page -- but it's position is not fixed...

i am not very good at explaining what it is, but here's an example:

http://www.xumbrus.com/mla_NN4.htm

now i wonder how this can be achieved -- and especially, if it could be done with css only? is there a tutorial out there somewhere for this type of menu?

all best,
tench
 
With CSS you'd use the 'fixed' position property on the DIV for the menu.

http://homepage.mac.com/mdnky/examples/fixed.html

The example below would put it 1em from the top left corner of the page and would be 8em wide. You could also use %'s, pixels, etc. for the measurements.


Code: 
#nav {
  position: fixed;
  top: 1em;
  left: 1em;
  width: 8em;
  }
 
thanks mdkny, but that's not it. did you look at the example link i provided? the sidebar is not fixed at all: when you scroll down the page, it disappears out of your view and then it slowly slides back to its new position, which is the same distance from the viewable top of the page. so it always ends up in the same spot, but only after sliding away with the page.

it's really a cool visual effect -- it doesn't do anything for the navigation, but i like the way it slides back and forth. if you take a look, you'll see what i mean.

all best,
tench
 
Sorry bout that, I totally missed your comment on the fixed part in the first msg. Been working way too much lately <G>. Personally I find that 'sliding' to be annoying at times.

The position relative won't get the desired effect. That menu is done using DHTML. Safari doesn't seem to totally like it, if you resize the page it jumps over into the content.

Here's a link for the site of the company which has the menu: http://popup.jscentral.com/viewpage.html

On that page the pop-outs/menu is useless for navigation with Safari. Worked the first time (I think) then quit, regardless of reloads/cache clearing/etc.
 
thanks a lot for that link -- i think i;ll be able to figure it out

i am not actually planning to use it as a menu with links and sublinks, but as a display for an iframe which gives word definitions when the user clicks on a word in the text. i am not a heartless safari killer :) so i will make sure it works first...

all best,
tench
 
mdnky said:
Sorry bout that, I totally missed your comment on the fixed part in the first msg. Been working way too much lately <G>. Personally I find that 'sliding' to be annoying at times.

The position relative won't get the desired effect. That menu is done using DHTML. Safari doesn't seem to totally like it, if you resize the page it jumps over into the content.

Here's a link for the site of the company which has the menu: http://popup.jscentral.com/viewpage.html

On that page the pop-outs/menu is useless for navigation with Safari. Worked the first time (I think) then quit, regardless of reloads/cache clearing/etc.
Click to expand...


I only mentioned the 'relative' value, because if you look at the source of the page that he mentioned, it used the relative value.

yes, resizing the page makes that window jump around, but if you notice, you can actually click and DRAG that window wherever you want on the page. not my style, but a cool little JS trick. it's all in the viewable source.


sounds like a cool idea you're working with tench. best of luck.
 
Dynamic Drive has a number of DHTML menus like the given example. You might study them and try to integrate your own techniques into what they provide.
 
Just a caution on Dynamic Drive, alot of the stuff on there was never very cross-browser capable. I quit going there about 2 years ago because of that, after 4+ years of being there. They were very IE/Win specific, with a few NN doable scripts. That was their idea of compatibility. Hopefully/maybe they've seen the light.
 
You must log in or register to reply here.
Back
Top