CSS Menu Question [Archive] - Dynamic Drive Forums

redice

05-07-2007, 09:25 AM

Hi All,

I am making a menu as seen here http://gatewayitsolutions.net/menu/
Now Its a two level menu, basically what I need to achieve is that when someone rolls over to for example extras the submenu will appear, I would like the submenu not to close after they move away from extras, it should only close when the user moves over to the next menu item that has a submenu eg products.

I dont know If I am making any sense here. Please do advise/help

Redice

boogyman

05-07-2007, 04:18 PM

this would have to be done with javascript, not css. take alook in the javascript navigation menu section

redice

05-16-2007, 07:50 AM

Could someone help me with the javascript, as I wasnt able to find it in the java script section, atleast not what I wanted.

Redice

redice

05-16-2007, 08:07 AM

I think i got the javascript

------

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

------

Problem is I dont know how to make use of it. Please help

Spiritvn

05-17-2007, 12:28 PM

It's can be done with CSS:

example:

CSS code

#menu {list-style-type:none; margin:50px 0 100px 15px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65 url(bottom.gif) no-repeat bottom left; text-align:center; cursor:pointer;}
#menu dt {margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;}
#menu .one {background: #b2ab9b url(top.gif) no-repeat top left;}
#menu .two {background: #949e7c url(top.gif) no-repeat top left;}
#menu .three {background: #d4d8bd url(top.gif) no-repeat top left;}
#menu .four {background: #e2dfa8 url(top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
#menu dd.last {border-bottom:1px solid #444;}
.gallery dt a, .gallery dt a:visited {display:block; color:#444;}
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}

here is html code:

<ul id="menu">
<li>

<dl class="gallery">

<dt class="one"><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>

<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>

</li>
<li>


<dl class="gallery">
<dt class="two"><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>

<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>

</li>
<li>

<dl class="gallery">
<dt class="three"><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>

<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>

</li>
<li>


<dl class="gallery">
<dt class="four"><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>

<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>

</li>
</ul>

You can see example with the second menu list one 1 line here

www.q9-gaming.com/en/

hover and see.