Hola,
llevo varios años utilizando en HTML 4.0, un menú desplegable que nos brindó Jorgens hace ya mas de 4 años. Hasta ahora no había tenido problemas con él, pero al intentar utilizarlo en HTML 5 no consigo que me de el mismo resultado.
Los inconvenientes que me está causando en las paginas de prueba son un molesto espacio que no consigo hacer desaparecer, tanto en la parte superior como inferior del desplegable. Además, supongo que debido a ello, los sucesivos desplegables los va situando descuadrados con respecto al campo del que despliegan.
La diferencia entre ambos se puede ver en :
http://www.unaventanadesdemadrid.com/html5/prueba4.html (html 4.0)
http://www.unaventanadesdemadrid.com/html5/prueba5.html (html 5)
Código prueba5.html:
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo5.css" media="all" />
<link rel="stylesheet" href="estilo-menu-desplegable.css" media="all" />
<script language="javascript" src="TransmenuC.txt" ></script>
<script language="javascript" src="numero-de-menus.txt" ></script>
</header>
<body onload="init();">
<nav>
<ul>
<li><a id="desplegable1" href="#">Menú 1</a></li>
<li><a id="desplegable2" href="#">Menú 2</a></li>
<li><a id="desplegable3" href="#">Menú 3</a></li>
<li><a id="desplegable4" href="#">Menú 4</a></li>
</ul>
</nav>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
Código estilo5.css
nav {background-color: #B0C4DE; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid;height:27px;}
nav li {float:left; list-style:none ; margin: 0px 0px 0px 26px;display:inline}
nav ul {display:inline;margin-left: 5px;}
Código estilo-menu-desplegable.css
/* <this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:0px; top:0px;
border:1px solid #999;
z-index:2;
left:0px; top:0px;}
.transMenu.top .items {
border-top:none;
}
/* each TR.item is one menu item */
.transMenu .item {
color:#000000;
background-image: url(../objetos/fondo-no-activo.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:0.8;
filter:alpha(opacity=95);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: url(../objetos/fondo-activo.gif);
color:#385385;
}
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:5px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 5px;
text-align: justify;
}
Alguien me podría decir donde están fallando los códigos?
Podría utilizar otro menú desplegable para HTML 5 de los que van apareciendo por la red. El problema es aún no he encontrado ninguno que también disponga de un "Transmenu" que permita ir sumando paginas a la web sin tener que ir actualizando, con cada nueva página, los menus de cada página. En un caso como el nuestro, con más de 100 páginas, es algo demencial.
Gracias por la atención y perdón por la extensión de la consulta.
llevo varios años utilizando en HTML 4.0, un menú desplegable que nos brindó Jorgens hace ya mas de 4 años. Hasta ahora no había tenido problemas con él, pero al intentar utilizarlo en HTML 5 no consigo que me de el mismo resultado.
Los inconvenientes que me está causando en las paginas de prueba son un molesto espacio que no consigo hacer desaparecer, tanto en la parte superior como inferior del desplegable. Además, supongo que debido a ello, los sucesivos desplegables los va situando descuadrados con respecto al campo del que despliegan.
La diferencia entre ambos se puede ver en :
http://www.unaventanadesdemadrid.com/html5/prueba4.html (html 4.0)
http://www.unaventanadesdemadrid.com/html5/prueba5.html (html 5)
Código prueba5.html:
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo5.css" media="all" />
<link rel="stylesheet" href="estilo-menu-desplegable.css" media="all" />
<script language="javascript" src="TransmenuC.txt" ></script>
<script language="javascript" src="numero-de-menus.txt" ></script>
</header>
<body onload="init();">
<nav>
<ul>
<li><a id="desplegable1" href="#">Menú 1</a></li>
<li><a id="desplegable2" href="#">Menú 2</a></li>
<li><a id="desplegable3" href="#">Menú 3</a></li>
<li><a id="desplegable4" href="#">Menú 4</a></li>
</ul>
</nav>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
Código estilo5.css
nav {background-color: #B0C4DE; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid;height:27px;}
nav li {float:left; list-style:none ; margin: 0px 0px 0px 26px;display:inline}
nav ul {display:inline;margin-left: 5px;}
Código estilo-menu-desplegable.css
/* <this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:0px; top:0px;
border:1px solid #999;
z-index:2;
left:0px; top:0px;}
.transMenu.top .items {
border-top:none;
}
/* each TR.item is one menu item */
.transMenu .item {
color:#000000;
background-image: url(../objetos/fondo-no-activo.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:0.8;
filter:alpha(opacity=95);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:0.4;
filter:alpha(opacity=40);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: url(../objetos/fondo-activo.gif);
color:#385385;
}
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:5px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 5px;
text-align: justify;
}
Alguien me podría decir donde están fallando los códigos?
Podría utilizar otro menú desplegable para HTML 5 de los que van apareciendo por la red. El problema es aún no he encontrado ninguno que también disponga de un "Transmenu" que permita ir sumando paginas a la web sin tener que ir actualizando, con cada nueva página, los menus de cada página. En un caso como el nuestro, con más de 100 páginas, es algo demencial.
Gracias por la atención y perdón por la extensión de la consulta.