Hoy les traigo un menú bastante simple que es una buena plataforma de aprendizaje así como un punto de partida para realizar un menú más complejo. Se trata de un menú desplegable (drop down) sin muchas complicaciones que utiliza JQuery para la aparición del menú y CSS para el estilo.
Puedes ver el menú en funcionamiento Aquí y si quieres ir directo a experimentar puedes descargar el ejemplo entero con la librería JQuery Aquí, abajo se explica más a fondo el código.
Ahora vamos a ver el código de la página dividido en cuatro partes, la primera parte incluye lo normal de una página HTML 5, lo único fuera de lo normal es la inclusión del script JQuery en su versión 1.8.1 que lo pueden encontrar aquí, en caso de tener otra versión del Script ya incluido en alguno de sus proyectos comento que he probado el menú inicialmente con la versión 1.6.4 y funciona correctamente, aunque no puedo garantizar que funcione con versiones anteriores.
1 2 3 4 5 6 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Menu Simple con Javascript y CSS</title> <script type="text/javascript" language="JavaScript" src="./jquery-1.8.1.min.js"></script> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Menu Simple con Javascript y CSS</title> <script type="text/javascript" language="JavaScript" src="./jquery-1.8.1.min.js"></script>
El siguiente código contiene el javascript que hace funcionar al menú, se trata básicamente de dos funciones, la primera llamada menu hace que se despliegue el menú, y la segunda se llama redirige, que como lo dice su nombre redirige al usuario a la página que le pasemos por el parámetro Link.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script type="text/javascript" > var timeoutId; function menu(modo, lista){ if(modo==1){ clearTimeout(timeoutId); $('#Div_menu').fadeIn(100); $('#boton_aparece_menu').css("background-color","#1616ea"); $('#boton_aparece_menu').css("color","#fff") $('#boton_aparece_menu').css("border","1px solid #333") }else if(modo==2){ timeoutId = setTimeout(function(){ $('#Div_menu').fadeOut(100); $("#boton_aparece_menu").css("background-color",""); $("#boton_aparece_menu").css("color",""); $("#boton_aparece_menu").css("border",""); }, 650); }else if(modo==3){ clearTimeout(timeoutId); } } function redirige(link){ location.href=link; } </script> |
<script type="text/javascript" >
var timeoutId;
function menu(modo, lista){
if(modo==1){
clearTimeout(timeoutId);
$('#Div_menu').fadeIn(100);
$('#boton_aparece_menu').css("background-color","#1616ea");
$('#boton_aparece_menu').css("color","#fff")
$('#boton_aparece_menu').css("border","1px solid #333")
}else if(modo==2){
timeoutId = setTimeout(function(){
$('#Div_menu').fadeOut(100);
$("#boton_aparece_menu").css("background-color","");
$("#boton_aparece_menu").css("color","");
$("#boton_aparece_menu").css("border","");
}, 650);
}else if(modo==3){
clearTimeout(timeoutId);
}
}
function redirige(link){
location.href=link;
}
</script>Entrando un poco más en el código encontramos que la función menu tiene tres posibles acciones que dependen del valor que le pasemos en el parámetro modo, si el valor del modo es 1 se elimina el setTimeout guardado en la variable timeoutId (que tiene como función retrasar la desaparición de el menú, más detalles adelante) y luego hace aparecer al mismo utilizando el método fadeIn de Jquery, también cambia el color de fondo, el color de letra y el borde del botón #boton_aparece_menu con la función css de JQuery.
Si el valor del modo es 2 la función agrega un setTimeout a la variable antes mencionada y le pasa como función el método fadeOut de JQuery aplicado sobre el Menú (llamado #Div_menu). El setTimeout básicamente retrasa la aplicación del fadeOut (método utilizado para hacer desaparecer el menú desplegable) en 650 mili-segundos logrando que cuando el mouse se encuentre fuera de la división el menú se siga mostrando por un breve instante. También se vuelve al #boton_aparece_menu a los valores originales de color de fondo, color de letra y borde mediante la función css de JQuery.
Para que sirve el setTimeout ? El setTimeout es una función propia de javascript que retrasa la ejecución de una función un determinado numero de milisegundos. Cuando el usuario pasa el mouse sobre la división llamada #boton_aparece_menu mediante un onmouseover llamamos a la función menu con el modo uno y el #Div_menu aparece, ahora cuando sacamos el mouse del #boton_aparece_menu se activa la llamada onmouseout que llama a la función con el modo dos y se crea una espera (mediante el setTimeout) de solo 650 mili-segundos, esta espera nos permite poder pasar el mouse del #boton_aparece_menu a la #Div_menu (separadas por 5 pixeles) sin que se nos esconda antes.
Ahora cuando en el modo uno usamos el clearTimeout es para que cuando un usuario pase el mouse por encima del #boton_aparece_menu y luego pase a #Div_menu si vuelve al #boton_aparece_menu antes de los 650 mili-segundos el menú no desaparezca a causa del setTimeout declarado anteriormente. Aparte no quitar el setTimeout en el modo uno causa que el menú se comporte extraño, prueba sacarlo y pasar el mouse entre ambas Divs y verás a lo que me refiero.
Si el valor del modo es 3 se elimina también la espera que esconde el menú mediante el clearTimeout. Este modo se ejecuta cuando el mouse llega a la #Div_menu y evita que ésta se esconda, luego cuando sacamos el mouse de ésta div se vuelve a llamar a la función con el modo 2 mediante el onmouseout haciendo que luego de 650 mili-segundos desaparezca.
Realmente esas pocas lineas de código causan un poco de embrollo, pero la realidad es bastante sencillo, y uno nota el funcionamiento cuando lo usa y especialmente cuando falta alguna de la lineas, lo que recomiendo si no entienden la idea anterior es ir probando el menú sin alguna de las lineas de JS para ver como afecta el funcionamiento.
Ahora nos encontramos con el CSS, el cual no tiene nada muy raro, primero le agregamos el estilo a el #boton_aparece_menu que en nuestro caso vendría a ser el botón que dice Menú y que acciona la aparición de la #Div_menu (realizado con la JS anterior). Luego viene el estilo de la #Div_menu que es el propio menú desplegable y por último la clase .li_menu que va a se utilizada para ordenar los elementos del menú emergente con la etiqueta <li>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style type="text/css"> body{ background-color: #f5f5f5; } #boton_aparece_menu{ height: 30px; line-height: 30px; width: 70px; background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #333; font-weight: bold; text-align: center; cursor: pointer; border:1px solid #d2d2d2; border-radius:2px; box-shadow:0 0 4px #d2d2d2; } #Div_menu{ position: absolute; width: 120px; background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333; font-weight: bold; margin-top: 5px; display: none; z-index: 100; border:1px solid #d2d2d2; border-radius:2px; box-shadow:2px 2px 4px #d2d2d2; } .li_menu{ line-height: 25px; border-bottom: 1px solid #d2d2d2; cursor: pointer; padding-left: 10px; } .li_menu:hover{ background-color: #1616ea; color: #FFF; } </style> |
<style type="text/css">
body{
background-color: #f5f5f5;
}
#boton_aparece_menu{
height: 30px;
line-height: 30px;
width: 70px;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #333;
font-weight: bold;
text-align: center;
cursor: pointer;
border:1px solid #d2d2d2;
border-radius:2px;
box-shadow:0 0 4px #d2d2d2;
}
#Div_menu{
position: absolute;
width: 120px;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
font-weight: bold;
margin-top: 5px;
display: none;
z-index: 100;
border:1px solid #d2d2d2;
border-radius:2px;
box-shadow:2px 2px 4px #d2d2d2;
}
.li_menu{
line-height: 25px;
border-bottom: 1px solid #d2d2d2;
cursor: pointer;
padding-left: 10px;
}
.li_menu:hover{
background-color: #1616ea;
color: #FFF;
}
</style>A destacar del CSS encontramos el line-height que en algunos casos es igual a la altura del elemento (height) lo que hace que el texto este alineado verticalmente, también tenemos un border-radius que redondea los bordes para darle un toque más profesional, un box-shadow que nos da una sombra bastante interesante y un cursor:pointer que hace que cuando pasemos el mouse por encima el cursor se convierta en una manito (puede cambiar según el SO). Cuando re-declaramos los elementos y le agregamos :hover lo que sucede es que cuando pasemos el mouse por encima del elemento se va a aplicar el CSS contenido dentro del hover:{ }, en este caso lo utilizamos para que los elementos .li_menu cambien de color al pasar el mouse por encima.
Por último tenemos el código HTML, lo primero que se nota es una Div sin ID ni Clase que tiene como objetivo primordial alinear al botón y al menú, luego tenemos propiamente el #boton_aparece_menu con las llamadas a la función JS menu cuando pasamos por encima y cuando sacamos el mouse de la misma. Seguimos con la división Div_sub_menu que también llama a la función JS menu y que contiene una lista <ul> con sus elementos <li> que vendrían a ser los elementos dentro de el menú emergente, estos últimos llaman a la función JS redirige que al hacer click nos lleva a la página que le pasemos como parámetro. El elemento <ul> tiene un poco de CSS que elimina el padding, margen y el marcador redondo que las mismas traen de manera predeterminada.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | </head> <body> <div style="width:120px;padding-bottom:3px;margin:0 auto;margin-top:100px;"> <div id="boton_aparece_menu" onmouseover="menu(1,0);" onmouseout="menu(2,0);"> Menú </div> <div id="Div_menu" onmouseover="menu(3,0);" onmouseout="menu(2,0);"> <ul style="margin: 0;padding: 0;list-style-type: none;display: inline;" class="textoGris_G"> <li class='li_menu' onclick='redirige("titulo_1.php");'> Titulo 1 </li> <li class='li_menu' onclick='redirige("titulo_2.php");'> Titulo 2 </li> <li class='li_menu' onclick='redirige("titulo_3.php");'> Titulo 3 </li> <li class='li_menu' onclick='redirige("titulo_4.php");' > Titulo 4 </li> <li class='li_menu' onclick='redirige("titulo_5.php");'> Titulo 5 </li> <li class='li_menu' style ='border:none;' onclick='redirige("titulo_6.php");'> Titulo 6 </li> </ul> </div> </div> </body> </html> |
</head>
<body>
<div style="width:120px;padding-bottom:3px;margin:0 auto;margin-top:100px;">
<div id="boton_aparece_menu" onmouseover="menu(1,0);" onmouseout="menu(2,0);">
Menú
</div>
<div id="Div_menu" onmouseover="menu(3,0);" onmouseout="menu(2,0);">
<ul style="margin: 0;padding: 0;list-style-type: none;display: inline;" class="textoGris_G">
<li class='li_menu' onclick='redirige("titulo_1.php");'>
Titulo 1
</li>
<li class='li_menu' onclick='redirige("titulo_2.php");'>
Titulo 2
</li>
<li class='li_menu' onclick='redirige("titulo_3.php");'>
Titulo 3
</li>
<li class='li_menu' onclick='redirige("titulo_4.php");' >
Titulo 4
</li>
<li class='li_menu' onclick='redirige("titulo_5.php");'>
Titulo 5
</li>
<li class='li_menu' style ='border:none;' onclick='redirige("titulo_6.php");'>
Titulo 6
</li>
</ul>
</div>
</div>
</body>
</html>Esa fue la mejor explicación que pude articular, si tienen dudas no duden en preguntar que trataré de explicar lo mejor posible, si quieres ver el menú en funcionamiento puedes verlo Aquí y puedes descargar el ejemplo entero con la librería JQuery Aquí.
