Tengo una extraña afición por los menú's que se colapsan y todo ese asunto aunque muchos piensan que pueden llegar a ser inútiles a mi me agradan bastante, resulta que varias veces han surgido este tipo de dudas y explicarlo en ese momento resulta un poquito cansado, además que la forma no se me hacía la más adecuada para hacerlo, después de leer un artículo que ví en Diseñorama sobre la DivManía, les dejo este tutorial que después de un buen rato de intentarle por fin salió como quería.
Para empezar copiamos este código y lo nombramos collapse.js (Sorry por no poner los derechos, no sé quién sea el autor, pero si alguien sabe que me diga, por que está muy bueno)
-
function initit(list, img, stylesheetpath)
-
{
-
var show = GetCookie(list);
-
var listElementStyle=document.getElementById(list).style;
-
if (show == "true"){
-
-
listElementStyle.display="block";
-
}
-
else{
-
-
listElementStyle.display="none";
-
}
-
-
}
-
-
function switchit(list,img,stylesheetpath){
-
var listElementStyle=document.getElementById(list).style;
-
if (listElementStyle.display=="none"){
-
-
listElementStyle.display="block";
-
SetCookie(list,"true");
-
}
-
else {
-
-
listElementStyle.display="none";
-
SetCookie(list,"false");
-
}
-
}
-
-
function SetCookie(name, value, expires, path, domain)
-
{ document.cookie = name + "=" + escape(value) +
-
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
-
((path == null) ? "" : "; path=" + path) +
-
((domain == null) ? "" : "; domain=" + domain);
-
}
-
-
function GetCookie(name)
-
{ var cname = name + "=";
-
var dc = document.cookie;
-
if (dc.length> 0)
-
{ begin = dc.indexOf(cname);
-
if (begin != -1)
-
{ begin += cname.length;
-
end = dc.indexOf(";", begin);
-
if (end == -1) end = dc.length;
-
return unescape(dc.substring(begin, end));
-
}
-
}
-
return null;
-
}
-
-
function DelCookie (name,path,domain)
-
{ if (getCookie(name))
-
{ document.cookie = name + "=" +
-
((path == null) ? "" : "; path=" + path) +
-
((domain == null) ? "" : "; domain=" + domain) +
-
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
-
}
-
}
Ahora, lo mandamos llamar en el header de nuestra página
-
<script type="text/javascript" src="collapse.js"></script>
Una vez hecho esto, vamos a crear nuestra lista que en realidad será nuestro menú, ya en el body de nuestro sitio ponemos el siguiente código:
-
<div id="navigation">
-
<h1>InfectedFx.net</h1>
-
<ul class="mainMenu">
-
<li><a href="javascript:switchit('navOne','collapse1','')">Category 01</a>
-
<ul class="subMenu" id="navOne">
-
<li><a href="#">SubCategory 01-1</a></li>
-
<li><a href="#">SubCategory 01-2</a></li>
-
<li><a href="#">SubCategory 01-3</a></li>
-
<li><a href="#">SubCategory 01-4</a></li>
-
</ul>
-
<script type="text/javascript">initit('navOne','','');</script>
-
</li>
-
<li><a href="javascript:switchit('navTwo','collapse2','')">Category 02</a>
-
<ul class="subMenu" id="navTwo">
-
<li><a href="#">SubCategory 02-1</a></li>
-
<li><a href="#">SubCategory 02-2</a></li>
-
<li><a href="#">SubCategory 02-3</a></li>
-
<li><a href="#">SubCategory 02-4</a></li>
-
</ul>
-
<script type="text/javascript">initit('navTwo','','');</script>
-
</li>
-
<li><a href="#">Category 03</a></li>
-
<li><a href="#">Category 04</a></li>
-
</ul>
-
</div>
navigation: Nuestro contenedor
mainMenu: Definición de la lista que contiene todo el menú
subMenu: Es la definición de quienes serán "hijos"
navOne: Es el ID asignado a cada elemeno que se va a expandir (tienen que ser distintos) si se dan cuenta dentro del javascript y el ID del subMenu es exactamente la misma, si no es así entonces no hará nada, de la misma forma donde está el javascript con la función init
Para terminar con este tutorial, solo debemos de crearle el diseño a nuestro menú, basándonos en el estilo tutorial anterior pondré este ejemplo, ya ustedes le dán el formato que gusten.
-
/* Contenedor de nuestro menú*/
-
#navigation{
-
width: 195px;
-
margin:auto;
-
border:4px solid #444;
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:bold;
-
}
-
-
#navigation h1{
-
width:195px;
-
height:53px;
-
text-indent:-5000px;
-
font-size:12px;
-
background: #FFF url("pix/topMnu.jpg") no-repeat top left;
-
border-bottom:5px solid #C73B0A;
-
margin:0px;
-
padding:0px;
-
}
-
-
-
#navigation ul {
-
padding:0px;
-
margin:0px;
-
list-style-type: none;
-
font-size:10px;
-
-
}
-
-
/* Menu Principal*/
-
-
.mainMenu a{
-
display: block;
-
padding: 5px 0px 5px 25px;
-
border-bottom:1px solid #E3E3E3;
-
border-top:1px solid #FFF;
-
width:170px;
-
text-decoration: none;
-
font-weight:normal;
-
}
-
-
.mainMenu a:link, .mainMenu a:visited{
-
color: #3399CC;
-
background: #F9F9F9 url("pix/post.gif") no-repeat left;
-
}
-
-
.mainMenu a:hover{
-
color: #C73B0A;
-
background: #F7F7F7 url("pix/post_o.gif") no-repeat left;
-
}
-
-
-
/* SubMenu*/
-
-
.subMenu a:link, .subMenu a:visited{
-
color: #999999;
-
background: #FFFFFF url("pix/sub.gif") no-repeat left;
-
}
-
-
.subMenu a:hover{
-
color: #666666;
-
background: #FFFFFF url("pix/sub_o.gif") no-repeat left;
-
}
Listo, con esto tendrán su menú desplegable, si quiren verlo en acción pueden bajarse el ejemplo con todos los archivos listos para usarse.
Se agradecen comentarios y/o sugerencias, siempre son buenas... ^^
22 comentarios para Menú desplegable
Muy bueno!!! realmente es excelente el tutorial. Me gustaría ver alguno sobre el uso que le has dado a moo.fx en el presente site y/o alguna variante del mismo. Felicitaciones!!! y adelante con este muy buen proyecto!
Wow infected…..muchas gracias de verdad bro .
Muy bueno!
No cabe duda que cada vez aprendemos más con IFX.
Muchas gracias
Sobrauuuuuuu!
eh bro genialidad de menu!!
esta genial y sin duda lo usare!
siempre poniendo en el codigo ke lo hizo el hongo jijiji ^^!
y por cierto la forma en ke muestras el codigo (sobretodo los largos tipo javascript) dan al codigo mucha mas facilidad para leer y copiar, con los colores y lineas tipo “dreamweaver”
un 10 maestro!
gracias!
Se ve hermoso… Gracias =)
Está jevi ese menú ….. Ma’ para la colección
aprovechando este tema… tengo una pregunta a ver si alguien me puede echar la mano… ¿Cómo le hago para poner un menú despegable hecho en javascript sobre alguna animación de flash?
Pregunto esto porque me pasa que cuando inserto el código en la web, digamos en la parte superior de la pagina y seguidamente tngo una animación de flash, al momento de desplegar el menu, lo despliega pero se oculta detras de la animación de flash…
EDEN: Gracias brother, ojalá que sí, espero verlo aplicado ^^
OPFER: Cuando gustes!!
DBRDFX: Tnks!! ^^
JFERIAD: Esto es por que el .swf siempre toma “un nivel” sobre nuestro código, pero si hay una forma de hacerlo, próximamente se lo estaremos mostrando
Ok, gracias, estaré a la espera, ya que me interesa mucho para unos menus de un proyecto web que estoy realizando… saludos.
Sí, señor. Realmente bueno.
)
wow O_O que buen tutorial, tenia tiempo buscando algo asi de explicadito y que realmente diera resultados, muy facil de hacer porque ya me tome el tiempo de hacerlo paso a paso como se muestra aqui ;D asi que gracias , me ayudo y ayudara bastante =D
hey, muchas gracias, lo probare desde ya.
muy bueno el tuto.
Realmente el tutorial está muy bien explicado y funciona excelente en Mozilla y en Explorer. Muchas gracias, está buenísimo y me está ayudando en un trabajoe para un sitio que estoy desarrollando. Sólo tengo un inconveniente que quisiera saber si se puede resolver, lo estuve intentando y no lo he logrado. ¿Es posible hacer que cuando despliegue por ejemplo «navTwo» se cierre «navOne»?Actualmente lo que hace es… desplegar una categoría y para cerrarla hay que volver a cliquear haciendo que el menú sea demasiado largo si tiene muchas subcategorías.
Me dá mucho gusto leer que les ha sido de utilidad este tutorial, Leonardo tienes razón en eso, ¿qué sucede cuando existen muchas subcategorías?… para eso yo te recomendaría que usaras moo.fx ^^ esta librería en javascript bastante ligera y que trae una cantidad de efectos muy útiles, si tienes problema para crear un menú acordeón díganme y hago una pequeña referencia, de cualquier forma existe esta otra opción, que es usando la librería de yahoo!.
esta muy bien el menu, gracias grother, una pregusta: es accesible AA? al desactivar JS sigue accesible, supongo que como el display none se hace a través de javascript y no atraves de css ES ACCESIBLE, alguien me lo confirma?
hola, esta muy bueno el turorial, quisiera saber donde cambiar para poder desplegar el submenu con solo posicionar el cursor en vez de hacer el click
Saludos a todos
Como hay q hacer para q el menú cierre un desplegable cuando haces click en otra sección del menú? Osea cuando haces click en un item se abre y cuando haces click en otro item se cierre el anterior y se habra beste nuevo.
Gracias.
Jajaaja apenas voy empezando en esto del javascript, muchisimas gracias por tu aporte men, estare practicando, espero me salga a la primera
Muy bueno el menu para tenerlo encuenta.
jferiad
lo que tienes que hacer es ponerle a tu codigo lo siguiente
wmde = trasnparenet
no se como este tu codigo, pero por ejempo al generarte el script para ver el flash te lo encierra en parentesis entonces lo pones asi, no importa donde
,’wmode’ , ‘trasnparetn’, ‘)
y en tu codigo object lo pones como embed
y listo
Excelente aporte sobre el menu, anduve buscando ejemplos y hasta el fin lo encontre, gracias por el aporte!!!!!