hola buenos dias , vi un ejemplo en internet trate de hacerlo pero no entendi muy bien ya que todavia no domino bien lo de css
este es el link del ejemplo
http://www.webusable.com/CssTricks_D.htmes el de abajo que se ve como un menu
lo que ise fue copiar ese codigo y ponerlo en mi hoja de estilo
entonces en mi pagina pra.html llame a mi hoja de estilo asi
<link rel="STYLESHEET" type="text/css" href="hoja.css">
y entonces ise una table en html me pare sobre ella y le puse los stilos pero no se ve nada o no se si lo ando haciendo mal, no me quedan como el ejemplo
4.3 Menú Dinámico Multinivel: La especificación CSS2 provee una forma de asociar sombra al texto, mediante la propiedad:
Si además utilizamos layers y algo de Javascript para controlar la:visibilidad de las capas, podemos crear Menús Dinámicos con el número de subniveles de navegación que deseemos. A continuación mostramos un ejemplo de esto.
(El código que muestra y oculta las capas sólo está montado para la opción Discos y en el submenú correspondiente para la opción Bandas sonoras (y con limitaciones), ya que un desarrollo exahustivo pertenecería más a un capítulo sobre Javascript/DHTML):
Artículos
Discos
Libros
Videos y DVD's
Informática
Consumibles
Oficina
Informática
Clásica
Pop y Rock
Bandas sonoras
Infantil
Jazz
Étnica
Recopilaciones
B.S.O.
Cine español
Cine infantil
En primer lugar definimos las siguientes clases de estilo para implementar contenedores, opciones de menú de 1º nivel, de 2º, de 3º...
.rightArea2Table {table-layout: fixed;background: #1D4C55;padding: 3px;border: 2px outset #AAD9E2;}
.rightArea2Header {background-image:url(../images/rightArea2Bg.gif);background-repeat:repeat-x;heigth: 12px;color:#1D4C55;border: 1px solid #FFFFFF;font-size:10px;font-weight: bold;font-family:verdana, arial, helvetica, sans-serif;}
.rightArea2Content {background: #8FA1A4;color:#F3F6F6;padding: 1px 5px;border-bottom: 1px groove #000000;font-weight:normal;font-size: 10px;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj1Table {table-layout: fixed;background: #003366;border: 1px solid #FFBB00;}
.rightEj1Content {background: #5577AA;color:#FFFFFF;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj2Table {table-layout: fixed;background: #EE9900;border: 1px solid #BB0055;}
.rightEj2Content {background: #FFCC00;color:#003366;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
a.right2ALaunch:link {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:hover {color:#FFFFFF;cursor: hand;font-weight: normal;font-size:10px;text-decoration: underline;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:active {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:visited {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:link {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:hover {color:#000000;cursor: hand;font-weight: normal;font-size:10px;text-decoration: underline;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:active {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:visited {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
Cada uno de los contenedores de opciones (1º, 2º, 3º nivel...) le ponemos en una capa, y cada una de las capas tendrá una clase de estilo que utilizaremos para ubicar el contenedor en la pantalla y para hacerlo visible o invisible:
.ejAreas1 {position: relative;top: 2px;left: 5px;width: 130px;display: block;}
.ejAreas2 {position: relative;top: -120px;left: 95px;width: 105px;visibility: hidden;}
.ejAreas3 {position: relative;top: -175px;left: 170px;width: 90px;visibility: hidden;}
Cada uno de los contenedores de opciones (1º, 2º, 3º nivel...) es una tabla, y cada celda de la tabla una opción de navegación (obviaremos escribir toda la estructura, ya que puede comprobarse viendo el código de la página).
Asociamos a los eventos onMouseOver y onBlur de cada una de las opciones de menú una función que asignará el atributo visibility: hidden / visible a la capa que contiene el submenú correspondiente:
<a class="right2ALaunch" href="javascript: void(null)" onClick="activaLayer('layer2',1)" onBlur="activaLayer('layer2',0);activaLayer('layer1',0)"> Bandas sonoras</a>
La función que manejará el atributo visibility: hidden / visible de cada capa de menú / submenú será:
function activaLayer(id,opc)
{
document.getElementById(id).style.visibility=(opc==0)? 'hidden' : 'visible';
}
Evidentemente, esta función será un poco más complicada, ya que deberá gestionar la aparición o no de un buen número de capas en función del lugar de la ventana del navegador dónde se haya hecho "click" y esto precisa algunas líneas de código más. Pero para coger la idea es suficiente.
