CODEWITHSUNDEEP
phpjqueryhtmlcss
Bonzai
Bonzai

Reputation: 159

Unordered list - list item position

At the moment I have a website with 5 pages and the main navigation is being displayed using an unordered list. What I'm trying to achieve is for the "active" page to be displayed first in the list.

For example, if I have a these pages: "Home | About | Contact | Blog". When you're on the contact page, this should move to the top of the list, so the menu would than look like this: "Contact | Home | About | Blog".

What's causing me problems is that the menu is being included through php, so there is just one menu for all the pages and through PHP I have made it so that it adds an "active" class to the current page menu item.

I am not really sure what the best solution for this would and would really appreciate any help.

Edit:

This is the navigation page that's being included into each page:

            <nav class="large-nav">
              <ul>
                <li <?php echo ($activePage == 'ourStory') ? "class='active'" : ""; ?> ><a href="our_story.php" title="">OUR STORY</a></li>
                <li <?php echo ($activePage == 'services') ? "class='active'" : ""; ?> ><a href="services.php" title="">SERVICES</a></li>
                <li <?php echo ($activePage == 'projects') ? "class='active'" : ""; ?> ><a href="projects.php" title="">PROJECTS</a></li>
                <li <?php echo ($activePage == 'contact') ? "class='active'" : ""; ?> ><a href="contact.php" title="">CONTACT</a></li>
                <li <?php echo ($activePage == 'upload') ? "class='active'" : ""; ?> ><a style="margin-right: 0;" href="upload.php#top" title="">UPLOAD</a></li>
              </ul>
            </nav>

Upvotes: 1

Views: 289

Answers (3)

Andy Hoffman
Andy Hoffman

Reputation: 19109

Here is a pure CSS way to do it using Flexbox ordering.

enter image description here

ul {
  …
  display: flex;
  flex-direction: column;
}

li[class=active] {
  order: -1;
  …
}

Demo: http://codepen.io/antibland/pen/ZWjdqL

Support: IE10+, Firefox, Chrome

Upvotes: 4

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5640

You could do something like this :

$('.large-nav li').each(function() { 
    if($(this).find('a').attr('href') == location)
    {
        $('.large-nav ul').prepend($(this))
    }
})

Upvotes: 0

Murad Hasan
Murad Hasan

Reputation: 9583

Jsfiddle link

jQuery:

$(function(){
    $("li").on("click", function(){
        $('ul').prepend($(this))
    }) 
})

HTML

<ul>
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
</ul>

Upvotes: 0

Related Questions