Unordered list - list item position

Question

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.

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>

are these attributes stored in unordered list ? cant you place your active page one right on top of unordered list , I mean the top most index ? — Surya Prakash Patel, Apr 24 '16 at 17:22
Why don't you post the code for adding the "active" class? It will be easier to modify in order to answer your question. — BeS, Apr 24 '16 at 17:25

score 4 · Accepted Answer · answered Apr 24 '16 at 18:10

4

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

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

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

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

Support: IE10+, Firefox, Chrome

answered Apr 24 '16 at 18:10

Andy Hoffman

18,436
4
42
61

Murad Hasan · Answer 2 · 2016-04-24T17:52:23.263

0

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>

edited Apr 24 '16 at 17:52

answered Apr 24 '16 at 17:44

Murad Hasan

9,565
2
21
42

What do you mean I need that one ? Yeah its simpler; I remember being astonish when I first understood the true functioning of `append()/prepend()` – Baldráni Apr 24 '16 at 17:56
So you can do that one without any help. what you really want?? If you really mean that the included PHP file can't change from jQuery then its not good thinking. The first time PHP include the page and the active class, now you have to control the functionalities through jQuery like sorting done. – Murad Hasan Apr 24 '16 at 18:00
Im not the op dude. By the way your answer can't help him since the page is reloaded (I guess there is no Ajax call in it). – Baldráni Apr 24 '16 at 18:02
oops... Sorry. I misunderstood. – Murad Hasan Apr 24 '16 at 18:05

Baldráni · Answer 3 · 2016-04-24T17:59:24.467

0

You could do something like this :

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

edited Apr 24 '16 at 17:59

answered Apr 24 '16 at 17:54

Baldráni

5,332
7
51
79

Why compare it to location why not just use hasClass('active')? This code won't work without modifying the location object . – Edward Apr 24 '16 at 18:21
I tried it, it works... But you can use `hasClass('active')` aswell.. I dont think there is a difference. – Baldráni Apr 24 '16 at 18:25
Are you using the global location object when you are referring to location ? – Edward Apr 24 '16 at 18:33
@Edward yup indeed – Baldráni Apr 24 '16 at 18:35
Then aren't you comparing a string to an object ? Don't you want location.pathname? – Edward Apr 24 '16 at 18:46
As I've told you before this code is working I've tested it. You can add `.pathname` but you would have to compare it to : `'http://yourdomain.com'+location.pathname` – Baldráni Apr 24 '16 at 18:54

Unordered list - list item position

3 Answers3

Linked