Resalte el elemento de menú actual en la barra lateral

Question

Estoy usando django con Twitter Bootstrap. Mi vista actual se parece a una de las examples provided. Mirando el ejemplo, uno puede imaginar que el usuario haga clic en uno de los enlaces en la barra lateral para ver diferentes vistas, cada una enmarcada con esta misma barra lateral. Uno podría imaginar que el enlace seleccionado y luego se destacó como el ejemplo utilizando el código:

<li class="active"><a href="/sample/link/here/">Link</a></li> 

La clase activa es preciso conectar al elemento de menú correcto. ¿Cómo podría asignar esta clase "activa" al elemento de menú correcto? Originalmente, He intentado utilizar una variable de mi vista para asignarlo con jQuery:

$(document).ready(function() { 
    $("#{{ current_view }}_nav").addClass('active'); 
}); 

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li> 

Esto parece engorroso sin embargo. Requiere que pase el id a la plantilla desde la vista. Muchos de los ids para administrar también. ¿Hay una forma mejor/más preferida para asignar esta clase activa?

Answer 1

creo que el uso de # para el href en el código de la muestra es la opacidad del tema. Supongo que su escenario del mundo real son los enlaces reales reales y los resaltan automáticamente en función de la URL activa. Si eso es correcto, entonces sólo hacer:

{% url something as url %} 
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li> 

Donde, "algo" es el nombre de un URLPATTERN o de puntos de la ruta de vistas, etc. Esto supone que está invirtiendo la dirección URL, obviamente, así que si está utilizando una URL estática, usted acaba de hardcode que:

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li> 

Answer 2

Hacer una fragmento de inserción para el menú:

<li class="{% if opt=='link1' %} active{% endif %}"><a href="#/?opt=link1">Link1</a></li> 
<li class="{% if opt=='link2' %} active{% endif %}"><a href="#/?opt=link2">Link2</a></li> 
<li class="{% if opt=='link3' %} active{% endif %}"><a href="#/?opt=link3">Link3</a></li> 
... 

incluirlo en su plantilla básica como:

{% include "menu.html" with opt=request.GET.opt %} 

No es necesario utilizar $ (document) ready (.. .) como ves.

no se olvide de añadir una petición a sus TEMPLATE_CONTEXT_PROCESSORS:

TEMPLATE_CONTEXT_PROCESSORS = (
    # ... 
    'django.core.context_processors.request', 
    # ... 
) 

Answer 3

Fwiw, la página de Twitter Bootstrap en sí tiene esta funcionalidad proporcionada por el uso de la Scrollspy plugin.

De lo contrario, podría simplemente escuchar un evento de clic en su menú.

$('.nav').on('click', 'li:has(a[href^="#"])', function (e) { 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 4

Si ha organizado su proyecto en una plantilla base.html que se extiende por otras plantillas, por ejemplo, appname/pagename.html, puede usar un enfoque centrado en la plantilla para resaltar el elemento de navegación activo.

Este enfoque ofrece algunas ventajas de desacoplamiento, que he mencionado en detalle al final de esta respuesta.

He encontrado que este enfoque es muy útil para manejar elementos de navegación amplios que permanecen iguales en la mayoría o la totalidad de un sitio. Probablemente no sea una solución adecuada para elementos de navegación más detallados, como la representación de una lista dinámica de elementos recopilados de su almacén de datos.

En su plantilla base.html, añadir un bloque a cada elemento de navegación, dando nombres únicos a los bloques:

<ul class="nav"> 
    <li class="{% block navbar_class-home %}{% endblock %}"> 
    <a href="#">Home</a> 
    </li> 
    <li class="{% block navbar_class-about %}{% endblock %}"> 
    <a href="#">About</a> 
    </li> 
    <li class="{% block navbar_class-pricing %}{% endblock %}"> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

En su plantilla appname/pagename.html, si quieres uno de los elementos de navegación a aparecer activo, anular el bloque apropiado usando active como contenido. Por ejemplo, para poner de relieve el "Acerca de" material:

{% block navbar_class-about %} active {% endblock %} 

Cuando se utiliza una vista que hace que esa plantilla, que va a render así:

<ul class="nav"> 
    <li class=""> 
    <a href="#">Home</a> 
    </li> 
    <li class=" active "> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

Esto proporciona una representación inicial que doesn' confía en JavaScript. (Puede modificar las clases de barra de navegación en su sitio utilizando JavaScript, si está haciendo una aplicación de una sola página.)

Para muchos (pero no todos) de los casos, esto puede ser una presentación mejor separación de la vista lógica:

• Puede modificar las vistas para adjuntar datos de navegación del sitio al contexto de la plantilla, pero al hacerlo combina la presentación con la capa de visualización y dificulta la creación de aplicaciones reutilizables o la integración de aplicaciones de terceros.

  La vista ya está seleccionando una plantilla con nombre, lo que significa que ya está pasando algo de información relacionada con la navegación a la capa de la plantilla. Eso puede ser todo lo que necesitas.

• Puede usar un procesador de contexto de plantilla para obtener información sobre la vista, pero esto solo mueve el acoplamiento fuerte a otra capa del sistema, en lugar de permanecer dentro de la capa de plantilla.

Answer 5

Mejor solución, con menos código. Woks bien con Bootstrap. Simplemente cambie la consulta "addClass" para seleccionar sus elementos de menú.

En Javascript, cree esta función:

var highlight_menu = function(path) { 
    /* Highlight current link */  
    $('.nav li').removeClass('active'); 
    $('.nav li:has(a[href="' + path + '"])').addClass('active') 
}; 

Por base.html, llamar a la función JS con la ruta actual:

<script> 
    highlight_menu('{{request.path}}'); 
</script>