Css drop down menu

vidhem

New Member
Messages
12
Reaction score
0
Points
0
Can anyone give me a script for a drop down menu that doesnot causes the whole page to push down...
 

gptsven

New Member
Messages
253
Reaction score
5
Points
0
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
 

vol7ron

New Member
Messages
434
Reaction score
0
Points
0
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.
 

vol7ron

New Member
Messages
434
Reaction score
0
Points
0
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:

HTML:
<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>
 
Last edited:

freecrm

New Member
Messages
629
Reaction score
0
Points
0
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

New Member
Messages
434
Reaction score
0
Points
0
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

New Member
Messages
629
Reaction score
0
Points
0
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
 
Last edited:

vol7ron

New Member
Messages
434
Reaction score
0
Points
0
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.
 
Top