Menu Problem..

[Rustage]

Hi guys, i've been googling loads off different things but had no luck so far so thought id check if anyone here could help me..Im making a webpage and due to the fact I have around 30 links I don't really want them all displayed at once, i've seen on a few sites that theyll have lets say for instance 5 categories laid out like..NewsCategoriesTutorialsResourcesLinksBut then when you click one for instance Tutorials it will change to something likeNewsCategoriesTutorials HTML PHP CSS JavascriptResourcesLinksSo basically it only shows the rest of the links if the user clicks on that category, just wondering if anyone knows of any tutorials or even the name of this sort of menu so I can try it out, sorry about the crappy explanation but really have no idea what you would call it haha.. cheers, Rustage

[chibineku]

If you visit www.sinaesthesia.co.uk/aromatherapy.php5 you'll find the javascript and menu format necessary to do this - I've just implemented it myself. Like this:

clickmenu = function(menu) { var getEls = document.getElementById(menu).getElementsByTagName("LI"); var getAgn = getEls; for (var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { for (var x=0; x<getAgn.length; x++) { getAgn[x].className=getAgn[x].className.replace("unclick", ""); getAgn[x].className=getAgn[x].className.replace("click", "unclick"); } if ((this.className.indexOf('unclick'))!=-1) { this.className=this.className.replace("unclick", "");; } else { this.className+=" click"; } } } }

<div id="outer"><ul id="menu"><li id="home" class="sub">Home </li><li class="sub ">Products<ul><li class=""><a href="#nogo6">Psoriasis</a></li><li class=""><a href="#nogo7">Excema</a></li><li class=""><a href="#nogo8">Anti-Bacterial</a></li><li class=""><a href="#nogo9">Bespoke Products</a></li></ul></li><li id="custom" class="sub unclick">Custom Products<ul><li class=""><a href="#nogo10">FAQ</a></li><li class=""><a href="#nogo11">First</a></li><li class=""><a href="#nogo12">Repeat Order</a></li></ul></li><li id="myaccount" class="sub unclick">My Account</li><li id="aromatherapy" class="sub unclick">Aromatherapy<ul><li class=""><a href="#nogo10">Origins</a></li><li class=""><a href="#nogo11">Science</a></li><li class=""><a href="#nogo12">Links</a></li></ul></li><li id="contact" class="sub unclick">Contact</li></ul></div>

#outer {margin : 10px 0 0; position : relative; width : auto; } #menu { list-style-type : none; margin : 0 auto; padding : 0; width : auto; } #menu ul { list-style-type : none; margin : 0; padding : 0; } #menu li { background : #9bd9e0;float : left;margin : 1px 1px 0 0;position : relative;}#menu li.sub {background : #9bd9e0;}#menu li, #menu li a {color : #ffffff;cursor : pointer;display : block;font-family : arial, sans-serif;font-size : 11px;font-weight : bold;line-height : 25px;text-align : center;text-decoration : none;width : 130px;}#menu li:hover, #menu li a:hover {background : #094c59;}#menu ul {left : -9999px;position : absolute;width : 128px;}#menu li.click {background : #094c59;}#menu li.click li:hover, #menu li.click li a:hover {background : #9bd9e0 none repeat scroll 0 0;color : #094c59;}#menu li.click ul {}#menu li.click li {background : #094c59;}#menu ul .cur {background : #094c59;}#menu li.sub li {margin : 1px 0 0;}#menu li.click ul, #menu li.click ul.li {background : #ffffff none repeat scroll 0 0;left : 0;top : 24px;}

Then add onload="clickmenu('menu') to the body tag.You can adjust the styling, obviously, but some of it is necessary.

[Rustage]

Ah brilliant, thank you very much ill have a crack at it nowCheers, Rustage

[danm68]

Or, if you're interested in a method that does not use javascript, only css and html, then check out this: http://meyerweb.com/eric/css/edge/menus/demo.htmlSuppose you could call it a 'dropdown' or 'fly-out' menu.The only problem with the css menu, is that it won't work in Internet Explorer. I think it works in most others? (Firefox, Chrome, Safari, Opera)Correct me if I'm wrong.And that for the submenu to display you rely on keeping the mouse over the menu, so your links can't be too small.Obviously javascript has an advantage with just clicking to keep a submenu active.

[Ingolme]

The CSS method can work in Internet Explorer under two conditions:

1. Your page is in Standards Compliant mode.
2. You use descendent selectors and not child selectors