15.- Menú desplegable solo con CSS.
Los menús desplegables, a menudo, son muy complejos, en términos de número de líneas de código, algo que personalmente me desagrada. El código, y esta no es solo mi visión particular, mientras menos líneas ocupe, si desempeña correctamente su función, mejor. Este código está elaborado únicamente con CSS, no incluye para nada javascript, y es muy sencillo de implementar en cualquier Web. Sobre su estética, es bastante espartana, pero seguro que tus conocimientos de CSS te llevaran a mejorar su estética y adaptarlo a la perfección a tu sitio Web.
Sin más, o presente uno de mis menús desplegables favoritos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Abre capa CSS al pasar el ratón por un enlace.</title>
<style type="text/css">
#menud {
position:fixed;
font-family:verdana,arial; /*tipo de letra*/
width: 175px;
line-height: 20pt; /*separación entre lineas*/
z-index: 1;
}
.showme{
background-color:#FFE0C1;
display: none;
}
.showhim:hover .showme{
display: block;
}
#contenido {
position: absolute;
font-family:tahoma; /*tipo de letra*/
text-align:justify;
width: 600px;
top:40px;
}
</style>
</head>
<body>
<div id="menud">
<div href="#" class="showhim"><b>MENÚ</b>
<div class="showme">
<li><a href="http://www.uterra.com">INICIO</a></li>
<li><a href="http://www.uterra.com/codigo_css/codigo_fuente_css.php">CSS</a></li>
<li><a href="http://www.uterra.com/codigo_javascript/codigo_fuente_javascript.php">JAVASCRIPT</a></li>
<li><a href="http://www.uterra.com/codigo_php/codigo_fuente_php.php">PHP</a></li>
<li><a href="http://www.uterra.com/base_datos_mysql/codigo_fuente_base_datos.php">MySQL</a></li>
<li><a href="http://www.uterra.com/herramientas_web/busca_email.php">HERRAMIENTAS</a></li>
<p><hr></p>
<li><a href="http://www.uterra.com/herramientas_web/encripta_email.php">OTRO ENLACE</a></li>
</div>
</div>
</div>
<div id="contenido">Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit sem per laoreet dictum,
quam diam dic tum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis,
massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Donec sed tellus eget sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at,
convallis ut, eros. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus
fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget
sapien fringilla nonummy. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum,
turpis mi volutpat justo, eu volutpat enim diam eget metus. Donec sed tellus eget sapien
fringilla nonummy.</div>
</body>
</html>
