SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making tabbed navigation?! Help!

    Okay so I am trying to understand how to make tabbed navigation. I have searched a few sites and tried to follow along but I really don't understand it. I was wondering if someone knew a site where they explain how to make tabbed navigation with CSS for dummies like me that can't understand? Please help me!! This is bugging me so much, I have spent hours trying to figure it out... Thanks!!!!!!!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you mean horizontal navigation menus? I'm assuming you don't mean dropdowns since you didn't say you wanted one.

    You basically just create a <ul> and then the children are standardly <li></li> with anchors inside that, So a 3 item list would be
    Code:
    <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    </ul>
    Then to get them on the same line, just float the <li> (float:left) and then assign a width if you please. Style aesthetically as you want
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    The way I learned to do them is to Google "css tab navigation menu" or something similar, find one I liked, and deconstruct it to see if I could figure out how they did it.

  4. #4
    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)
    Hi,
    Here is one I put together a while back for javascript tab nav divs.

    The concept would be the same without the js. The tabs would just link to another page and the .current class would be set respectively on the anchor of that page.

    Here is a reduced example of the link above without the js or side columns. By the way, the side columns were the reason I had centered the tabs. Inline-block was used on the li in order to float the anchors which killed some IE bugs.

    If you don't need the tabs centered you can just float the li.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Tabbed Nav Menu</title>
     
    <style type="text/css">
    body {
        font-size:100%;
        background:#CCC;
        margin:0;
        padding:0 0 20px;/*IE6/7 need this in place of #wrapper bottom margin*/
    }
     
    /*==== Begin Main Layout ====*/
    #wrapper {
        width:900px;
        margin:20px auto 0;
        background:#DDD;
        border:1px solid #000; 
    }
    #header {
        height:5em;
        background:#565656;
        text-align:center;
        color:#FFF;
    }
     
    /*=== Tabbed Nav Styles ===*/
    .tabs {
        width:100%;/*haslayout*/
        margin:0;
        padding:0;
        text-align:center;
        background:#333;
        border-bottom:1px solid #000;
    }
    .tabs li {
        display: -moz-inline-box;/* for FF2 (inline-box used for shrink wrapping)*/
        display:inline-block;/* for modern browsers */
        vertical-align:bottom;/* important */
        list-style:none;
        border:1px solid #000;
        border-bottom:none;
    }
    * html .tabs li {display:inline;margin:0 2px;}/* inline-block trip for IE6 */
    *+html .tabs li {display:inline;margin:0 2px;}/* inline-block trip for IE7 */
     
    .tabs a {
        float:left;/* IE6/7 haslayout*/
        text-decoration: none;
        padding:2px 10px;
        background:#99C;
        font-weight:bold;
        font-size:.8em;
        color:#000;
    }
    .tabs a:hover {
        background:#CDF;
        color:#000;
    }
    .tabs a.current {
        position:relative;/*IE6*/
        margin-bottom:-1px;/*the trick*/
        background:#FFF !important;
        border-bottom:1px solid #FFF;/*the trick*/
        color:#000;
    }
     
    /*=== Begin Content ===*/
    #content {
        width:100%;/*haslayout*/
        padding-top:.5em;
        border-bottom:1px solid #000;
        background:#FFF;
    }
    #footer {
        clear:both;
        height:1.75em;
        line-height:1.75em;
        background:#333;
        color:#FFF;
    }
    /*=== Demo Typography ===*/
    h1,h2,h3,p{margin:0 .5em .5em; font-size:1.5em;}
    h1{padding-top:.3em; margin-bottom:.15em}
    h2{font-size:1.2em;}
    h3{font-size:1.1em;}
    p{font-size:1em;}
     
    #footer p{
        margin:0;
        font-size:.8em;
        font-weight:bold;
        text-align:center;
    }
     
    </style>
    </head>
    <body>
     
    <div id="wrapper">
        <div id="header">
            <h1>Centered Tabbed Nav Menu</h1>
        </div>
        <ul class="tabs">
            <li><a class="current" href="#">Welcome</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Recent News</a></li>
        </ul>     
        <div id="content">   
            <p>Lorem ipsum dolor sit amet consectetuer velit dui Nam et aliquet. Dignissim felis est Sed ut id Vestibulum Nulla dapibus tellus ut. Justo Curabitur eget eros id Curabitur malesuada Curabitur Morbi convallis et. Vitae Nunc nascetur vitae nunc dui lacus netus interdum nibh scelerisque. Nam Curabitur est magnis et id.</p>
            <p>Netus non turpis at nunc pretium Donec justo vitae porttitor et. Metus Pellentesque pellentesque et nunc eros laoreet senectus lacinia pede dui. Egestas lacus et Duis gravida urna tempor diam Curabitur nisl risus. Lobortis nec eget lacus adipiscing rutrum lacus ac Duis Morbi tincidunt. Libero adipiscing Quisque dui pulvinar egestas Suspendisse turpis Vestibulum Nulla amet. Malesuada justo elit Aliquam Nullam sodales tincidunt.</p>
            <p>Non eget facilisi nec tellus non quis justo ante rhoncus pede. Vitae vitae wisi lobortis Nulla amet wisi iaculis dui ac convallis. Pede pretium eleifend augue vel vitae ut turpis tempus facilisis Curabitur. At netus ac fringilla est elit eget urna Vivamus Curabitur In. Auctor vel a pellentesque risus tortor at sit Vivamus interdum sem. Tortor mi quam.</p>
        </div>
        <div id="footer">
            <p>your copyright &copy; 2006-2010, &amp; other footer stuff here</p>
        </div>
    </div><!--end wrapper-->
     
     
    </body>
    </html>

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    ...or with only css

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    "Tabbed navigation" is one of those terms that mean many things... kinda like, "javascript slider" seems to refer to a lot of different things.

    This HTMLdog tutorial seems to mention "tabs" in various contexts... the bottom example, the Sliding Doors one, seems to show what I think of when people say "tabs". I think of those manilla folders with the little tabs sticking out.


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
  •