Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    Trouble with adding 2nd list style

    I am using a drop down menu on my site which uses the following code:

    CSS:

    Code:
    /*Menu Start */
    ul {
      font-family: Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height:1.5;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index:9999;
      
    }
    
    
    ul li {
      display: block;
      position: relative;
      float: left;
      cursor:pointer;
      z-index:9999;
      position:static;
      
    
    }
    
    li ul { display: none; z-index:9999; }
    
    
    ul li a {
      font-family: Arial, Verdana, sans-serif;
      text-transform:uppercase;
      font-size: 10px;
      line-height:1.9;
      display: block;
      text-decoration: none;
      color: #000000;
      border-top: 0px solid #9F9F9F;
      padding: 5px 28px 5px 10px;
      background: #FFFFFF;
      margin-left: 1px;
      white-space: nowrap;
      z-index:9999;
      font-weight:bold;
    
    
    }
    
    
    ul li a:hover, ul li a.over { background: #c0c1c0; z-index:9999; }
    
    
    li:hover ul, li.over ul {
      display: block;
      position: absolute;
      z-index:9999;
    }
    li:hover li, li.over li {
      float: none;
      font-size: 11px;
      z-index:9999;
    }
    
    
    li:hover a, li.over a { background: #EAEAEA; z-index:9999; color:#000000; }
    li:hover li a:hover, li.over li a.over { background: #c0c1c0; z-index:9999; color:#000000; }
    JAVASCRIPT

    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    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;
    
    //--><!]]></script>
    HTML:

    Code:
     <ul id="nav">
      <li><a>Collections +</a>
       <ul>
       <li><a href="angelina.php">Angelina Collection</a></li>
       <li><a href="product2_bridal.php?osCsid=<? echo $osCsid?>">Bridal Collection</a></li>
       <li><a href="product2_byzantine.php?osCsid=<? echo $osCsid?>">Byzantine Collection</a></li>
       <li><a href="carre.php">Carré Collection</a></li>
       <li><a href="product2_dewdrop.php?osCsid=<? echo $osCsid?>">Dew Drop Collection</a></li>
       <li><a href="product2_disk.php?osCsid=<? echo $osCsid?>">Disk Collection</a></li>
       <li><a href="product2_fleur.php?osCsid=<? echo $osCsid?>">Fleur Collection</a></li>
       <li><a href="product2_ice.php?osCsid=<? echo $osCsid?>">Ice Collection</a></li>  
       <li><a href="product_child.php?osCsid=<? echo $osCsid?>">Children</a></li>
       <li><a href="product_life.php?osCsid=<? echo $osCsid?>">Lifesaver</a></li>
       <li><a href="product2_men.php?osCsid=<? echo $osCsid?>">Men</a></li>   
       <li><a href="viewall.php">View All</a></li>
      </ul>
     </li>
     
       <li><a>Bracelets +</a>
       <ul>
       <li><a href="product1_cool.php?osCsid=<? echo $osCsid?>">Cool </a></li>
       <li><a href="product1_neutral.php?osCsid=<? echo $osCsid?>">Neutral</a></li>
       <li><a href="product1_warm.php?osCsid=<? echo $osCsid?>">Warm</a></li>
       <li><a href="product_bracelets.php">View All</a></li>   
      </ul>
     </li>
    The problem I am having is that I want to css style a second list on the same page but can't because my css for this is universal for all UL,LI elements. Or at least I think that is the problem.

    So I can't seem to figure out how to add a class to these elements as well as integrate it into the javascript.

    Your help is always so greatly appreciated!

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Well, for the JS I would try changing everywhere that it says nav and navRoot to nava and navaRoot for the first menu and navb for the second menu. Or you could try changing all of the getElementByIds to getElementByClasss
    which might be the better option if it works like that.

    I don't know the first thing about Javascript though. Worth a try anyway.

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    I dont need the second list style to work with the javascript. I just need it to be styled differently.

    I don't know much if anything about javascript either which is the problem I think.

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    if you want it to be styled differently simply do
    Code:
    ul#menu-two { /*style */ }
    ul#menu-two li { /*style */}
    
    <ul id="menu-two">
    <li>gogo</li>
    </ul>

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Yeah it looks like the javascript just finds ID="nav" and goes from there. So if you don't want to use the JS for the second list then you shouldn't need to do anything special at all. You can only have one thing with an ID="nav" on the page anyway. Just use new IDs and new classes for your second list and the JS shouldn't be an issue.

    Personally I wouldn't recommend having your main navigation menu be dependent on javascript. I think it is a good idea to make sure your site at least won't appear broken if javascript is disabled by a visitor.


  •  

    Posting Permissions

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