Results 1 to 3 of 3

Thread: need help in tabbed menu script

  1. #1
    Join Date
    Feb 2009
    Posts
    156
    Thanks
    0
    Thanked 4 Times in 3 Posts

    Default need help in tabbed menu script

    hi..
    i am working on a web site.... its navigation bar is kept in a separate file which i added in everypage...

    i click on the tabs to navigate pages,

    but how i can make the tabs to current to make its different look on corrent page?


    i.e. when i visit home.php, HOME tab must b current ( special look)
    when i click on aboutme.php page ABOUT tab must b current



    thaks in advanced... plz suggest me

  2. #2
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    is there any code or link that we can see?
    _____________________

    David Demetrius // davejob
    _____________________

  3. #3
    Join Date
    Feb 2009
    Posts
    156
    Thanks
    0
    Thanked 4 Times in 3 Posts

    Default

    navigation bar code :


    <ul class="tab">
    <li class="active"><a href="home.html"><span>Home </span></a></li>
    <li><a href="community.html"><span>Community </span></a></li>
    <li><a href="blog.html"><span>Blog </span></a></li>
    <li><a href="messages.html"><span>Messages </span></a></li>
    <li><a href="contact.html"><span>Contact </span></a></li>
    </ul>


    ---------------------------------------------------------------------

    css code :

    ul, li{border:0; margin:0; padding:0; list-style:none;}
    ul{
    border-bottom:solid 1px #DEDEDE;
    height:29px;
    padding-left:20px;
    }
    li{float:left; margin-right:2px;}

    .tab a:link, .tab a:visited{
    background:url(img/tab-round.png) right 60px;
    color:#666666;
    display:block;
    font-weight:bold;
    height:30px;
    line-height:30px;
    text-decoration:none;
    }
    .tab a span{
    background:url(img/tab-round.png) left 60px;
    display:block;
    height:30px;
    margin-right:14px;
    padding-left:14px;
    }
    .tab a:hover{
    background:url(img/tab-round.png) right 30px;
    display:block;
    }
    .tab a:hover span{
    background:url(img/tab-round.png) left 30px;
    display:block;
    }

    /* -------------------------------- */
    /* ACTIVE ELEMENTS */
    .active a:link, .active a:visited, .active a:visited, .active a:hover{
    background:url(img/tab-round.png) right 0 no-repeat;
    }
    .active a span, .active a:hover span{
    background:url(img/tab-round.png) left 0 no-repeat;
    }




    ----------------------------------------------------------



    now i want to change active class to every active page.......

    cz m navigation bar is saved in a separate file

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
  •