Cambiar o añadir iconos a una navegación según que página o pestaña esté activa en Bootstrap o web.

Hoy os voy a mostrar como podemos añadir un icono a cada pestaña de la navegación que tengamos activa, tanto si usamos Twitter Bootstrap como no. Para hacerlo más sencillo tendremos que usar jQuery y los iconos de Font_awesome o cualquier otra tipografía de iconos basada en CSS, Bootstrap ya viene por defecto con todo ello.

Empecemos por lo más fácil:

Web

Si tan solo vamos a usar código HTML podemos hacerlo de varias formas. La primera sería teniendo un código como el que enseño a continuación:

<nav>  
     <ul>
         <li><a href="index.html"> Home </a></li>
         <li><a href="about.html"> About </a></li>
         <li><a href="contact.html"> Contact </a></li>
     </ul>
</nav>  

Como podemos ver aún no tenemos ningún icono, por lo que los añadiremos mediante jQuery. Para hacerlo utilizaremos el objeto window.location y la propiedad href, la cual nos dará información de la URL del documento en el que estamos. La función jQuery sería esta:

function Add_icon() {

    var href = location.href.toLowerCase();

    switch (href){
       case "http:⁄/nombre_web.com/":
         $('li a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/index.html':
         $('li a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/about.html':
         $('li a[href="about.html"]').prepend('<span><i class="icon-user"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/contact.html':
         $('li a[href="contact.html"]').prepend('<span><i class="icon-envelope"></i></span>');
         break;
    }

}
El primer case sería para cuando accedemos a la web por primera vez.

Ahora os mostraré un ejemplo en el que añadimos un icono por defecto a nuestro código HTML y lo iremos cambiando en función a la pestaña que esté activa.

<nav>  
     <ul>
         <li><i class="icon-angle-right"></i><a href="index.html"> Home </a></li>
         <li><i class="icon-angle-right"></i><a href="about.html"> About </a></li>
         <li><i class="icon-angle-right"></i><a href="contact.html"> Contact </a></li>
     </ul>
</nav>  

El código jQuery quedaría de la siguiente manera:

function Add_icon() {

    var href = location.href.toLowerCase();

    switch(href){
       case 'http:⁄/nombre_web.com/':
         $('li a[href="index.html"]').prev().attr('class', 'icon-home' );
         break;
       case 'http:⁄/nombre_web.com/index.html':
         $('li a[href="index.html"]').prev().attr('class', 'icon-home' );
         break;
       case 'http:⁄/nombre_web.com/about.html':
         $('li a[href="about.html"]').prev().attr('class', 'icon-user' );
         break;
       case 'http:⁄/nombre_web.com/contact.html':
         $('li a[href="contact.html"]').prev().attr('class', 'icon-envelope');
         break;
    }

}

Twitter Bootstrap

Para este ejemplo solo colocaré el código jScript ya que el HTML lo podréis encontrar en la propia web.

En este caso estamos añadiendo un icono a las pestañas que no estén activas.

function Add_icon() {

    var href = location.href.toLowerCase();

    switch(href){
       case 'http:⁄/nombre_web.com/':
         $('li a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
         $('li:not(.active) a').prepend('<span><i class="icon-double-angle-right"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/index.html':
         $('li a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
         $('li:not(.active) a').prepend('<span><i class="icon-double-angle-right"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/about.html':
         $('li a[href="about.html"]').prepend('<span><i class="icon-user"></i></span>');
         $('li:not(.active) a').prepend('<span><i class="icon-double-angle-right"></i></span>');
         break;
       case 'http:⁄/nombre_web.com/contact.html':
         $('li a[href="contact.html"]').prepend('<span><i class="icon-envelope"></i></span>');
         $('li:not(.active) a').prepend('<span><i class="icon-double-angle-right"></i></span>');
         break;
    }

}

Podéis ver un ejemplo en vivo en esta web que he realizado con Bootstrap.

Espero que os sirva de ayuda!!!

comments powered by Disqus