CSS + JS: Menú Horizontal Desplegable de Un (1) Nivel
En esta oportunidad, les presento este sencillo menú desplegable utilizando JavaScript y CSS.
Al código lo probé con gran éxito en Opera9+, FF2+ e IE7+.
Recuerden que si copian y pegan este código, deberán reemplazar las comillas (dobles y simples) que acá aparescan, por las comillas (dobles y simples) que tienen en su teclado. ¿Por qué? por que acá aparecen en un formato que en código no se aceptan.
Espero que esto solucione algunos problemas. Ya me contarán.
#1 - Creamos el archivo javascript.js (o lo agregan a su archivo JS) y escribimos la siguiente linea.
menu = function() {
var nav = document.getElementById(’nav’); /* recuperamos el objeto con el ID nav */
var child = nav.childNodes; /* ingresamos a los items dentro de este ID */
for (i=0;i<child.length;i++) {
child[i].onmouseover = function() { /* cuando pasamos el mouse por un nodo */
if (this.childNodes.length > 1) { /* si el nodo (menu) tiene tiene subnodos (items) */
this.childNodes[1].className = ‘over’; /* le damos la clase OVER definida en CSS.css */
}
}
child[i].onmouseout = function() { /* cuando quitamos el mouse del nodo (menu) */
if (this.childNodes.length > 1) { /* si este nodo (menu) tiene subnodos (items) */
this.childNodes[1].className = ”; /* le quitamos la clase, por lo que queda por defecto. */
}
}
}
}
… lo guardamos
#2 - Creamos un archivo CSS.css (o agregan las siguientes lineas al suyo) y escribimos
/*EL DIV QUE CONTENDRÁ EL MENU*/
div#menu { border-bottom:1px solid black;cursor:default;height:24px; }/*MENU*/
div#menu ol#nav { list-style-type:none;margin:0;padding:0;position:absolute; }
div#menu ol#nav li { float:left;width:120px;padding:2px;margin:2px;cursor:pointer;text-align:center;font-weight:bold; }
div#menu ol#nav li.sep { float:left;width:1px;padding:2px;margin:2px;cursor:default;color:#cacaca }
/*ITEMS DEL MENU*/
div#menu ol#nav ol { display:none; }
div#menu ol#nav ol { list-style-type:none;margin:7px 0 0 0;/*IE6+*/.margin:6px 0 0 0;padding:0;border:1px solid black;background:#fff;cursor:default; }
div#menu ol#nav ol.over { display:block; }
div#menu ol#nav ol.over li { float:none;border:0;margin:2px;width:100px;text-align:left;cursor:pointer }
#3 - Se crea una página nueva HTML (o utilizan la suya por defecto) y tipeamos.
<head>
<html>
<title></title>
<link rel=”stylesheet” href=”CSS.css” />
<script src=”javascript.js“></script>
</html>
<body>
<div id=”menu”>
<ol id=”nav”>
<li>Principal</li>
<li class=”sep”>|</li>
<li>Archivos
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</li>
<li class=”sep”>|</li>
<li>Herramientas
<ol>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
<script>window.onload=menu(); /* esta linea hace la llamada al menu */</script>
Leanlo, y acomoden a gusto. Espero les sirva.
Al archivo lo tengo de manera local, funcionando al 100%. Al código publicado aquí, lo tube que adecuar
para poder explicarlo y mostrarselo, por lo que si encuentran que no funciona, reportenmé el error.
Hasta la próxima.
Archivado bajo: Programación | Etiquetado: CSS, javascript, JS
Exelente Viktor! Perfcta la aplicacion.
Un saludo!
osea si aparece el menu horizontal pero no aparecen los items
y lo unico que hice fue copiar y pegar a una archivo y una css que ya tenia, :’(
agradeceria tu ayuda!!!
absa
absa, te envié un email con la respuesta y la invitación al nuevo blog: http://blog.d-sur.com.ar
igual publico la solución:
Recuerden que si copian y pegan este código, deberán reemplazar las comillas (dobles y simples) que acá aparescan, por las comillas (dobles y simples) que tienen en su teclado. ¿Por qué? por que acá aparecen en formato word que, obviamente, en código no se aceptan.
Espero que esto sea de ayuda.