SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Navigation & IE issue

    Can anyone tell me how to make this work in IE? Works fine in Safari, etc. I've searched but can't seem to find the IE work around.
    It's supposed to be a CSS horizontal navigation, that when you mouse over the top level menu, you get a vertical drop down menu.
    Thanks for any help.

    Code:
    <ul class="nav">
    <li><strong>a navigation item</strong>
    	<ul>
    	<li>a navigation list item</li>
    	<li>...</li>
    	<li>...</li>
    	<li>...</li>
    	</ul>
    </li>
    <li><strong>a navigation item</strong>
    	<ul>
    	<li>another navigation list item</li>
    	<li>...</li>
    	<li>...</li>
    	<li>...</li>
    	</ul>
    </li>
    <li>Etc</li>
    </ul>
    Now the CSS part

    Code:
    /*** Nav bar styles ***/
    
    ul.nav,
    .nav ul{
    /*Remove all spacings from the list items*/
    	margin: 0;
    	padding: 0;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    }
    
    ul.nav{
    	display: table;
    }
    ul.nav>li{
    	display: table-cell;
    	position: relative;
    	padding: 2px 6px;
    }
    
    
    ul.nav>li:hover{
    	padding-right: 1px;
    } 
    
    ul.nav li>ul{
    /*Make the sub list items invisible*/
    	display: none;
    	position: absolute;
    	max-width: 40ex;
    	margin-left: -6px;
    	margin-top: 2px;
    }
    
    ul.nav li:hover>ul{
    /*When hovered, make them appear*/
    	display : block;
    }
    
    .nav ul li a{
    /*Make the hyperlinks as a block element, sort of a hover effect*/
    	display: block;
    	padding: 2px 10px;
    }
    
    /*** Menu colors (customizable) ***/
    
    ul.nav,
    .nav ul,
    .nav ul li a{
    	background-color: #fff;
    	color: #369;
    }
    
    
    ul.nav li:hover,
    .nav ul li a:hover{
    	background-color: #369;
    	color: #fff;
    }
    
    ul.nav li:active,
    .nav ul li a:active{
    	background-color: #036;
    	color: #fff;
    }
    
    ul.nav,
    .nav ul{
    	border: 1px solid #369;
    }
    
    .nav a{
    	text-decoration: none;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since I highly doubt you're going to have more than one menu that runs horizontally across the page, I'd give it an ID instead of a class.

    Therefore, your markup would change from your current HTML to this:
    HTML Code:
     <ul id="nav">
     	<li><a href=""><strong>Menu Link</strong></a>
     		<ul>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     		</ul>
     	</li>
     	<li><a href=""><strong>Menu Link</strong></a>
     		<ul>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     			<li><a href="">Menu Link</a></li>
     		</ul>
     	</li>
     	<li><a href="">Menu Link</a></li>
     </ul>
    Then, use the following CSS (style its appearance to taste):
    Code:
     #nav, #nav ul {
     	list-style: none;
     	margin: 0;
     	padding: 0;
     }
     #nav li {
     	display: inline;
     	float: left;
     }
     #nav ul {
     	display: none;
     	position: absolute;
     }
     #nav li:hover ul, #nav li.menuHover ul {
     	display: block;
     }
     #nav ul li {
     	display: block;
     	clear: left;
     }
     #nav a {
     	display: block;
     	padding: 0 5px;
     	width: 100%:
     }
    The declaration of #nav li.menuHover ul is used since I'm going to use a dash of JavaScript to make the menu work in IE 5, 5.5 and 6. The script is below:
    Code:
     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+=" menuHover";
     				}
     				node.onmouseout=function() {
     		    	    this.className=this.className.replace(" menuHover", "");
     				}
     			}
     		}
     	}
     }
     window.onload=startList;
    Put this in the <head> section of your document (I'm saying this because I've actually seen people try to put it in the <body> of their documents).

    For more information on dropdown menus, check out this post I wrote in the "Best Way to Make Dropdowns" thread:

    http://www.sitepoint.com/forums/show...38&postcount=6

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tested this and it's spot on. Thanks for taking the time for a very detailed posting.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. If you have any other questions, my PM box is always open .


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
  •