Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm working on translating a site from HTML/CSS to Wordpress, and I've come across an issue. In the spirit of keeping the site fully customizable from the dashboard, I've been using Wordpress' default menu system for creating my navigation, but I can't get it to do what it would in hard coded HTML. I need to move the parent list item (parent's a element) below it's child ul as shown below:

<li id="generalinfo">
    <ul>
        <li><a href="#">About the Festival</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <a class="cat" href="#">General Info</a>
</li>

But by default, Wordpress forces it to do this instead:

<li id="generalinfo">
    <a class="cat" href="#">General Info</a>
    <ul>
        <li><a href="#">About the Festival</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Sponsors</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</li>

It is vital for the design that the link come after the unordered list, as it will be a descending banner like this:

http://i.imgur.com/oFRJdl7.png

The graphic elements are background elements with hover states. This is what they would look like dropped down, the home button on the left is an example of the banner fully raised. This is why it's important to have the parent link element displayed at the end.

Ideas?

share|improve this question
1  
Very interesting problem. I guess you have to use a custom walker and build a custom method display_element(). –  toscho Feb 4 '13 at 23:58
1  
Is the parent link the icon? Why can't you use absolute positioning and bottom padding to do this? –  sanchothefat Feb 5 '13 at 1:18
1  
This is an interesting problem but +1 on @sanchothefat looking for a CSS way to do this. Playing with source order like this is an invitation for accessibility problems. –  mrwweb Feb 5 '13 at 1:20
    
@sanchothefat Yes, the parent link is the icon, but absolute positioning wouldn't work correctly as the banners move from a hidden position, revealing the children. The position needs to be relevant to the banner itself, not the page. It would fail to render correctly in some browsers. –  Dustin Armstrong Feb 5 '13 at 1:40
    
@DustinArmstrong elements are positioned absolutely according to the nearest parent with position: relative; so you'd only have make the banners position: relative; for it to work –  sanchothefat Feb 6 '13 at 10:48

1 Answer 1

$(".cat").each(function(){
    $(this).appendTo($this.parent(".li"));
    $(this).remove();
}
);

Should do the trick. As far as accessibility is concerned, most modern crawlers (read Googlebot) will process and crawl this as it doesn't involve a trigger to process (see - http://www.thoughtspacedesigns.com/blog/search-engine-optimization/whats-this-googlebot-processes-javascript/). Much more fluid for the sake of keeping with responsive design. I avoid absolute positioning like the plague for most purposes (unless contained in a position:relative container).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.