How to move parent li to end of child ul

1 Views

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:

Read More
<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?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Since this is a stylistic change, and not looking to reorder the DOM for semantic reasons, I think the js solution wouldn’t be the best approach. Better to keep it in CSS, keeping the markup intact.

    Two ways to do it:

    Flexbox:

    #generalinfo{
  display: flex;
  flex-direction: column-reverse;
}

    CSS Grid:

    #generalinfo{
  display: grid;
}

.cat{
  grid-row: 2;
}

  2. $(".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).