WordPress.org

Ready to get started?Download WordPress

Forums

Dynamic CSS PHP Menu for "you're here" effect (2 posts)

  1. espek
    Member
    Posted 8 years ago #

    I found this simple and elegant solution to showing "current page" in a tabbed menu through use of CSS. The menu will add id=current_page to the unordered list item if it matches the name of the current page.

    I got it to work with static php pages, but not when it includes a WordPress page that uses "/?page_id=3" or "/?p=3".

    Can anybody look at this and see if you can get it to work?

    <?php

    $nav_options = array(
    "Home" => "/index.php",
    "Blog" => "/blog/index.php",
    "News" => "/news/index.php",
    "Resume" => "/resume/index.php",
    "Past Work" => "/portfolio/index.php",
    "Articles" => "/articles/index.php",
    "Downloads" => "/programming/index.php",
    "Links" => "/links/index.php"
    );

    // define our current location
    $current_url = $_SERVER['PHP_SELF'];

    // begin the navigation div and the top of the UL
    print("<!-- begin menu include -->
    <div id=\"navcontainer\">n
    <ul id=\"navlist\">n");

    // tabindex is set to "2" here, because my "skiplink" is set as "1"
    // more information on a skiplink can be found at
    // http://www.wac.ohio-state.edu/tutorials/section508/skipnav.htm
    // more information on tabindex can be found at
    // http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
    $tabindex = 2;

    // start the loop to display the options
    foreach($nav_options as $key => $val){

    // if the destination is NOT the same as the current location, make a link
    if($val != $current_url){
    print("<li><a href=\"$val\" tabindex=\"$tabindex\">$key</a> </li>");
    $tabindex++; // increment tabindex here
    }
    // otherwise, this means that the destination of the link is the same as current location
    // in which case we DO NOT want to create a link
    else{
    print("<li class=\"curr_loc\">$key</li>");
    }
    } // clode the foreach loop

    // close the navbar
    print("</ul>");
    print("</div><!-- end menu include -->");

    ?>

  2. cregy
    Member
    Posted 8 years ago #

    Hi

    Have you applied the technique to a website at all please? Is it possible to take this on one more step by letting the PHP figure out the current page and then show the links that correspond to that section?

    Thanks

    Rich

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags