mettre en surbrillance le menu de navigation pour la page actuelle
Dans une page avec des liens de navigation, je veux que le lien de la page actuelle soit en surbrillance, juste comme ceci:
Le lien " Attributs HTML " est mis en évidence (gras) car ce lien vous mènera à la page en cours.
Je sais que cela peut être implémenté manuellement (vient juste de mettre en évidence le lien correspondant, mais existe-t-il un moyen intelligent? De sélectionner le bon lien de manière dynamique et automatique?
Vous pouvez définir l'id du corps de la page sur une valeur représentant la page en cours. Ensuite, pour chaque élément du menu, vous définissez une classe spécifique à cet élément de menu. Et dans votre CSS, vous pouvez configurer une règle qui mettra en évidence l'élément de menu en particulier ...
Cela n'avait probablement aucun sens, alors voici un exemple:
<body id="index">
<div id="menu">
<ul>
<li class="index" ><a href="index.html">Index page</a></li>
<li class="page1" ><a href="page1.html">Page 1</a></li>
</ul>
</div> <!-- menu -->
</body>
Dans la page1.html, définissez l'ID du corps sur: id="page1".
Enfin, dans votre CSS, vous avez quelque chose comme:
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
Vous devez modifier l'ID de chaque page, mais le code CSS reste identique, ce qui est important, car le code CSS est souvent mis en cache et peut nécessiter une actualisation forcée pour être mis à jour.
Ce n'est pas dynamique, mais c'est une méthode simple à faire, et vous pouvez simplement include le menu html à partir d'un fichier de modèle utilisant PHP ou similaire.
CSS:
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript:
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".topmenu a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
//for making parent of submenu active
$(this).closest("li").parent().parent().addClass("active");
}
});
});
</script>
Code HTML:
<div class="topmenu">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="NewsLetter.aspx">Newsletter</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Mail</a></li>
<li><a href="#">Service</a></li>
<li style="border:none;"><a href="#">HSE</a></li>
<li><a href="#">MainMenu2</a>
<ul>
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
</ul>
</li>
</ul>
</div>
Il me semble que vous avez besoin du code actuel en tant que ".menu-current css", je demande le même code qui fonctionne comme un charme, vous pouvez essayer quelque chose comme cela pourrait être une configuration
a:link, a:active {
color: blue;
text-decoration: none;
}
a:visited {
color: darkblue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
div.menuv {
float: left;
width: 10em;
padding: 1em;
font-size: small;
}
div.menuv ul, div.menuv li, div.menuv .menuv-current li {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 5px;
font-weight: normal;
}
div.menuv ul ul {
padding-left: 12px;
}
div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
display: block;
text-decoration: none;
padding: 2px 2px 2px 3px;
border-bottom: 1px dotted #999999;
}
div.menuv a:hover, div.menuv .menuv-current li a:hover {
padding: 2px 0px 2px 1px;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.menuv .menuv-current {
font-weight: bold;
}
div.menuv .menuv-current a:hover {
padding: 2px 2px 2px 3px;
border-left: none;
border-right: none;
border-bottom: 1px dotted #999999;
color: darkblue;
}
Css classes sont ici
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Faites votre HTML comme ça, Définissez URL comme ID
<div class="my_menu" id="index-url"><a href="index-url">Index</a></div>
<div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>
Ici, écrivez javascript, mettez ce javascript après le code HTML.
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
<script id="add-active-to-current-page-nav-link" type="text/javascript">
function setSelectedPageNav() {
var pathName = document.location.pathname;
if ($("nav ul li a") != null) {
var currentLink = $("nav ul li a[href='" + pathName + "']");
currentLink.addClass("active");
}
}
setSelectedPageNav();
</script>
Veuillez regarder ce qui suit:
Voici ce qui fonctionne:
1.) les boutons du menu supérieur sont visibles et sont mis en surbrillance correctement
2.) Les boutons du menu sub ne sont visibles que lorsque vous cliquez sur le menu top
Voici ce qui a besoin de travail:
1.) lorsque le sous-menu est cliqué, recherche d'une nouvelle page pour garder le sous-menu sélectionné ouvert (je mettrai en surbrillance le bouton du sous-menu sélectionné pour plus de précisions sur la navigation)
Veuillez consulter le code ici: http://jsbin.com/ePawaju/1/edit
ou ici: http://www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Dois-je mettre ce script dans la section head? Où est le meilleur endroit?
<div class="left">
<nav class="vmenu">
<ul class="vnavmenu">
<li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
</li>
</ul>
<ul class="Top1 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a>
</li>
</ul>
<ul class="vnavmenu">
<li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
</li>
</ul>
<ul class="Top2 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
</li>
</ul>
</nav>
JQuery est nouveau pour moi, toute aide serait grandement appréciée:) sous-menu var;
$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {
if (elems == 1) {
if (!visible) $refClass.slideDown('fast');
}
elems--;
});
if (visible) $('#breadcrumbs-pc').animate({
'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
'margin-top': '5rem'
}, 100);
});
Je gérerais normalement ceci du côté serveur de choses (ce qui signifie PHP, ASP.NET, etc.). L'idée est que, lorsque la page est chargée, le serveur contrôle le mécanisme (éventuellement en définissant une valeur CSS) qui est reflété dans le code HTML résultant visualisé par le client.
Essayez d'utiliser
a:active{
font-weight: bold;
}
dans votre fichier css.
J'utilise habituellement un cours pour y parvenir. Il est très simple d'implémenter n'importe quoi, des liens de navigation, des hyperliens, etc.
Dans votre document CSS, insérez:
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
Cela fera en sorte que l'état de survol des éléments de la liste comporte du texte rouge et un arrière-plan blanc. Associez cette classe de courant à n’importe quel lien de la page "courante" pour afficher les mêmes styles.
Je suis votre insertion HTML:
<nav>
<ul>
<li class="current"><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
</nav>
Vous pouvez utiliser Javascript pour analyser votre DOM et surligner le lien avec la même étiquette que les premières balises h1. Mais je pense que c'est exagéré =)
Il serait préférable de définir une variable contenant le titre de votre page et de l’utiliser pour ajouter une classe au lien correspondant.
JavaScript:
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS:
.active{
color: #fff;
background-color: #080808;
}
HTML:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>