Web Analytics Made Easy -
StatCounter Need help with this script for CSS menu - CodingForum


No announcement yet.

Need help with this script for CSS menu

  • Filter
  • Time
  • Show
Clear All
new posts

  • Need help with this script for CSS menu

    I'm trying to make a CSS multi-level drop-down menu, and I'm using Javascript to get it to work in IE. I got the Javascript from A List Apart, but in their example the menu is not multi-level. So the menu's first level is working fine in IE, but the sub-levels aren't popping up. Basically this Javascript is supposed to add a class with the name "over" to whichever <li> element your mouse is over. Here it is:

    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", "");
    And here's my XHTML:

    <div id="header"><a id="headerLogo" href="index.php"><img src="images/header/eagle-head.gif" alt="Home" /></a><a id="aboutUs" href="#">About Us - Contact Us</a><img class="headerTipImage" src="images/header/header-logotip.gif" alt="headerTipImage" /></div>
    	<div id="menu"><img class="menuTipImage" src="images/menu/menu-logotip.gif" alt="headerTipImage" />
    	<ul id="nav">
      		<li><a id="menuCatalog" href="#">Online Catalog</a></li>
    		<li><a id="menuDealer" href="#">Find Your Dealer</a>
    			<ul id="nav">
    				<li><a href=" ">Domestic</a></li>
    				<li><a href=" ">Canada</a></li>
    				<li><a href=" ">Europe</a></li>
    				<li><a href=" ">Latin America</a></li>
    				<li><a href=" ">Asia/Pacific Rim</a></li>
    		<li><a id="menuTraining" href="#">Training and Education</a>
    			<ul id="nav">
    				<li><a href=" ">XP Technology</a></li>
    				<li><a href=" ">Quik-Tip</a></li>
    				<li><a href=" ">Infinitip &#187;</a>
    					<ul id="nav">
    						<li><a href=" ">Periodontal Disease</a></li>
    						<li><a href=" ">Ultrasonic</a></li>
    				<li><a href=" ">Cassettes</a></li>
    				<li><a href=" ">Instrument Care</a></li>
    		<li><a id="menuPromo" href="#">Promotions/Trade Shows</a>
    			<ul id="nav">
    				<li><a href=" ">Promotions &#187;</a>
    					<ul id="nav">
    						<li><a href=" ">Quarterly Promotions</a></li>
    						<li><a href=" ">Dealer Promotions</a></li>
    						<li><a href=" ">Trade Show Promotions</a></li>
    				<li><a href=" ">Trade Shows</a></li>
    		<li id="menuLast"><a id="menuCS" href="#">Customer Service</a>
    		<ul id="nav" class="lastMenuItem">
    				<li><a href=" ">Frequently Asked Questions</a></li>
    				<li><a href=" ">Employees</a></li>
    				<li><a href=" ">About Us</a></li>
    				<li><a href=" ">Contact Us</a></li>
    				<li><a href=" ">Form Download</a></li>
    				<li><a href=" ">Guarantees</a></li>
    Basically just your standard nested-list menu, with the id "nav" added to all of the <ul>'s to get the Javascript to work right (theoretically).

    I am a Javascript novice, so any help is really appreciated. Thanks!
    Last edited by shanstafari; Sep 28, 2006, 03:14 PM.

  • #2
    id only once per page

    I don't know javascript, but I do know something about html, and you can only use an id ONCE in a page, a class can be used as many times as you want Change id="nav" to class="nav" before you do anything else to your code.