[Menú Desplegable ::: InfectedFX.net]

{ Menú Desplegable }

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í sobre la DivManía, les dejo este tutorial que después de un buen rato de intentarle por fin salió como quería.

{ Javascript }

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";
}
}

{ Nuestro HTML}

Ahora, lo mandamos llamar en el header de nuestra página

HTML:

<script type="text/javascript" language="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:

HTML:

<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

{ Cascading Style Sheets }

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.

CSS:

/* 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;
}

{ El ejemplo }

Si pueden comentar ó escribir que les pareció el tutorial, que más les gustaría ver, que temas les gustarían que tocáramos en ifx estaría genial.

Saludos!

Déjanos tu comentario, es importante para nosotros.

Menú Desplegable