Ungeordnete Liste - Position des Eintrags

Question

Im Moment habe ich eine Website mit 5 Seiten und die Hauptnavigation wird mit einer ungeordneten Liste angezeigt. Was ich versuche zu erreichen ist, dass die "aktive" Seite zuerst in der Liste angezeigt wird.

Zum Beispiel, wenn ich eine dieser Seiten habe: "Home | Über | Kontakt | Blog". Wenn Sie sich auf der Kontaktseite befinden, sollte diese an den Anfang der Liste verschoben werden. Das Menü würde dann so aussehen: "Kontakt | Startseite | Über | Blog".

Was mich Probleme verursacht ist, dass das Menü durch PHP enthalten ist, so gibt es nur ein Menü für alle Seiten und durch PHP habe ich es so gemacht, dass es eine "aktive" Klasse zum aktuellen Seitenmenüelement hinzufügt .

Ich bin nicht wirklich sicher, was die beste Lösung dafür wäre und würde jede Hilfe wirklich schätzen.

Edit:

Dies ist die Navigationsseite, die in jede Seite enthalten ist wird:

  <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> 

Answer 1

Hier ist eine reine CSS Art und Weise, es zu tun Flexbox Bestellung verwenden.

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

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

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

Support: IE10 +, Firefox, Chrome

Answer 2

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> 

Answer 3

Man könnte so etwas tun:

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