how to make this menu with css

  • virtualgeorge
  • Newbie
  • Newbie
  • virtualgeorge
  • Posts: 13

Post 3+ Months Ago

This site has a drop down menu but the sub menu is horizontal under the tabs instead of dropping down vertically. http://maneattractionsalon.com

Any one know where I could get info on how to create that with css?

I looked around the css play website but couldn't find one like that but may have missed it.

Not really sure what to call it so I am having problems finding one searching google.

thanks!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

it's atually done with Javascript if I'm not mistaken ... it basically just shows/hides layers ...
the philosophy layer
Code: [ Select ]
<div id="phi" style="position:absolute; left:560px; top:106px; width:212px; height:24px; z-index:6; visibility: hidden">
<table width="212" border="0" cellspacing="0" cellpadding="0" height="24">

<tr>
<td width="132"><a href="/mission_statement.asp" onMouseOut="MM_swapImgRestore();MM_showHideLayers('phi','','hide')" onMouseOver="MM_swapImage('mission','','/images/dropdown/mission_over.jpg',1);MM_showHideLayers('phi','','show')"><img src="/images/dropdown/mission.jpg" width="132" height="24" name="mission" alt="Mission Statement" border="0"></a></td>
<td width="80"><a href="/philosophy.asp" onMouseOut="MM_swapImgRestore();MM_showHideLayers('phi','','hide')" onMouseOver="MM_swapImage('abophi','','/images/dropdown/abo_philosophy_over.jpg',1);MM_showHideLayers('phi','','show')"><img src="/images/dropdown/abo_philosophy.jpg" width="80" height="24" name="abophi" border="0" alt="Philosophy"></a></td>
</tr>
</table>
</div>
  1. <div id="phi" style="position:absolute; left:560px; top:106px; width:212px; height:24px; z-index:6; visibility: hidden">
  2. <table width="212" border="0" cellspacing="0" cellpadding="0" height="24">
  3. <tr>
  4. <td width="132"><a href="/mission_statement.asp" onMouseOut="MM_swapImgRestore();MM_showHideLayers('phi','','hide')" onMouseOver="MM_swapImage('mission','','/images/dropdown/mission_over.jpg',1);MM_showHideLayers('phi','','show')"><img src="/images/dropdown/mission.jpg" width="132" height="24" name="mission" alt="Mission Statement" border="0"></a></td>
  5. <td width="80"><a href="/philosophy.asp" onMouseOut="MM_swapImgRestore();MM_showHideLayers('phi','','hide')" onMouseOver="MM_swapImage('abophi','','/images/dropdown/abo_philosophy_over.jpg',1);MM_showHideLayers('phi','','show')"><img src="/images/dropdown/abo_philosophy.jpg" width="80" height="24" name="abophi" border="0" alt="Philosophy"></a></td>
  6. </tr>
  7. </table>
  8. </div>


the philosophy link
Code: [ Select ]
<td width="80"><a href="/philosophy.asp" onMouseOut="MM_swapImgRestore();MM_showHideLayers('phi','','hide')" onMouseOver="MM_swapImage('abophi','','/images/dropdown/abo_philosophy_over.jpg',1);MM_showHideLayers('phi','','show')"><img src="/images/dropdown/abo_philosophy.jpg" width="80" height="24" name="abophi" border="0" alt="Philosophy"></a></td>


the javascript to show/hide layers
Code: [ Select ]
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
  1. function MM_showHideLayers() { //v3.0
  2. var i,p,v,obj,args=MM_showHideLayers.arguments;
  3. for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  4.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
  5.     obj.visibility=v; }
  6. }


that's about it ...
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6810
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Take a look at some of these

http://www.cssplay.co.uk/menus/dd_valid_2.html
http://www.cssplay.co.uk/menus/drop_line.html
http://www.cssplay.co.uk/menus/doors_drop_line.html
http://www.cssplay.co.uk/menus/doors_drop_line_two.html
http://www.cssplay.co.uk/menus/doors_dr ... three.html
http://www.cssplay.co.uk/menus/simple_dropline.html
http://www.cssplay.co.uk/menus/pro_dropline.html
http://www.cssplay.co.uk/menus/pro_dropline2-5.html
http://www.cssplay.co.uk/menus/pro_drop ... pdown.html
http://www.cssplay.co.uk/menus/pro_line_down_fly.html
http://www.cssplay.co.uk/menus/pro_left_right_line.html

I think you get the point. You may not find one exactly like the one on the website you linked to but you can find something close.

The menu is called a dropline menu as far as Stu Nicholls is concerned.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.