Estoy intentando programar un menú desplegable por mi mismo, pero ya sólo empezar IE me da problemas.
La base del menú es muy sencilla. Está hecha con viñetas:
Código PHP:
<body>
<div id="ozMenu">
<ul>
<li>Menú 1
<ul>
<li>Opcion 1</li>
<li>Opcion 2</li>
</ul>
</li>
</ul>
<ul>
<li>Menú 2</li>
</ul>
<ul>
<li>Menú 3
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
</li>
</ul>
</div>
</body>
Firefox:
IExplorer:
Hoja de estilos:
Código PHP:
#ozMenu {
background-color: #CCCCCC;
overflow: hidden;
}
#ozMenu ul {
display: none;
}
#ozMenu ul.menu {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
float: left;
margin: 0px 0px 0px 0px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
display: block;
}
#ozMenu li.menuOut {
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #CCCCCC;
cursor: default;
}
#ozMenu li.menuHover {
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #FFFF99;
border: 1px solid #FF0000;
overflow: hidden;
cursor: default;
}
#ozMenu ul.subMenu {
display: none;
}
#ozMenu ul.subMenuHover {
position: absolute;
background-color: #FFFF99;
margin-bottom: 0px;
margin-left: -21px; /* según el padding-left del menú */
margin-right: 0px;
margin-top: 2px; /* según el paddin-bottom del menú */
list-style: none;
padding: 5px 25px 5px 20px;
border: 1px solid #FF0000;
line-height: 18px;
display: block;
}
Cuando pasamos el cursor sobre "LI" se despliega el submenú ("LI" pasa a clase "menuHover") asignando al "UL" (hijo de "LI") la clase "subMenuHover".
Código PHP:
function expandSubMenu (liTag) {
var ulTags = liTag.childNodes;
for ( i in ulTags ) {
if ( ulTags[i].nodeName == "UL" ) {
ulTags[i].className = "subMenuHover";
return;
}
}
}
function collapseSubMenu (liTag) {
var ulTags = liTag.childNodes;
for ( i in ulTags ) {
if ( ulTags[i].nodeName == "UL" ) {
ulTags[i].className = "subMenu";
return;
}
}
}
function menuHover (event) {
this.className = "menuHover";
expandSubMenu (this);
}
function menuNormal (event) {
this.className = "menuOut";
collapseSubMenu (this);
}
function ozIniMenu () {
//asignamos estilo inicial al menú y eventos
var ulTags = document.getElementById("ozMenu").childNodes;
for ( i in ulTags ) {
if ( ulTags[i].nodeName == "UL" ) {
ulTags[i].className = "menu";
var liTags = ulTags[i].childNodes;
for ( e in liTags ) {
if ( liTags[e].nodeName == "LI" ) {
liTags[e].className = "menuOut";
liTags[e].onmouseover = menuHover;
liTags[e].onmouseout = menuNormal;
}
}
}
}
}
