Menú desplegable con CSS/Javascript

Aún hoy , en La Bloguería han puesto una entrada sobre ,cómo hacer un menú horizontal. Consta de 2 simples códigos: Javascript y CSS. Ambos están alojados en servidores.

• El Javascript no hace falta ser modificado para su compatibilidad con diferentes plantillas o direcciónes. Lo podéis tomar de la misma direción en el cuál yo lo tengo alojado o descargarlo: Descargar / http://mak11hv.googlepages.com/chrome_DynamicDrive.js


• Con el código CSS podremos modificar el color y/o las imágenes del menú. El código de abajo es el respectivo al CSS que lo podéis modificar. También os lo podéis descargar ya desde mi alojamiento: Descargar [está modificado cómo el de abajo , al igual que en el de La Bloguería]
  
  

Código CSS

.chromestyle{ width: 99%; font-weight: bold; } .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 1px solid #BBB; width: 100%; background: url(http://img145.imageshack.us/img145/5515/chromebg2ch7.gif) center center repeat-x; padding: 4px 0; margin: 0; text-align: center; /*alinear el menu "left", "center", o "right"*/ } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #494949; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #B5E2FE; } .chromestyle ul li a:hover{ background: url(http://img145.imageshack.us/img145/9148/chromebg2overdf2.gif) center center repeat-x; } .chromestyle ul li a[rel]:after{ content: " " url(); } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #B5E2FE; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/ } .dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid #B5E2FE; padding: 2px 0; text-decoration: none; font-weight: bold; color: black; } .dropmenudiv a:hover{ background-color: #EBF7FF; }

Estos códigos habrá que pegarlos antes de </head> y de esta manera:

Código HTML

<link href='ALOJAMIENTO-DEL-ARCHIVO-CSS' rel='stylesheet' type='text/css'/> <script src='ALOJAMIENTO-DEL-ARCHIVO-JAVASCRIPT' type='text/javascript'> </script>

Guardamos y nos vamos a "Elementos de la página". Pinchamos en agregar elemento y seguidamente HTML/Javascript , y dentro de él pegamos este código:

Código HTML

<div class="chromestyle" id="chromemenu"> <ul> <li><a href="URL ENLACE">AQUI UN ENLACE SIN MENU DESPLEGLABLE</a></li> <li><a href="#" rel="dropmenu1">AQUI UN ENLACE CON MENU</a></li> <li><a href="#" rel="dropmenu2">OTRO ENLACE CON MENU</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu1" class="dropmenudiv"> <a href="URL ENLACE">ENLACE 1</a> <a href="URL ENLACE">ENLACE 2</a> <a href="URL ENLACE">ENLACE 3, ETC</a> </div> <!--2nd drop down menu --> <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="URL ENLACE">ENLACE 1</a> <a href="URL ENLACE">ENLACE 2</a> <a href="URL ENLACE">ENLACE 3, ETC</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu") </script> Cambiamos las URL y el nombre de los enlaces por los que queramos , recuerden.

Bueno , croe que así les debería fncionar , sino , mirad la entrada ordiginal de la cuál obtuve la base : La Bloguería



¡Feliz 2008!