WordPress.org

1. timster
   Member
   Posted 2 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
   Theme Diva & Mod
   Posted 2 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 2 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 2 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 2 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.