mettre en surbrillance le menu de navigation de la page en cours

Dans une page avec des liens de navigation,je veux le lien de la page en cours sont mise en évidence,comme cela:

mettre en surbrillance le menu de navigation de la page en cours

Le lien "Attributs HTML" est mis en évidence(en gras) depuis ce lien va en prendre un à la page en cours.

Je sais que cela peut être mis en œuvre manuellement(juste la mise en évidence de la fonction de lien,mais est-il une façon intelligente? mettez en surbrillance le droit de lier dynamiquement et automatiquement?

source d'informationauteur hguser | 2011-01-07

  1. 23

    Vous pouvez définir l'id du corps de la page à une valeur qui représente la page en cours. Ensuite, pour chaque élément dans le menu, vous définissez une classe spécifique à l'élément de menu. Et dans votre CSS, vous pouvez définir une règle qui va mettre en surbrillance l'élément de menu...

    Qui n'a sans doute pas beaucoup de sens, donc 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 le page1.html, vous définissez l'id de l'organisme: id="page1".

    Enfin dans votre CSS, vous avez quelque chose comme ce qui suit:

    #index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

    Vous auriez besoin de modifier le code de chaque page, mais le CSS reste le même, ce qui est important pour que le CSS est souvent mis en cache, et peut nécessiter une contrainte d'actualiser pour mettre à jour.

    Il n'est pas dynamique, mais c'est une méthode qui est simple à faire, et vous pouvez juste include le menu html à partir d'un fichier de modèle à l'aide de PHP ou similaire.

  2. 25

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

    Il me semble que vous avez besoin actuel du code ".menu css", je demande le même code qui fonctionne comme un charme, Vous pouvez essayer quelque chose comme cela peut-être encore un peu de 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;
}
  4. 1
    <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>
  5. 1

    Classes Css sont ici

    <style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>

    Rendre votre HTML comme cela, Définissez l'url 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 écrire du code javascript, mettre ce code javascript après le code HTML.

        function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
  6. 0

    Normalement j'gérer cela sur le serveur-côté des choses (sens de PHP, ASP.NET, etc). L'idée est que lorsque la page est chargée, les contrôles côté serveur le mécanisme (peut-être par la définition d'une valeur CSS) qui est reflété dans le code HTML obtenu le client voit.

  7. 0

    Essayez d'utiliser 

    a:active{
font-weight: bold;
}

    dans votre fichier css.

  8. 0

    Vous pouvez utiliser Javascript pour analyser votre DOM, et de mettre en évidence le lien avec la même étiquette que le premier balises h1. Mais je pense que c'est exagéré =)

    Il serait préférable de définir une variable qui contient le titre de votre page, et l'utiliser pour ajouter une classe sur le lien correspondant.

  9. 0

    J'ai l'habitude d'utiliser une classe pour atteindre cet objectif. C'est très simple à mettre en place pour quoi que ce soit, les liens de navigation, des liens etc.

    Dans votre document CSS insérer:

    .current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}

    Cela permettra de faire l'état de pointage des éléments de la liste rouge de texte et un fond blanc. Fixez la classe du courant de tout lien sur le "courant" de la page et il affiche les mêmes styles.

    Im de votre code HTML à insérer:

    <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>
  10. 0

    Veuillez examiner les éléments suivants:

    Ici, c'est ce travail:

    1.) haut les boutons du menu sont visibles et de mettre en évidence correctement

    2.) sous boutons de menu ne sont pas visibles jusqu'à ce que haut menu est cliqué

    Voici ce qui a besoin de travail:

    1.) lorsque le sous menu est cliqué, la recherche de la nouvelle page pour garder les sous menu ouvrir (je vais mettre en évidence les sous menu de bouton pour plus de précisions sur la navigation)

    Veuillez voir 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 d'en-tête? 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 très apprécié 🙂
    var sous-menu;

    $('.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);
});