WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] wp_list_pages: how to pass menu_order as li class? (5 posts)

  1. timster
    Member
    Posted 4 years ago #

    Hello *!

    how can I add menu_order as a class to the list-items supplied by wp_list_pages, so they are able to be targeted from css???

    Background for this issue is that I am trying to style the list items depending if they are BEFORE or AFTER the current_page_item. On http://www.ecovenao.com/evaluation the secondary navigation should display a background image with a monkey-tail ABOVE the current_page_item and without the tail BELOW it. Simple css image overflow for list items is not working...

    Thanks a lot,
    timo,
    voluntary programmer in panama

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    how can I add menu_order as a class to the list-items supplied by wp_list_pages

    You can't add it to individual items - only as a wrapper div which wouldn't meet your needs.

    What about using .current_page_item:before and .current_page_item:after? That might work with the newer browsers.

  3. stvwlf
    Member
    Posted 4 years ago #

    I'd suggest a line or two of jQuery (javascript) code applying a class name to LI siblings that come after current_page_item

    see jQuery siblings(prev, siblings) function
    http://api.jquery.com/

  4. timster
    Member
    Posted 4 years ago #

    thanks esmi for your great idea!

    unfortunately :before and :after are rather to insert content before/after the applied element than to style surrounding list items; http://www.w3schools.com/CSS/CSS_pseudo_elements.asp.

  5. timster
    Member
    Posted 4 years ago #

    wow stvwlf!
    jQuery got the monkey-tail navigation working!
    thanks so much!!!

    here is my code as inspired by http://docs.jquery.com/Traversing/nextAll#expr:

    <?php wp_enqueue_script("jquery"); ?>
    
    <?php wp_head() ?>
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script>
      $(document).ready(function(){
        $("#sidebar_nav li.current_page_item").nextAll("li").addClass("after");
      });
      </script>

Topic Closed

This topic has been closed to new replies.

About this Topic