como hacer este menu desplegable??

canariozgz · #1 (**permalink**) 04/12/2006, 17:34

Hola amigos me gustaria saber como puedo hacer este menu desplegable al añadir item a las listas que se despliege para abajo vamos

gracias

buayacorp.com/files/design/menu-horizontal-css.html

sjam7 · #2 (**permalink**) 04/12/2006, 19:43

es muy facil, checa el codigo fuente, leelo un poco y listo

Código:

/*
 * Menús Simples con CSS
 * Autor: Braulio Andrés Soncco Pimentel <[email protected]>
 * http://www.buayacorp.com/
 * 
 * Esta hoja está bajo licencia de Creative Commons 
 * http://creativecommons.org/licenses/by/2.0/
 */


/*
	Menu Vertical
*/
#menuv {
	border: 1px solid #ACCFE8;
	border-width: 1px 1px 0 1px;
	width: 150px;
	font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#menuv ul, li {
	list-style-type: none;
}

#menuv ul {
	margin: 0;
	padding: 0;
}

#menuv li {
	border-bottom: 1px solid #ACCFE8;
}

#menuv a {
	text-decoration: none;
	color: #3366CC;
	background: #F0F7FC;
	display: block;
	padding: 3px 6px;
	width: 138px;
}

#menuv a:hover {
	background: #DBEBF6;
}

/*
	Menu Horizontal
*/
#menuh {
	font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 20px;
}

#menuh ul, li {
	list-style-type: none;
}

#menuh ul {
	margin: 0;
	padding: 0;
}

#menuh li {
	float: left;
}

#menuh a {
	text-decoration: none;
	color: #3366CC;
	background: #F0F7FC;
	display: block;
	padding: 3px 10px;
	text-align: center;
	border: 1px solid #ACCFE8;
	border-width: 1px 1px 1px 0;
}

#menuh a#primero {
	border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
	background: #DBEBF6;
}

canariozgz · #3 (**permalink**) 08/12/2006, 11:46

hola gracias por la respuesta, el codigo sabia como verlo, pero nose que instrucciones nuevas tengo que poner para hacer que se desplegue, alguna idea??

gracias

fearlex · #4 (**permalink**) 08/12/2006, 16:17

Cheka esto:

http://platea.pntic.mec.es/jmas/manu...uckerfish.html

Espero te sirva

Dinos si te sirvio

T_O_N_N_Y · #5 (**permalink**) 08/12/2006, 17:08

Buenas noches, te pongo un par de tutoriales, ya que no sé de qué forma quieres que se desplegue.
TUTORIAL 1
EJEMPLO 1

TUTORIAL 2
EJEMPLO 2

Saludos!!

T_O_N_N_Y · #6 (**permalink**) 08/12/2006, 17:11

Cita:

Iniciado por fearlex

Cheka esto:

http://platea.pntic.mec.es/jmas/manu...uckerfish.html

Espero te sirva

Dinos si te sirvio

Jajaja. Me había dejado el mensaje sin enviar y la ventana abierta y ahora que la veo ya le habías contestado :S

Bueno, le he puesto otro también.
Jejeje.

Ruben_JD · #7 (**permalink**) 08/12/2006, 17:11

Hola, Mira puedes usar divs donde quieras que aparesca tu menu.

Código HTML:

<style type="text/css">
/* ---------------------- Menu Vertical --------------------- */
ul{
	list-style: none;
   margin: 0;
   padding: 0;
}
#menu1 {
	background-color: #FFFFFF;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	width: 120px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
}

#menu1 li a {
	height: 25px;
	display: block;
	/* estas dos lines deberas incluir para que se vea mejor en otro explorador como Firefox 2 y Opera 8.5 */
		voice-family: "\"}\""; 
		voice-family: inherit;  
	/* Fin */
	height: 17px;
	text-decoration: none;
	border-bottom: 1px solid #CCCCCC;
}

#menu1 li a:link, #menu1 li a:visited {
	color: #666666;
	padding: 4px 5px 4px 5px;
}

#menu1 li a:hover, #menu1 li #primeropcion{
	background-color: #333333;
	color: #FFFFFF;
	padding: 4px 5px 4px 5px;
	
}	
/* ---------------------- Menu Horizontal --------------------- */
#menu2 {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
}

#menu2 li {
	float: left;
	display: inline;
}

#menu2 li a {
	height: 25px;
	text-decoration: none;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
}

#menu2 li a:link, #menu2 li a:visited {
	color: #666666;
	padding: 4px 5px 4px 5px;
}

#menu2 li a:hover, #menu2 li #primeropcion{
	background-color: #333333;
	color: #FFFFFF;
	padding: 4px 5px 4px 5px;
}	
</style>

</head>

<body>
<!-- ---------------------- Menu Vertical ---------------------  -->
<div id="menu1">
	<ul>
	<li><a id="primeropcion" href="">Opción 1</a></li>
	<li><a href="">Opción 2</a></li>
	<li><a href="">Opción 3</a></li>
	</ul>
</div>
<br>
<!-- ---------------------- Menu Horizontal ---------------------  -->
<div id="menu2">
	<ul>
	<li><a id="primeropcion" href="">Opción 1</a></li>
	<li><a href="">Opción 2</a></li>
	<li><a href="">Opción 3</a></li>
	</ul>
</div>
</body>

cuando termines siempre revisa tu codigo, asi sabras cual es el problema

W3C.org (css validator), también busca lo siguiente q te puede servir muchisimo:

TopStyle y CSS Tab designer (software gratis)
Dynamic Drive CSS Library (pagina con codigo de ejemplos css)
W3C.es ( Guía de Referencia
CSS 2.1)

canariozgz · #8 (**permalink**) 10/12/2006, 09:19

gracias eso era lo que necesitaba le echare un vistazo cuando tenga algo de tiempo

un saludo