El menú de Novedades que muestra Google Plus me ha gustado desde que lo vi, te resalta en que circulo estas, cambiando de color el icono y el enlace. Estos días ando haciendo bocetos y pruebas para un nuevo rediseño de pizcos.net y con respecto al menú de navegación, quería resaltar el enlace activo y al final he acabado haciendo el menú de novedades de Google Plus.



Aunque este tiene un par de diferencias significativas con respecto al de Google, uso CSS3 para reproducir los círculos y cada enlace adquiere un color diferente. He usado JQuery para conseguir resaltar el enlace activo y con CSS le he añadido los colores, lo que se consigue es según sea la url que accedas y coincida con el enlace del menú, se le añade una clase que hace el resto. Los círculos realizados con CSS3 se ven perfectamente en navegadores como Chrome, Firefox y Opera (ultimas versiones) en IE8 degrada bastante bien.



IE8



Lo que expongo a continuación es como realizar el mismo menú pero los usuarios avanzados pueden perfectamente, usando este ejemplo, darle otro aspecto, usar iconos en vez de CSS3, etc. Expongo el código tal cual a modo de ejemplo, los que ya usáis JQuery conocéis perfectamente como implementarlo.

CSS

#menu li {
list-style: none;
padding: 0 0 5px 0;
}
#menu li a {
padding: 0 0 0 5px;
}
li a.rojo {
color:red;
}
li a.azul {
color:#397eec;
}
li a.naranja {
color:orange;
}
li a.amarillo {
color:yellow;
}
li a.verde {
color:green;
}
li a.gris {
color:grey;
}
li a.negro {
color:#000;
}
.circle {
float:left;
position:relative;
display:block;
margin: 3px 0 0 0 ;
border: 2px solid #ccc;
width:10px !important;
height:10px !important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
a.amarillo .circle {
border: 2px solid yellow;
}
a.azul .circle {
border: 2px solid #blue;
}
a.naranja .circle {
border: 2px solid orange;
}
a.rojo .circle {
border: 2px solid red;
}
a.verde .circle {
border: 2px solid green;
}
a.gris .circle {
border: 2px solid grey;
}
a.negro .circle {
border: 2px solid black;
}

HTML

<ul id="menu"><li><a href="URL HOME" title="" rel="nofollow"><span class="circle"></span>Home</a></li>

<li><span class="blue"><a href="URL ENLACE 2" title="" rel="nofollow"><span class="circle"></span>Tutorial</a></span></li>

<li><span class="red"><a href="URL ENLACE 3" title="" rel="nofollow"><span class="circle"></span>Opinion</a></span></li>

<li><span class="orange"><a href="URL ENLACE 4" title="" rel="nofollow"><span class="circle"></span>Informes</a></span></li>

<li><span class="yellow"><a href="URL ENLACE 5" title="" rel="nofollow"><span class="circle"></span>Recursos</a></span></li>

<li><span class="green"><a href="URL ENLACE 6" title="" rel="nofollow"><span class="circle"></span>Infografias</a></span></li>

<li><span class="grey"><a href="URL ENLACE 7" title="" rel="nofollow"><span class="circle"></span>Contacto</a></span></li>

<li><span class="black"><a href="URL ENLACE 8" title="" rel="nofollow"><span class="circle"></span>Archivo</a></span></li>
</ul>

SCRIPT

<script type='text/javascript'>
$(function(){
var path = location.pathname.substring(1);
if ( path )
$(&#39;.blue a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;azul&#39;);
$(&#39;.orange a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;naranja&#39;);
$(&#39;.red a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;rojo&#39;);
$(&#39;.green a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;verde&#39;);
$(&#39;.yellow a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;amarillo&#39;);
$(&#39;.black a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;negro&#39;);
$(&#39;.grey a[href$=&quot;&#39; + path + &#39;&quot;]&#39;).attr(&#39;class&#39;, &#39;gris&#39;);
});
</script>


*Nota: Usuarios avanzados
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también