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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    alistapart hybrid css/sliding doors problem

    I have been trying to trouble shoot this nav bar. I can't seem to get it right. The issues reside mainly in ie. But there may be issues elsewhere.
    Basically, I cannot get the submenu to appear when the main menu tabs are rolled over.

    Any help would be greatly appreciated.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <script  type="text/javascript">
    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>
    
    
    <style type="text/css">
    
    #mainnav{
    	width:927px;
    	margin-left:auto;
    	margin-right:auto;
    	position:relative;
    	text-align:center;
    	height:46px;
    }
    #nav {
    width:827px;
    	margin-left:100px;
    	padding:0;
    	text-align:center;
        font-size:14px;
    }
    	
    #nav a {
    		text-decoration: none;
    }
    #nav li {
      /*float the main list items*/
      margin: 0;
      float: left;
      display: block;
      margin-left:5px;
    }
    	
    #nav li.off ul, #nav li.on ul {
      /*hide the subnavs*/
      position: absolute;
      top: 29px;
      *top: 29px; /*reposition for IE*/
      height: 23px;
      left: 0;
      margin: 0;
      padding: 0;
      background:#00759F;
      width:867px;
    *width:927px;
      padding-left:60px;
    }
    #nav li.off{
    	background: url("/header/up_r.jpg") no-repeat right top;
    	}
    #nav li.off:hover, #nav li.over, {
    	background: url("/header/over_r.jpg") no-repeat right top;
    	}
    #nav li.on{
    	background: url("/header/over_r.jpg") no-repeat right top;
    	}
    #nav li.off a{
    	background: url("/header/up_l.jpg") no-repeat left top;
    	}
    #nav li.off a:hover, #nav li:hover a, #nav li.over a {
    	background: url("/header/over_l.jpg") no-repeat left top;
    	}
    #nav li.on a{
    	background: url("/header/over_l.jpg") no-repeat left top;
    	}
    #nav li.on ul li a{
    	background:#00759f;
    	}
    #nav li.on ul li a:hover{
    	background:#000000;
    	}
    #nav li.off ul li a{
    	background:#00759f;
    	}
    #nav li.off ul li a:hover{
    	background:#000000;
    	}
    #nav li a {
      /*for all links in the list*/
      color: #ffffff;
      font-weight: bold;
      display: block;
      height: 12px;
      padding: 8px 15px 9px 15px;
     *display:inline;  
    }
    
    #nav li.on a {
      color:#ffffff;
    }
    
    #nav li.on ul a, #nav li.off ul a {
      /*  cancel inherit of border
          on subnav of active topic */
      border: 0;
      float: left;
      color: #ffffff;
      width: auto;
      margin-right: 10px;
      padding:5px 30px 5px 30px;
      font-size:12px;
    }
    
    #nav li.on ul {
      /*display active subnav list*/
      display: block;
     }
    
    #nav li.off:hover ul, #nav li.over ul  {
      /*  display the other topics when
          their parent is hovered */
      display: block;
      z-index: 6000;
    }
    #nav li.off a:hover, #nav li:hover a, #nav li.over a{
      color: #ffffff;
    }
    </style>
    
    -----------------------
    
    
    <table cellpadding="0" cellspacing="0">
    		<tr>
    			<td>
    				<div id="mainnav">
    					<ul id="nav">
    						<li class="on"><a href="#">Products</a>
    							<ul>
    								<li><a href="#">Product1</a></li>
    								<li><a href="#">Product2</a></li>
    								<li><a href="#">Product3</a></li>
    								<li><a href="#">Product4</a></li>
    								<li><a href="#">Product5</a></li>
    							</ul>
    						</li>
    						<li class="off"><a href="#"> Support</a>
    							<ul>
    								<li><a href="#">SupportPage1</a></li>
    								<li><a href="#">SupportPage2</a></li>
    								<li><a href="#">SupportPage3</a></li>
    							</ul>
    						</li>
    						<li class="off"><a href="#">AnotherTab</a>
    							<ul>
    								<li><a href="#">Anothersub1</a></li>
    								<li><a href="#">Anothersub2</a></li>
    							</ul>
    						</li>
    						<li class="off"><a href="#">morestufftab</a>
    							<ul>
    								<li><a href="#">morestuff1</a></li>
    								<li><a href="#">morestuff2</a></li>
    								<li><a href="#">morestuff3</a></li>
    							</ul>
    						</li>
    						<li class="off"><a href="#">About UsTab</a>
    							<ul>
    								<li><a href="#">aboutuspage1</a></li>
    								<li><a href="#">aboutuspage2</a></li>
    								<li><a href="#">aboutuspage3</a></li>
    								<li><a href="#">aboutuspage4</a></li>
    								<li><a href="#">aboutuspage5</a></li>
    							</ul>
    						</li>
    						
    						
    					</ul>
    				</div>
    			</td>
    		</tr>
    </table>

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Have you checked that this script will work in the version of IE that you are trying to code for as they do not all work in all browsers. If it does work maybe you will need a workaround. You have a margin left width of 5px on the nav.li so you will need to reduce your width for the nav.li off ul
    Last edited by quartzy; 01-14-2010 at 01:53 PM.


  •  

    Posting Permissions

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