Foros del Web » Creando para Internet » CSS »

como hacer este menu desplegable??

Estas en el tema de como hacer este menu desplegable?? en el foro de CSS en Foros del Web. 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...
  #1 (permalink)  
Antiguo 04/12/2006, 17:34
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
como hacer este menu desplegable??

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
  #2 (permalink)  
Antiguo 04/12/2006, 19:43
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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;
}
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
  #3 (permalink)  
Antiguo 08/12/2006, 11:46
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: como hacer este menu desplegable??

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
  #4 (permalink)  
Antiguo 08/12/2006, 16:17
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: como hacer este menu desplegable??

Cheka esto:

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


Espero te sirva

Dinos si te sirvio
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #5 (permalink)  
Antiguo 08/12/2006, 17:08
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 11 años, 1 mes
Puntos: 8
Re: como hacer este menu desplegable??

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!!
  #6 (permalink)  
Antiguo 08/12/2006, 17:11
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 11 años, 1 mes
Puntos: 8
Re: como hacer este menu desplegable??

Cita:
Iniciado por fearlex Ver Mensaje
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.
  #7 (permalink)  
Antiguo 08/12/2006, 17:11
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: como hacer este menu desplegable??

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)
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #8 (permalink)  
Antiguo 10/12/2006, 09:19
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: como hacer este menu desplegable??

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

un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.