Los menús son un elemento esencial en cualquier sitio web. El usuario debe sentirse cómodo en el sitio y evitar distraerse o perder el control del sitio web, este es uno de los muchos errores que tenemos que evitar al crear un sitio web. Esto puede conseguirse creando el menú ideal, que variará según el sitio web que estemos visitando: pueden ser verticales, horizontales, fijos, pegados en la parte superior… Para cada sitio web hay un menú ideal. Actualmente se ven muchos menús pegados a la parte superior o lateral. En este artículo os traigo un menú en la parte lateral que se deslizará cuando queramos usarlo, despejando espacio de este modo para que pueda mostrarse otro tipo de contenido, y ver el menú sólo cuando el usuario lo necesite. El menú está hecho en HTML5, CSS3 y JQuery:
Código HTML5
<div id="menu"> <div id="menu"> <div class="arrow"><</div> <nav class="nav"> <a href="#">Home</a> <a href="#">An introduction: Design in 2012</a> <a href="#">Relevant figures in design</a> <a href="#">Where is design heading?</a> <a href="#">Influences</a> <a href="#">Video</a> <a href="#">Sources</a> </nav></div>
Código CSS3
Si os fijáis las animaciones están hechas con CSS Transitions. Podemos cambiar left: 0; por right: 0; para situar el menú a la derecha en vez de a la izquierda.
/*****ANIMACIONES (opcional)*****/
#menu, #menu .arrow, #menu nav a {
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/*****END ANIMATONS*****/
/*****PANEL*****/
#menu {
background: #f9f9f9;
border-right: 3px solid #fff;
width: 100px;
padding: 30px;
position: fixed;
z-index: 100000;
box-shadow: 1px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 0 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 1px 0 3px rgba(0,0,0,0.25);
}
#menu {
left: 0; /* Change to right: 0; if you want the panel to display on the right side. */
}
#menu:hover, #menu:focus {
left: 0 !important; /* Change to right: 0 !important; if you want the panel to display on the right side. */
}
#menu .arrow {
right: 2px; /* Change to left: 2px; if you want the panel to display on the right side. */
}
#menu .arrow {
font: normal 400 25px/25px 'Acme', Helvetica, Arial, sans-serif; /* Acme font is required for .arrow */
color: rgba(0,0,0,0.75); /* Arrow color */
width: 16px;
height: 25px;
display: block;
position: absolute;
top: 20px;
cursor: default;
}
#menu:hover .arrow {
transform: rotate(-180deg) translate(6px,-3px);
-moz-transform: rotate(-180deg) translate(6px,-3px);
-webkit-transform: rotate(-180deg) translate(6px,-3px);
}
#menu nav {
position: relative;
top: 75px;
}
#menu nav a {
padding: 20px 5px;
border-bottom: 1px dotted #c0c0c0;
display: block;
clear: both;
font: normal 400 12px/18px 'Open Sans', Helvetica, Arial, sans-serif;
color: #656565;
text-decoration: none;
}
#menu nav a:hover {
color: #ec6912;
}
/*****END PANEL*****/
Código JQuery
Situar los scripts en la parte
del documento. Podemos indicar el retraso de aparición y desaparición del menú (en este ejemplo está puesto en 4000ms).<!-----SCRIPTS-----><!-----SCRIPTS-----><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-----SLIDING PANEL HEIGHT ADJUST TO DOCUMENT HEIGHT-----><script type="text/javascript">$(document).ready(function() { $("#menu").height($(document).height());});</script>
<!-----SLIDING PANEL DELAY AND HIDE-----><script type="text/javascript">$(document).ready(function() { setTimeout( function(){$('#menu').css('left','-130px');},4000); <!-- Change 'left' to 'right' for panel to appear to the right -->});</script>
Ejemplo de su funcionamiento y descarga
Como siempre, podemos ver a continuación un ejemplo del menú o descargarlo a nuestro ordenador:
Vía | Designer Fuel
