Comment afficher le menu avec un élément actif avec SÈCHE?
Je tiens à rendre un constructions comme:
<a href='/home'>Home</a>
<span class='active'>Community</span>
<a href='/about'>About</a>
Où Communauté est l'élément de menu sélectionné. J'ai un menu avec des options pour plusieurs modèles, mais je ne voudrais pas créer des combinaisons pour chaque modèle:
<!-- for Home template-->
<span class='active'>Home</span>
<a href='/comminuty'>Community</a>
<a href='/about'>About</a>
...
<!-- for Community template-->
<a href='/home'>Home</a>
<span class='active'>Community</span>
<a href='/about'>About</a>
...
<!-- for About template-->
<a href='/home'>Home</a>
<a href='/community'>Community</a>
<span class='active'>About</span>
Nous disposons en permanence de la liste des éléments de menu, donc, il peut être plus efficace de façon à ne créer qu'un seul généralisée de la structure de menu menu rendu avec option pour le modèle.
Par exemple, il pourrait être une balise qui permet de le faire.
Vous devez vous connecter pour publier un commentaire.
Trouvé une autre façon de faire, assez élégant grâce à cette réponse : https://stackoverflow.com/a/17614086/34871
Donné un modèle d'url tels que:
my_view_name
est disponible pour le modèle par le biais derequest
( rappelez-vous, vous devez utiliser un RequestContext - ce qui est implicite lors de l'utilisation de render_to_response )Ensuite les éléments de menu peuvent ressembler à :
etc.
De cette façon, l'url peut changer et il fonctionne toujours si les paramètres d'url varier, et vous n'avez pas besoin de tenir une liste des éléments de menu d'ailleurs.
request.resolver_match.url_name
ne retourne pas des espaces de nom.request.resolver_match.view_name
pour des espaces de nom{% else %}
balise de modèle suffirait:<li class="{% if request.resolver_match.url_name == 'home' %} nav-item active {% else %} nav-item {% endif %}"> <a href={% url 'home' %} class='nav-link'><span>Home</span></a> </li>
À l'aide de balise de modèle
Vous pouvez simplement utiliser le modèle suivant tag:
Donc, vous avez votre modèle:
En utilisant uniquement le HTML & CSS
Il y a une autre approche, en utilisant uniquement le HTML & CSS, que vous pouvez utiliser dans n'importe quel cadre ou les sites statiques.
Considérant que vous avez un menu de navigation comme celui-ci:
Créer des modèles de base, une pour chaque session de votre site, comme par exemple:
Tous ces modèles s'étendant
base.html
avec un bloc "section", comme par exemple:Puis, prenant le
base_blog.html
à titre d'exemple, vous devez disposer des éléments suivants:Maintenant, il est facile de définir l'actived élément de menu à l'aide de CSS:
pattern = '^' + reverse(pattern_or_urlname) + '$'
.{% active '^/regex/' %}
. Je pense que nous devons revenir à votre modifier. 😉exact
paramètre à laactive
tag, l'ajout d'une fuite$
pour la regex, parce que quand vous êtes de liaison à l'indice de l'url '/', le lien n'est toujours actif, puisque toutes les url de commencer avec/
Je l'ai trouvé simple et élégant à SEC de la solution.
C'est le bout de code:
http://djangosnippets.org/snippets/2421/
{% extends "includes/tabs.html" %}
pour créer des mises en page souhaitée?Vous pourriez faire une variable de contexte
links
avec le nom, l'URL et si c'est un élément actif:Si ce menu est présent sur toutes les pages, vous pouvez utiliser un contexte de processeur:
Puis, dans votre fichier de paramètres, ajouter cette fonction à
TEMPLATE_CONTEXT_PROCESSORS
comme suit:path.to.where.that.function.is.located.menu_links
. Cela signifie que la fonctionmenu_links
sera appelée pour chaque modèle et cela signifie que la variablelinks
est disponible dans chaque modèle.name
est le nom du lien (par exemple, à la Maison), laurl
est l'URL où le lien va etactive
est de savoir si la page est actuellement active. Vous pouvez calculer ce pour chaque page et vous obtiendrez une liste de liens, tels que[("Home", "/home", True), ("Community", "/community", False), ("About", "/about", False)]
.Je suis venu avec une façon d'utiliser le bloc des balises dans le menu contenant du modèle parent pour obtenir quelque chose comme cela.
base.html
- le modèle parent:about.html
- modèle pour une page spécifique:Comme vous pouvez le voir, la chose qui varie entre les différents modèles de page est le nom du bloc contenant
active
.contact.html
utilisation demenu_contact_class
, et ainsi de suite.Un avantage de cette approche est que vous pouvez avoir plusieurs sous-pages avec le même élément de menu actif. Par exemple, une page peut avoir des sous-pages donnant des informations sur chaque équipe des membres d'une société. Il pourrait être intéressant d'avoir le menu de l'élément de rester actif pour chacun de ces sous-pages.
En supposant que la valeur liquidative de l'élément est un lien avec la même URL de la page en cours, vous pouvez simplement utiliser JavaScript. Voici une méthode annotée que j'utilise pour ajouter une
class="active"
à unli
dans un menu de navigation avecclass="nav"
:Cette méthode signifie que vous pouvez simplement pop dans votre modèle de base une fois et l'oublier. Pas de répétition, et pas de manuel de spécifications de l'URL de la page dans chaque modèle.
Une mise en garde: de toute évidence, cela ne fonctionne que si le
url
trouvé correspond à un lien de navigationhref
. Il serait en outre possible de spécifier un couple de spécial en cas d'utilisation dans le JS, cible ou un autre parent de l'élément en tant que de besoin.Voici un exécutable exemple (gardez à l'esprit, des extraits de courir sur StackSnippets):
JS:
CSS:
HTML:
Ici ist ma solution:
Basé sur @vincent en réponse, il y a un moyen plus facile de le faire sans vous embêter avec django url modèles.
L'actuel chemin de demande peuvent être vérifiées par le rendu de l'élément de menu chemin, et si elles correspondent, puis c'est l'élément actif.
Dans l'exemple suivant j'utilise django-mptt pour rendre le menu, mais on peut le remplacer
node.path
avec chaque élément de menu chemin.J'ai couru dans ce défi, aujourd'hui, avec comment activer dynamiquement une "catégorie" dans une barre latérale. Les catégories ont des limaces, qui sont de la DB.
Je l'ai résolu en vérifiant slug de la catégorie a dans le chemin d'accès actuel. Les limaces sont uniques (pratique courante) donc je pense que cela devrait fonctionner sans conflits.
Exemple complet de code de la boucle pour obtenir les catégories et activer l'actuel.
amazing
, et l'autre étantamazing_stuff
. L'unique contrainte est satisfaite, et encorecategory.slug in request.path
sera vrai sur les deux pages pouramazing
.Je suis en utilisant un plus facile et pur CSS solution. Il a ses limites, dont je sais et je peux vivre avec, mais il évite maladroit CSS sélecteurs de classe, comme ceci:
Car un caractère d'espace avant
active
manque le sélecteur de classe est appeléeitemactive
au lieu deitem active
et ce n'est pas trop difficile de se tromper comme ça.Pour moi cette pure CSS solution fonctionne beaucoup mieux:
Avis: Ceci fonctionne même si l'URL a d'autres composants de chemin, parce qu'alors
href
correspond également à la partie. Qui pourrait éventuellement causer des collisions " avec plus d'un match, mais assez souvent qu'il fonctionne, tout simplement parce que, bien structurée sites web une "sous-répertoire" d'une URL est généralement un enfant de l'élément de menu sélectionné.