Lista desordenada: enumera la posición del elemento

Por el momento, tengo un sitio web con 5 páginas y la navegación principal se muestra usando una lista desordenada. Lo que bash lograr es que la página “activa” se muestre primero en la lista.

Por ejemplo, si tengo una de estas páginas: “Inicio | Acerca de | Contacto | Blog”. Cuando estás en la página de contacto, esto debería pasar al principio de la lista, por lo que el menú se vería así: “Contacto | Inicio | Acerca de | Blog”.

Lo que me causa problemas es que el menú se está incluyendo a través de php, por lo que solo hay un menú para todas las páginas y, a través de PHP, lo hice para que agregue una clase “activa” al elemento del menú de la página actual.

No estoy seguro de cuál sería la mejor solución para esto y realmente agradecería cualquier ayuda.

Editar:

Esta es la página de navegación que se incluye en cada página:

 

Aquí hay una forma pura de CSS para hacerlo utilizando el pedido de Flexbox.

enter image description here

 ul { … display: flex; flex-direction: column; } li[class=active] { order: -1; … } 

Demostración: http://codepen.io/antibland/pen/ZWjdqL

Soporte: IE10 +, Firefox, Chrome

Jsfiddle link

jQuery:

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

HTML

 
  • Home
  • Contact
  • About
  • Blog

Podrías hacer algo como esto:

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