Jump to content

Menu Problem..


Rustage
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...