WordPress.org

Support

Support » Plugins and Hacks » Dynamic CSS PHP Menu for “you’re here” effect

Dynamic CSS PHP Menu for “you’re here” effect

  • 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 -->");

    ?>

Viewing 1 replies (of 1 total)
  • 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

Viewing 1 replies (of 1 total)
  • The topic ‘Dynamic CSS PHP Menu for “you’re here” effect’ is closed to new replies.
Skip to toolbar