SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS only nav menu

    Hello I have a web nav bar that I would like to make valid through the http://validator.w3.org/.
    I would also like it to be functional in all browsers, however in IE 7 I noticed it does not function the same. Any ideas? By the way the reason I want to use it is because it was the only CSS web nav bar that I could find. Rather not use any JS, just CSS.

    here is a link to the menu bar:
    Menu

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Without a top coordinate set on the dropdown menu, browsers must guess where to place it. If you set top:100%; on "ul#navlist li:hover ul#subnavlist" you will see everything aligns (though ti's for the worse)

    Now to patch stuff up...

    Add in these rules
    Code:
    ul#subnavlist li{height:1%;/*haslayout*/}
    Another thing, you need to remove the top margin set on ul#subnavlist. You can just set an independant rule overriding it (assuming it has enough weight to it)

    Code:
    ul#navlist li:hover ul#subnavlist{
    display: block;
    position: absolute;
    font-size: 8pt;
    padding: 0px;
    border-radius:2px;
    background:#999;
    border:#777 thin 2px;
    margin:0px 0 0 1px;/*ul list margins*/
    left:0;
    top:100%;
    
    
    }
    Once that margin is set to 0 and the haslayout is added, it'll be all good.

    EDIT-Just retried in FF, IE alone needs that margin-top set to 0.

    You can try *+html ul#subnavlist{margin-top:0;}. It won't validate however.

    The only HTML validation errors is because you have a <ul> and an <li> with the same ID on it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You can try *+html ul#subnavlist{margin-top:0;}. It won't validate however.
    Hi Ryan,

    Actually the * html & *+html hacks do validate for those who are concerned with that.

    Good to see you back in the forums!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Ryan,

    Actually the * html & *+html hacks do validate for those who are concerned with that.

    Good to see you back in the forums!
    Oh, I assumed it wouldn't have. Looking back it was silly of me to assume otherwise. Derp! That's what you get for being gone from the web so long.

    Good to see you too! I actually smiled a bit when I saw it was you who replied.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ryan for helping me fix the menu
    The only HTML validation errors is because you have a <ul> and an <li> with the same ID on it.

    So should I change something? I thought it was okay to have li's or ul's with a class? Not sure why that would be an error?

    thanks rayzur for validation info

    However, I have two other problems in IE7:
    1) the header link nav is being cut in half see attachment
    ie7.jpg
    2) the drop down is being pushed behind the slider
    IE7-2.jpg

    And lastly is this just a waste of life to try and make a CSS only menu work for our site?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You don't need those hacks just do it right from the start

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    /**************************************************************************************************************************************/
    /********************************************************navBar*********************************************************************/
    
    ul#navlist {
    	font-family: Helvetica, Arial, sans-serif; 
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	z-index:999;
    }
    ul#navlist a {
    	font-weight: bold;
    	text-decoration: none;
    }
    ul#navlist li:hover ul {
    	display: block;
    	position: absolute;
    	font-size: 8pt;
    	padding: 0px;
    	border-radius:2px;
    	background:#999;
    	border:1px solid #777;
    	margin:0 0 0 1px;/*ul list margins*/
    	left:0;
    	top:100%;
    	z-index:1000;
    }
    ul#navlist li {
    	text-align:left;
    	float:left;
    	position:relative;
    	list-style-type: none;
    }
    ul#navlist li a {
    	color:#977082;
    	background-color: #fff; /*liBackgrounds*/
    	padding: 8px 16px; /*wordPadding*/
    	border: 1px rgb(252,252,252) solid;/*mainBoxBorder*/
    	font-size:12px;
    	float:left;
    }
    ul#navlist ul li a {
    	color: #977082;
    	background-color:none; /*liBackgroundMainColor*/
    	margin: 2px 2px; /*wordPadding*/
    	font-size:11px;
    	float:none;
    }
    #navListContainer {
    	margin:21px 0 0 0;
    	width:529px;
    	float:left;
    }
    ul#navlist li:hover > a {
    	color: #F172A7;
    	background-color:#777;/*highlights the LI*/
    }
    ul#navlist li a:active {
    	color:#cccccc;
    	background-color:#555;/*colorOnClick*/
    }
    ul#navlist ul {
    	padding:0 0 0 12px;
    	display: block;
    	position: absolute;
    	font-size: 8pt;
    	padding: 0px;
    	border-radius:2px;
    	background:#999;
    	border:1px solid #777;
    	margin:8px 0 0 1px;/*ul list margins*/
    	left:0;
    	top:100%;
    	margin-left:-999em
    }
    ul#subnavlist li {
    	font-size:14px;
    	float: none; /*wordPadding*/
    }
    ul#subnavlist li a {
    	padding: 0;
    	margin: 0;
    }
    /*codeAdded****/
    ul#navlist li:hover ul {
    	margin-left:0;
    }
    ul#navlist li:hover ul li a {
    	display: block;
    	width:12em;/*widthOfLI*/
    	border: none;
    	padding:7px 7px 7px 12px;
    }
    ul#navlist li:hover ul li a:before { content: " > "; }
    </style>
    </head>
    
    <body>
    <div id="navListContainer">
    		<ul id="navlist">
    				<li id="active"><a href="/shop-online">SHOP</a>
    						<ul>
    								<li class="subactive"> <a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a></li>
    						</ul>
    				</li>
    				<li><a href="/lookbook">SECOND</a>
    						<ul>
    								<li class="subactive"> <a class="hdrNavLink" href="#">prod1</a></li>
    								<li><a class="hdrNavLink" href="#">prod1</a>
    						</ul>
    				</li>
    				<li><a class="hdrNavLink" href="#">THIRD</a></li>
    				<li><a class="hdrNavLink" href="#">FOURTH</a></li>
    		</ul>
    </div>
    </body>
    </html>
    You also had an errand list tag in there that was invalidly nested so I removed it. IE7 needs the anchors to be floated to behave properly on the top level.

    Ids are unique and there can only be one per page. Use classes if you need re-usable styles. You don't actually need to add classes to submenus because they are unique by context and can be reached from the main parent.

    Don't use the keyword "thin" as it means different things to different browsers as the exact width is not defined in the specs and some browsers are 1px different quite legitimately. Just use dimensions and they will be exact e.g. border:1px solid #000.

    2) If the slider is flash based then you need to add the parameter wmode="opaque" (google it for the full version) to the object/embed code otherwise flash is always on top.

    If the slider is JS based then you need to address the parent element that holds the nav (assuming its not in the same div as the nav) and then apply position:relative to the parent if it isn't positioned already and then apply a high z-index (higher than the slider has).

    If the nav and slider are siblings then just ensure the nav has a high z-index.

    Code:
    ul#navlist {
    	font-family: Helvetica, Arial, sans-serif; 
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	z-index:999;
    }

    In IE7 it is ultimately the positioned parent that dictates the stacking context because positioned elements automatically get a stacking index of zero in iE7 when they should actually be auto (which ie7 doesn't understand).

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gotta be honest, I only have one word. "Beautiful"
    Thank you Paul O'B

    I do have one last question, what do you think about using this on a high traffic site, would you foresee and problems?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by yorsite View Post
    what do you think about using this on a high traffic site, would you foresee and problems?
    I forsee none at all.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yorsite View Post
    I gotta be honest, I only have one word. "Beautiful"
    Thank you Paul O'B

    I do have one last question, what do you think about using this on a high traffic site, would you foresee and problems?
    What kind of issues would you "think" could happen?

    With CSS, there is no way a site having a lot of traffic could cause issues.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    CSS menus can have accessibility issues, but that's a different issue altogether, not relevant to traffic concerns.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I really believe you've completely over-thought the solution to your issue here... You've got div for no reason, multiple classes for no reason (big tip, if every element inside a container is getting the same class, NONE of them need classes), and a whole slew of unnecessary/redundant CSS -- mind you, pure CSS menus are by definition filled with redundancies, but still...

    You've also got conflicting metrics in there... px paddings, pt fonts, em heights by inheritance... it's just asking for it to fail.

    Try this on for size:

    screen.css
    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    body {
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    #navList {
    	list-style:none;
    	position:relative;
    	height:2.5em;
    	font-weight:bold;
    }
    
    #navList li {
    	position:relative;
    	float:left;
    	zoom:1;
    	overflow:hidden;
    }
    
    #navList a {
    	display:block;
    	zoom:1;
    	padding:0.5em 1em;
    	text-decoration: none;
    	color:#977082;
    	background:#FFF;
    }
    
    /*
    	It sucks to have to repeat the colors like this, but it keeps
    	the inheritance of the menu in proper order
    */
    
    #navList li:hover a {
    	color:#F172A7;
    	background:#999;
    }
    
    #navList li a.current {
    	color:#000;
    }
    
    #navList li:hover li a {
    	color:#977082;
    	background:#FFF;
    }
    
    #navList li:hover li .current {
    	color:#000;
    }
    
    #navList li li:hover a {
    	color:#F172A7;
    	background:#999;
    }
    
    #navList li li a {
    	border:solid #777;
    	border-width:0 2px 2px 0;
    }
    
    #navList li ul {
    	position:absolute;
    	top:2.5em;
    	width:12em;
    	border:solid #777;
    	border-width:2px 0 0 2px;
    }
    
    #navList li ul ul {
    	top:0;
    	left:12em;
    }
    
    #navList li:hover {
    	overflow:visible;
    }
    
    #navList li li {
    	float:none;
    }
    template.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Menu Demo
    </title>
    
    </head><body>
    
    <ul id="navList">
    	<li>
    		<a href="/shop-online" class="current">SHOP</a>
    		<ul>
    			<li><a class="current" href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="/lookbook">SECOND</a>
    		<ul>
    			<li><a href="#">prod1</a></li>
    			<li><a href="#">prod1</a></li>
    		</ul>
    	</li>
    	<li><a href="#">THIRD</a></li>
    	<li><a href="#">FOURTH</a></li>
    </ul>
    
    </body></html>
    Should work just fine all the way back to IE7, and has a pretty good chance of working in IE6 (untested) if you throw Peterned's CSShover3.htc at it.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Looks good Jason, you may want to remove the markers on all the nested lists.

    #navList li ul {
    position:absolute;
    top:2.5em;
    width:12em;
    border:solid #777;
    border-width:2px 0 0 2px;
    list-style:none;
    }

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Looks good Jason, you may want to remove the markers on all the nested lists.
    Oops, good catch. What I get for making a drive-by post from the laptop before I even have my morning wake-up juice.


Tags for this Thread

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
  •