SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Denver
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantically correct 2-level horizontal lists?

    I'm trying to accomplish a two-level horizontal menu that employs semantically correct XHTML. The second <ul> of navigation should be nested in the appropriate <li> tag of the main navigation. This would make sense to screen readers, etc.

    However, I can't seem to accomplish this and maintain my layout. The second level of navigation (nested <ul>) breaks the first <ul> into pieces. I was thinking I could take the second <ul> out of flow with absolute positioning, but I can't get it to work.

    Anyone have any luck with a layout like this?

    Here's my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hydro Template</title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    line-height: 1.5em;
    color: #000;
    font-size: x-small; /* IE5 Win */
    voice-family: "\"}\"";
    voice-family: inherit;
    font-size: small;
    }
    html>body { /* be nice to Opera */
    font-size: small;
    }
    body#home #company_sub,
    body#home #services_sub,
    body#home #federal_sub,
    body#home #projects_sub,
    body#home #publications_sub,
    body#home #news_sub,
    body#home #search_sub {
    display: none;
    }
    body#company #home_sub,
    body#company #services_sub,
    body#company #federal_sub,
    body#company #projects_sub,
    body#company #publications_sub,
    body#company #news_sub,
    body#company #search_sub {
    display: none;
    }
    body#services #home_sub,
    body#services #company_sub,
    body#services #federal_sub,
    body#services #projects_sub,
    body#services #publications_sub,
    body#services #news_sub,
    body#services #search_sub {
    display: none;
    }
    body#federal #home_sub,
    body#federal #company_sub,
    body#federal #services_sub,
    body#federal #projects_sub,
    body#federal #publications_sub,
    body#federal #news_sub,
    body#federal #search_sub {
    display: none;
    }
    body#projects #home_sub,
    body#projects #company_sub,
    body#projects #services_sub,
    body#projects #federal_sub,
    body#projects #publications_sub,
    body#projects #news_sub,
    body#projects #search_sub {
    display: none;
    }
    body#publications #home_sub,
    body#publications #company_sub,
    body#publications #services_sub,
    body#publications #federal_sub,
    body#publications #projects_sub,
    body#publications #news_sub,
    body#publications #search_sub {
    display: none;
    }
    body#news #home_sub,
    body#news #company_sub,
    body#news #services_sub,
    body#news #federal_sub,
    body#news #projects_sub,
    body#news #publications_sub,
    body#news #search_sub {
    display: none;
    }
    body#search #home_sub,
    body#search #company_sub,
    body#search #services_sub,
    body#search #federal_sub,
    body#search #projects_sub,
    body#search #publications_sub,
    body#search #news_sub {
    display: none;
    }

    #wrap {
    padding: 0;
    border: 1px solid #ccc;
    position: relative;
    margin: 0 auto;
    font-size: 95%;
    text-align: left;
    width: 781px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 761px;
    }
    html>body #wrap {
    width: 761px;
    }
    #logo {
    height: 76px;
    text-indent: -5000px;
    background: url(img/header.jpg) no-repeat;
    margin: 0;
    }
    #main_menu {
    float: left;
    width: 767px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 761px;
    margin: 0 0 -1px 0;
    padding: 3px 0;
    list-style: none;
    font-size: 90%;
    text-transform: uppercase;
    }
    html>body #main_menu {
    width: 761px;
    }
    #main_menu li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #main_menu a {
    padding: 6px 12px 6px 12px;
    text-decoration: none;
    font-weight: bold;
    }
    #main_menu a.selected, #main_menu a:hover{
    color: #ffc;
    background: #042d67;
    }
    #submenu ul {
    margin: 0;
    padding: 4px 0 3px 0;
    clear: both;
    list-style: none;
    background: #9cf url(img/sub_menu.jpg) repeat-x top left;
    }
    #submenu li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #submenu a {
    padding: 0 12px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    }
    #submenu a:active {
    color: #ffc;
    }

    #content {
    /*border: 1px solid #000;*/
    clear: left;
    }
    #footer {
    /*border: 1px solid #000;*/
    background: #ccc url(img/footer.jpg) repeat-x;
    height: 52px;
    }
    </style>
    </head>
    <body id="services">
    <div id="wrap">
    <h1 id="logo">Hydrosphere Resource Consultants</h1>
    <ul id="main_menu">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="selected">Company</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Federal Contracting</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Search</a></li>
    </ul>
    <div id="submenu">
    <ul id="home_sub">
    </ul>
    <ul id="company_sub">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Employment</a></li>
    <li><a href="#">Hydrodata</a></li>
    </ul>
    <ul id="services_sub">
    <li><a href="#">Water Resource Engineering</a></li>
    <li><a href="#">Water Resource Planning and Management</a></li>
    <li><a href="#">Environmental Quality</a></li>
    <li><a href="#">Cross Discipline</a></li>
    </ul>
    <ul id="federal_sub">
    </ul>
    <ul id="projects_sub">
    </ul>
    <ul id="publications_sub">
    </ul>
    <ul id="news_sub">
    </ul>
    <ul id="search_sub">
    </ul>
    </div>
    <div id="content">
    Content
    </div>
    <div id="footer">
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. It's more semantic since the sub navigation is nested under the main navigation.

    You should also consider using the definition list <dl> html element as it already has two levels built into it - a definition term <dt> and definition description <dd>. Just put an unordered list into a <dd> and it'll make contextual selection in your css a bit handier. It's probably just as, if not more, semantic.
    http://www.w3.org/TR/html4/struct/lists.html#edef-DL

    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" xml:lang="en" lang="en">
    <head>
    	<title>css menu test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css" media="screen">
    
    		#nav1 ul{
    			list-style:none;
    		}
    		#nav1 li{
    			float:left;
    			width:5em;
    			background:#cef;
    		}
    		#nav1 li ul {
    			position:absolute;
    			display:none;
    			top:100%;
    			left:0;
    			background:#eef;
    
    		}
    		#nav1 li > ul{
    			top: auto;
    			left:auto;
    		}
    
    		#nav1 li:hover ul, #nav1 li.over ul{display:block;}
    		#nav1 li ul li{background:none; float:left; }
    	</style>
    </head>
    
    <body><div id="header">
    <ul id="nav1">
    	<li><a href="#">List 1</a>
    		<ul>
    			<li><a href="#">List 1 item</a></li>
    			<li><a href="#">List 1 item</a></li>
    			<li><a href="#">List 1 item</a></li>
    			<li><a href="#">List 1 item</a></li>
    		</ul>
    	</li>
    	<li>List 2
    		<ul>
    			<li><a href="#">List 2 item</a></li>
    			<li><a href="#">List 2 item</a></li>
    			<li><a href="#">List 2 item</a></li>
    			<li><a href="#">List 2 item</a></li>
    			<li><a href="#">List 2 item</a></li>
    		</ul>
    	</li>
    	<li>List 3
    		<ul>
    			<li><a href="#">List 3 item</a></li>
    			<li><a href="#">List 3 item</a></li>
    			<li><a href="#">List 3 item</a></li>
    			<li><a href="#">List 3 item</a></li>
    			<li><a href="#">List 3 item</a></li>
    		</ul>
    	</li>
    </ul>
    
    </div>
    
    </body>
    </html>
    Caveat: This is not a solution, it'll just get you started. It's pretty buggy. It'll work under firefox as is but it's not exactly as I imagine you want it. Also, it won't work under IE without a tiny bit of javascript from an article called Suckerfish Drop Downs. You'll find it pretty easily on www.alistapart.com.

    Hope that helps,
    John

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Denver
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Don't need a rollover

    I see how this would work, but I only need a tabbed effect, not a rollover. Any other suggestions?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Denver
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is what I'm looking for...

    I found a great starting point here:

    http://www.kalsey.com/tools/csstabs/

  5. #5
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Super. Sorry for neglecting ya! I'll be sure to book mark that one.


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
  •