WordPress.org

1. rob0210
   Member
   Posted 2 years ago #

   Hi all,

   Ok I am trying to create a site with a drop down navigation generated from the WordPress 'wp_list_pages' tag.

   I have got to a point now where I am pretty stuck on an element and my raw PHP knowledge is not strong enough to figure it out. I was really hoping I could get some help on the coding of this.

   What I am hoping to achieve...

   <ul>
      <li><a href=""><span>Parent Link1</span></a></li>
      <li><a href=""><span>Parent Link2</span></a></li>
      <li><a href=""><span>Parent Link3</span></a>
         <ul>
            <li><a href="">Child link1</a></li>
            <li><a href="">Child link2</a></li>
            <li><a href="">Child link3</a></li>
            <li class="sub-footer"></li>
         </ul>
      </li>
   </ul>

   Notice two main additional features to the standard WordPress generated list, the addition of a span to the parent navigation and the addition of a blank list item on the sub navigation. (This is so I can style a footer to the sub nav)

   So, I have managed to get this to a point. I have used a piece of code posted on a different thread to generate the 'spans' I use the following code for this:
   

   <?php
        $pages = wp_list_pages('echo=0&title_li');
        $pages = str_replace('">', '"><span>', $pages);
        $pages = str_replace('<span><a', '<a', $pages);
        $pages = str_replace('</a>', '</span></a>', $pages);
        echo $pages;
   ?>

   The main problem here is it adds a span to the Child sub navigation elements as well. This cannot stay like this due to some IE bugs about keeping elements active when hovering over spans.

   And I have been comepletly un-succesful at figuring out how to generate a single li at the bottom of the sub list.

   So if anyone can point me in the right direction or throw some code up to help me out it would be much appreciated.

   Thanks.

2. Mark / t31os
   Moderator
   Posted 2 years ago #

   Something looks off in the str_replace's to me, i could be wrong, but try this instead...

   <?php
   $tpages = wp_list_pages('title_li=&echo=0');
   $tpages = str_replace('<a href=','<span><a href=',$tpages);
   $tpages = str_replace('</a>','</a></span>',$tpages);
   echo $tpages;
   ?>

   The span should be placed before the link element (for validation purposes).

   The way you have it currently can be archieved with any str_replace... like so...

   <?php wp_list_pages('title_li=&link_before=<span>&link_after=</span>'); ?>

   Invalidations aside, the str_replace code i've given you shouldn't exhibit the problem you mentioned... we can tweak it if it does though... :) .. try it out!... ;)

3. rob0210
   Member
   Posted 2 years ago #

   Haha, you know what after I spent about 3 hours on this last night, I went to bed, got up this morning and thought...what if I move the span outside the href! That's freaky!

   As far as I am aware as I have used it before having a span inside an a href is perfectly valid, but your right it what you suggested could certainly fix my problem, even if it does not remove the span from the child element, it will def solve the hover pseudo issue in IE6. Will give it a whirl tonight and post up if it has worked! Thanks for your response t31os_!

4. Mark / t31os
   Moderator
   Posted 2 years ago #

   I think your previous code will match mroe cases, so you end with extra replacements where you don't want them, that's why i was a little more explicit with the ones provided above..

   The last response was suppose to read that your previous approach could be done without str_replace...

   Regardings the spans, i think you may be right, because span is another inline element, the invalidations arrive when you place block level elements inside inline elements...(not vice versa - that's valid)

   Get stuck again, post back... ;)

5. rob0210
   Member
   Posted 2 years ago #

   Hi, so I though I would post a response to say the majority of this issue has been resolved with the thanks of t31os_.

   The code posted successfully altered the span to outside the a href element, therefore relieving the bug in IE6 hover. Not figured out the issue with the specific class link on the footer of the sub nav...but guess thats for another day :) another happy customer.

   Closed!

6. Mark / t31os
   Moderator
   Posted 2 years ago #

   Wow, i read back my own posts and it's in part jibberish, lol.... blame the late nights...

   Glad you got there in the end...

   If you can show me the complete code (as is) as you use it i might be able to help with the remaining issue...

   :)

7. hanna08
   Member
   Posted 2 years ago #

   did you ever solve the drop down menu problem?

Topic Closed

This topic has been closed to new replies.