Menú desplegable con CSS y JavaScript
Escrito por Jorge Bravo el 20 agosto, 2009
Hola a todos hoy respondere a un correo con una consulta de un amigo, que me preguntaba por programas para, generar menúes desplegables con CSSy JavaScript. Bien tratare dos puntos antes de comenzar,
El primero es que no soy nada partidario de los generadores de menús, uno por que muy sencillo crearlos nosotros mismos, segundo quedan obsoletos rapidamente ya que internet cambia demasiado a prisa y a menos que el programa se actualice lo veo dificil que aprenda una manera nueva de generar el menu ademas como extra el hecho de suelen generar mucho codigo realmente inecesario.
Punto dos, son las formas que veremos de generar menus desplegables mediante CSS y JavaScript, supongo y doy por hecho de que quienes sigan la guia tendran unos conocimientos minimos hacerca de los procedimientos que realizaremos, ya que si hay que explicar paso a paso cada una de las cosas que haremos el Post se alargaria demasiado, tampoco es la idea de hacer una clase magistral sobre CSS.
Nota: lo que aqui veamos noes ni mucho menos la mejor de las mejores maneras y tampoco creo que este exenta de errores, tan solo son metodos de trabajo y formas de hacer algo puntual si haceís una busqueda en Google sobre (menu desplegable en CSS) os aseguro que hay una buena cantidad de guias con las cuales podeís complementar esta pequeña reseña.
Luego de esta pequeña intro ons vamos de cabeza al tema que nos trae a la cancha. Primero comenzaremos con los programas para generar menues CSS.
CSS Tab Designer : Creo que es uno de los más conocidos en esta area y de los que mas se utiliza, lo he probado y cumple perfectamente su cometido sin dejarnos un bodrio muy grande de codigo para su funcionamiento.
Con CSS Tab Designer puedes:
- Diseñar rápidamente tu lista visualmente.
- Elegir una variedad de estilos y colores grande (más de 60 diseños y colores).
- Generar el código final de xhtml con un solo click.
Enlace de Descarga: CSS Tab Designer
PureCSSMenu.com : Es un generador en línea de menús desplegables del tipo CSS, se ofrece en forma gratuita. Este software es capaz de crear un menú desplegable sin JavaScript, en un 100% en CSS, ofrece menús CSS horizontales y también menús del tipo vertical. El usuario simplemente necesitará realizar tres sencillos pasos para poder construir sus menús CSS.
Enlace de descarga: PureCSSMenu
IzzyMenu : es una aplicación web desarrollada en Ajax que nos permite crear menus css de una manera por demas sencilla. Tiene una lista de diseños predefinidos entre los cuales hay unos muy buenos y que de seguro te serviran para tus diseños y desarrollos web.
Podemos escoger entre crear un menú horizontal y un menú vertical, asi como configurar el tamaño de fuente, el estilo de fuente, color, color de fondo entre muchas otras opciones.
Enlace de descarga: IzzyMenu
CSSmenubuilder.com : Otra herramienta que además genera código bastante más “limpio”. Su galería de menús predefinidos en mucho más corta pero a cambio podemos modificarlos totalmente sin necesidad de tocar el código.
La única desventaja que le encuentro es que no podemos generar la estructura de enlaces desde la propia herramienta. Aunque tampoco es ningún drama pues la propia herramienta nos permite crearla a mano.
Enlace de descarga: CSSmenubuilder.com
Ahora veremos como crear nosotros mismos esto que nos generan estos programas de manera tan sencilla, obiamente tardaremos algo más, pero estoy seguro de que aprenderemos mucho más y lo mas importantes que el limite lo pone nuestra imaginación y no la cantidad de diseño que trae incorporado algun programa. jejejje estuve a punto de decir programa cutre.
Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar de nuestra página, en un menú, este abarcaría casi la totalidad del espacio que tenemos para nuestra web. En estos casos es muy útil insertar uno o varios de estos menús desplegables, apareciendo por encima del propio contenido de la página para mostrar todas sus partes y desapareciendo posteriormente.
Preparamos el codigo CSS para las cajas del menu
1 2 3 4 5 6 7 8 9 10 11 | body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #marco { width:455px; margin:10px 0; padding:0px; text-align:left; } |
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 52 53 54 55 | /*Creditos: WebEstudio */ .preload2 { background: url(button4a.gif); } .menu2 { padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(fd_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu2 li.top {display:block; float:left; position:relative;} .menu2 li a.top_link { display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#333; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer; } .menu2 li a.top_link span { float:left; display:block; padding:0 10px 0 6px; height:40px; } .menu2 li a.top_link span.down { float:left; display:block; padding:0 10px 0 6px; height:25px; /*background:url(prodrop2/down.gif) no-repeat right top;*/ } .menu2 li a.top_link:hover {color:#fff; background:url(button4a.gif);} .menu2 li a.top_link:hover span { background:url(button4a.gif)} .menu2 li a.top_link:hover span.down { background:url(button4a.gif)} .menu2 li:hover > a.top_link {color:#fff; background:url(button4a.gif);} .menu2 li:hover > a.top_link span {background:url(button4a.gif);} .menu2 li:hover > a.top_link span.down {background:url(button4a.gif);} .menu2 table { border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; } |
Como pueden ver esta parte no es muy compleja aun que si un poco extensa.
Ahora los estilos para los enlaces y el submenu.
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 52 | /* Estilo por defecto para los links */ /* Estilo para link hover. Dependiendo del navegador que se use */ .menu2 a:hover {visibility:visible;} .menu2 li:hover {position:relative; z-index:200;} /* mantener el "siguiente nivel" invisibles colocándolo fuera de la pantalla. */ .menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul :hover ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; } .menu2 :hover ul.sub { left:6px; top:25px; background: #fff; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal; } .menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;} .menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;} .menu2 :hover ul.sub li a.fly {background:#fff url(vineta_menu.gif) no-repeat 150px 6px;} .menu2 :hover ul.sub li a:hover {background:#E5FAFC; color:#005FB9;} .menu2 :hover ul.sub li a.fly:hover {background:#E5FAFC url(vineta_menu.gif) no-repeat 150px 6px;} .menu2 :hover ul li:hover > a.fly {background:#E5FAFC} .menu2 :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul{ left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */ width:auto; z-index:300; height:auto; } .menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;} |
Ahora el HTML donde pondremos nuestro menu
Como puene ver en el codigo HTML se ha aplicado un hack para poder har funcional el menu en navegadores antiguos como IE6
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <div id="marco"><span class="preload2"> </span> <!--MENU--> <ul class="menu2"><img src="menu_izq.gif" alt="" align="left" /><img src="menu_der.gif" alt="" align="right" /> <li class="top"><a id="telmex" class="top_link" href="#"><span class="down">La Compañia</span> <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul class="sub"> <li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Filosofía</a></li> <li><a href="#">Código de Etica</a></li> <li><a href="#">Inducción a Empleados</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--></li> <li class="top"><a id="Direcciones" class="top_link" href="#"><span class="down">Direcciones</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul class="sub"> <li><a class="fly" href="#">Dirección Legal<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#">Gerencia 1</a></li> <li><a href="#">Gerencia 2</a></li> <li><a href="#">Gerencia 3</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--></li> <li class="mid"><a class="fly" href="../boxes/">Dirección de Mercadeo<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul> <li><a href="#">Gerencia de Comunicaciones Internas</a></li> <li><a href="#">Información de Productos</a></li> <li><a href="#">Soporte a Ventas</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--></li> <li><a href="../mozilla/">Dirección Administrativa y Financiera</a></li> <li><a href="../ie/">Dirección Operaciones</a></li> <li><a href="../opacity/">Dirección Cuidado al Cliente</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--></li> <li class="top"><a id="Comunicacion" class="top_link" href="#"><span class="down">Comunicaciones</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td>< ![endif]--> <ul class="sub"> <li><a href="#">Zoom Noticias</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Enterate</a></li> <li><a href="#">Manual de Marca</a></li> <li><a href="#">Presentaciones</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> < ![endif]--></li> </ul> <!-- FIN MENU--></div> |
Bueno espero vuestros comentarios y sugerencias como siempre.
Descarga del ejercicio: Archivos del Menu CSS (641)
Artículos relacionados
Comentarios (2)
Estoy de acuerdo contigo, mejor aprender a crear un menu por nuestra cuenta que utilizar un generador de estos.
Saludos.
Mauro.
diseño web
No es muy complicado y siempre ganamos conocimiento y habilidad. Hola a todos y disculpadme la desaparición :D