Has visto esto un millón de veces:
<ul>
<li><a href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Home</a></li>
<li><a href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">About us</a></li>
<li><a href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Contact us</a></li>
</ul>El HTML de menú clásico que puede transformar en cualquier cantidad de cosas hermosas a través de CSS. Puede incluir eso en todas sus páginas colocándolo en su propio archivo HTML (como “menu.html”) e incluyéndolo en sus páginas con algún tipo de declaración de inclusión simple como este fragmento de PHP:
<?php include_once("menu.html"); ?>
Ahora necesita agregar una clase para que pueda indicar a sus visitantes dónde se encuentran en su navegación actual:
<ul>
<li><a class="selected" href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Home</a></li>
<li><a href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">About us</a></li>
<li><a href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Contact us</a></li>
</ul>La clase seleccionada puede cambiar una imagen de fondo o poner en negrita el texto o algo para indicar la navegación actual. Esto es genial, excepto que ahora ha individualizado este bloque de código para una página en particular. ¡UH oh! Rompimos toda la utilidad de usar la declaración de inclusión. Hacerlo de esta manera requeriría que coloquemos este código en cada página y cambiemos el lugar donde colocamos la clase seleccionada.
En cambio, démosle a cada enlace del menú su propia clase única:
<ul>
<li><a class="home" href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Home</a></li>
<li><a class="about" href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">About us</a></li>
<li><a class="contact" href="https://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/#">Contact us</a></li>
</ul>Esto todavía no nos da una forma de destacar elementos de menú individuales en páginas individuales. Al menos no por sí solo….
Aquí viene el engaño:
Asigne a cada etiqueta
de sus páginas una identificación única. Como Luego puede crear CSS que solo afectará los elementos del menú cuando la clase de enlace del menú y el ID del cuerpo coincidan:#home .home, #about .about, #about .about, #contact .contact
{
Your CSS stylings here
}Qué gran ejemplo de la belleza y eficiencia CSS. Gracias Trenton Moss.