Tabbed navigation.

  • So I am porting https://www.oswd.org/design/preview/id/2614 that over to WordPress. I have it entirely done aside from one thing, the navigation. Specifically the active class.

    I’d like to have it so I can enable the active class on a tab if it is chosen. I just can’t see a way. If anyone has an experience with this or may have some ideas, I’d be happy to hear from them.

    And if I wasn’t descriptive enough, just say. I’m pretty tired.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Are you using the list_pages tag, or hand coding it in?

    Thread Starter Koray

    (@koray)

    Well I was going to use list_pages but it didn’t seem like it was possible. If there is a way to hand code it I’m all ears.

    i have done something similar in my theme:

    https://wordpress.hotserv.dk/

    i use this in my header:

    <div id="header">
    <div id="headerimg">
    <h1><a>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>

    <?php //highlight 'Blog' if not Page
    if (is_page()) {
    $highlight = "page_item";
    } else {
    $highlight = "page_item current_page_item";
    }
    ?>

    <div id="supernavcontainer">
    <ul id="supernav">
    <li class="<?php echo $highlight; ?>"><a>">Blog</a>

    <li><?php wp_list_pages('title_li='); ?></li>
    </div>

    and the css:


    #supernavcontainer {
    position: absolute;
    top: 174px;
    left: 50%;
    width: 500px;
    height: 17px;
    margin: 0 0 0 -250px;
    padding: 6px 0 0;
    }

    #supernav
    {
    margin: 0;
    padding: 0;
    width: 500px;
    left: 0;
    text-align: center;
    color: #777;
    font: bold 12px Arial, Sans-Serif;
    letter-spacing: 0.07em;
    display: block;
    }

    #supernav li
    {
    display: inline;
    margin: 0 5px;
    padding: 0;
    text-transform: capitalize;
    }

    #supernav a
    {
    color: white;
    text-shadow: 0 0 2px black;
    padding: 5px 5px;
    }

    #supernav a:hover
    {
    background: url(/images/arrow.gif) bottom center no-repeat;
    text-decoration: none;
    border-bottom: none;
    }

    #supernavcontainer ul li a:hover {
    background: url(/images/arrow.gif) bottom center no-repeat;
    }

    #supernav .current_page_item a {

    background: url(/images/arrow.gif) bottom center no-repeat;
    text-decoration: none;
    }

    hope that helps

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Tabbed navigation.’ is closed to new replies.