En mi último artículo les recomendaba un paquete de elementos UI con una plantilla de menú lateral de íconos, es la primera vez que me pasa que encuentro una herramienta de implementación seguida al recurso gráfico, pero creo que con un poco de análisis pueden dejarlo funcional y además de eso, lograr que el menú se adapte a las diferentes pantallas en donde sea mostrado.
Como verán a continuación el CSS es bastante simple y no requiere de grandes recursos para dejarlo funcional, de allí ustedes decidirán cómo se muestran las cosas, tamaños y acciones para que todo se muestre como corresponde.
Descargar Vertical Icon Menu | Ver Demo | Codrops
Con esta información podrán realizar un efecto de hover y también que el menú se agrande o se achique según la pantalla que se encuentre mostrandolo. Esto solo utiliza CSS, por lo que si desean agregar efectos animados al menú, deberán recurrir a las opciones que brinda CSS3 o bien utilizar JavaScript o jQuery.
En el HTML
Un menú clásico con las clases que definen los íconos identificativos. También la opción de activo se realiza a través de otra clase «current», los nombres pueden ser cambiados siempre que coincidan con las propiedades en el CSS.
<ul class="cbp-vimenu"> <li><a href="#" class="icon-logo">Logo</a></li> <li><a href="#" class="icon-archive">Archive</a></li> <li><a href="#" class="icon-search">Search</a></li> <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li> <li><a href="#" class="icon-location">Location</a></li> <li><a href="#" class="icon-images">Images</a></li> <li><a href="#" class="icon-download">Download</a></li> </ul>
En el CSS
Mientras tanto, en el archivo de estilos podrán utilizar como en este caso una fuente de iconos para llamar las imágenes, esto es conveniente por dos motivos, el peso, el texto es mucho más liviano que las imágenes, y por otro lado, el tamaño. Sin importar la resolución del que sea visto el sitio, la calidad de los íconos será siempre buena.
@font-face {
font-family: 'ecoico';
src:url('../fonts/ecoico.eot');
src:url('../fonts/ecoico.eot?#iefix') format('embedded-opentype'),
url('../fonts/ecoico.woff') format('woff'),
url('../fonts/ecoico.ttf') format('truetype'),
url('../fonts/ecoico.svg#ecoico') format('svg');
font-weight: normal;
font-style: normal;
}
.cbp-vimenu {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
}
.cbp-vimenu li a {
display: block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a{
background: #47a3da;
color: #fff;
}
/* class for current item */
.cbp-vimenu li.cbp-vicurrent a {
background: #fff;
color: #47a3da;
}
.cbp-vimenu li a:before {
font-family: 'ecoico';
speak: none;
font-style: normal;
font-weight: normal;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.cbp-vimenu li a.icon-logo:before {
content: "C";
font-weight: 700;
font-size: 300%;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
.icon-search:before {
content: "\e004";
}
.icon-archive:before {
content: "\e005";
}
.icon-download:before {
content: "\e006";
}
.icon-location:before {
content: "\e007";
}
.icon-images:before {
content: "\e009";
}
.icon-pencil:before {
content: "\e008";
}
/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) {
.cbp-vimenu {
font-size: 70%;
}
}
De esta manera el menú queda funcional, deberán agregar los enlaces correspondientes al resto del sitio ya que en la demo solo se muestra una sola página. Pero eso ya queda a criterio de ustedes, como está armado, pueden reemplazar las páginas y hacerlo con el salto típico de un HTML a otro, y si utilizan la carga directa, deberán recurrir a conocimientos más avanzados que probablemente ya tengan.
