SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom expanding menu not working (conflict with CSS?).

    I'm trying to design a collapsible menu that responds to clicks, not mouseovers. Below is my javascript:

    Code:
    var dropList = function() {
    	if(document.getElementById) {
    		theList = document.getElementById("leftnav");
    		for (i = 0; i < theList.childNodes.length; i++) {
    			node = theList.childNodes[i];
    			if (node.nodeName == "li") {
    				if(node.className == "") {
    					node.onclick = function() {
    						node.className+="active";
    					}
    				} else {
    					node.onclick = function() {
    						node.className = this.className.replace("active","");
    					}
    				}
    			}
    		}
    	}
    }
    window.onload = dropList;
    The XHTML:

    HTML Code:
    <div id="nav">
    				<ul id="leftnav" class="left">
    					<li><a href=" ">Home</a></li>
    					<li><a href=" ">Training</a>
    						<ul>
    							<li><a href=" ">Sub-page 1</a></li>
    
    							<li><a href=" ">Sub-page 2</a></li>
    							<li><a href=" ">Sub-page 3</a></li>
    							<li><a href=" ">Sub-page 4</a></li>
    							<li><a href=" ">Sub-page 5</a></li>
    						</ul>
    					</li>
    					<li><a href=" ">Resources</a></li>
    
    					<li><a href=" ">Products</a></li>
    					<li><a href=" ">Alliances</a></li>
    					<li><a href=" ">Support</a></li>
    				</ul>
    			</div>
    And CSS:

    Code:
    #nav {
    	position: absolute;
    	width: 175px;
    	height: 300px;
    	background-color: #00D0E9
    }
    
    ul.left {
    	list-style: none;
    	margin-left: 0px;
    	padding-left: 10px;
    }
    
    ul.left a {
    	font-weight: normal;
    }
    
    ul.left li ul {
    	list-style: none;
    	padding-left: 20px;
    	display: none;
    }
    
    ul.left, ul.left li.active ul {
    	display: block;
    }
    Clicking "Training" does nothing...why doesn't this work?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump....

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New version of the JavaScript that still doesn't work (but I think is better than the original....):

    Code:
    var dropList = function() {
    	if(document.getElementById) {
    		theList = document.getElementById("leftnav");
    			node = theList.childNodes;
    			for(var i = 0; i < node.length; i++) {
    			if (node.nodeName == "li") {
    				subList = node.childNodes;
    				for (var i = 0; i < subList.length; i++) {
    				if(subList.hasAttribute("class")) {
    					subList.onclick = function() {
    						subList.removeAttribute("class");
    					}
    				} else {
    					subList.onclick = function() {
    						subList.setAttribute("class","active");
    					}
    				}
    				}
    			}
    		}
    	}
    }
    window.onload = dropList;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •