Css drop down menu

[vidhem]

Can anyone give me a script for a drop down menu that doesnot causes the whole page to push down...

 

[gptsven]

Can anyone give me a script for a drop down menu that doesnot causes the whole page to push down...

try searching css dropdown menu in google, you should check out dynamicdrive.com, they give full scripts for all types of css build items

 

[quantum1]

gptsven, thank you for the dynamic drive link! it rocks!

 

[vol7ron]

all you need to do is position:absolute; a DIV and then use top:; and left:; to place it.

It won't push the page down.

 

[vidhem]

thanks vol7ron and gptsven

 

[vol7ron]

not sure i helped at all, but using javascript but here's a quick example I'll code up showing how you can get an element's position with javascript:

<div id="menuID" 
   style="background:#f00; color:#fff; border:1px solid black;
          width:15em; position:absolute; z-index:10;" 
   onmouseover="elem=getElementById('submenuID');
          elem.style.top=this.offsetTop + this.offsetHeight + 1 + 'px';
          elem.style.display='block';"
>
   This is your menu
</div>

<div id="submenuID" 
   style="background:#f03333; color:#fff; border:1px solid black;
          width:15em; position:absolute; z-index:10; display:none;" 
   onmouseover="this.style.background='#00f';"
   onmouseout="this.style.display='none';"
>
   This is your submenu
</div>

 

[quantum1]

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

The link above is from the dynamicdrive page mentioned by gptsven. I created the html and downloaded the javascript and it works great!

 

[freecrm]

I have always found this site excellent when trying to create good css techniques - including drop-down menus - which it does for you.

www.cssplay.co.uk

 

[vol7ron]

both sites nice, however not really a fan of cssplay. good demonstrations, some errors, but they don't make it so easy to build your own.

as for dynamic drive, i remember using them a long time ago (around y2k) when DHTML was really popular.

 

[freecrm]

I prefer pure css solutions in case JS isn't enabled (which 95% of the time it is).

A word of warning though with css styling - IE6!

very simply a big pain and you need to (or should) build in bug fixes for IE.

If you only have browsers using firefox/chrome/opera/anything else - no need to worry!
Edit:
There is a part of cssplay that builds them for you

http://www.cssplay.co.uk/menus/menu_builder_flyout.html

 

[vol7ron]

there is no pure css solutions though. doing so would rule out certain browsers. if you had pure css/html your side would have to be restructured. that is because many of the :hovers and child selectors are not compatible with older browsers. additionally, for those sites that have elaborate imagery, using only css will make alignment look funny, therefore js is needed for absolute path alignment issues.