Foros del Web » Creando para Internet » CSS »

Menu desplegable

Estas en el tema de Menu desplegable en el foro de CSS en Foros del Web. Hola amigos, este es mi primer post en el foro. Estoy comenzando a utilizar css ya que el flash no lo es todo... Tengo un ...
  #1 (permalink)  
Antiguo 26/11/2010, 11:20
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Exclamación Menu desplegable

Hola amigos, este es mi primer post en el foro.
Estoy comenzando a utilizar css ya que el flash no lo es todo...
Tengo un sitio web con una barra de menu, pero ahora necesito agregar un desplegable desplegable, solo a un item de la barra, he intentado de todas las maneras que he encontrado en la web y no me funciona o el resto de los menús desaparecen :(

Adjunto el html de la barra de menu original, sin desplegable.

<div id="nav">
<ul class="links" id="primarylinks">
<li class="menu-1 first"><a href="quienes.htm" title="">Quienes Somos</a></li>
<li class="menu-2"><a href="descubre.htm" title="">Descubre Valparaiso</a></li>
<li class="menu-3"><a href="paquetes.htm" title="">Paquetes Turisticos</a></li>
<li class="menu-4"><a href="cosas.htm" title="">Cosas que Hacer</a></li>
<li class="menu-5"><a href="festivales.htm" title="">Festivales &amp; Eventos</a></li>
<li class="menu-6"><a href="arte.htm" title="">Arte &amp; Cultura</a></li>
<li class="menu-7"><a href="contacto.htm" title="">Contacto</a></li>
</ul></div>

Ahora el CSS


#nav{
clear:both;
height:45px;
overflow:hidden;
background-image:url(img/nav_bg.gif);
background-repeat:repeat-x;background-position:center top;
margin-bottom:auto;
padding-top:3px;
width: 968px;
margin-left: 16px;
}

#primarylinks{width:971px;
margin:0 auto;
margin-left: -36px;}
#primarylinks li{float:left;margin:0;padding:0;border-right:1px solid #51483f;}
#primarylinks li.first{border-left:1px solid #51483f;}
#primarylinks li.menu-1 a{width:135px;background:url(img/quienes.gif) no-repeat center top;}
#primarylinks li.menu-2 a{width:160px;background:url(img/descubre.gif) no-repeat center top;}
#primarylinks li.menu-3 a{width:160px;background:url(img/paquetes.gif) no-repeat center top;}
#primarylinks li.menu-4 a{width:132px;background:url(img/cosas.gif) no-repeat center top;}
#primarylinks li.menu-5 a{width:160px;background:url(img/festivales.gif) no-repeat center top;}
#primarylinks li.menu-6 a{width:117px;background:url(img/arte.gif) no-repeat center top;}
#primarylinks li.menu-7 a{width:87px;background:url(img/contacto.gif) no-repeat center top;}
#primarylinks li a{display:block;padding-top:80px;height:48px;overflow:hidden;font-family:Tahoma,'Trebuchet MS',arial,sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:0.03em;text-align:center;color:#f1ead6;text-decoration:none;}
#primarylinks li a:hover,
#primarylinks li a:active,
#primarylinks li a.active{background-position:center -48px;}

Como puedo incluir un desplegable que mantenga la gráfica y diseño que tengo
Agradeceré que me puedan ayudar con esto.

Saludos
Alexis

Última edición por alexisulloacastro; 26/11/2010 a las 11:43 Razón: error de escritura
  #2 (permalink)  
Antiguo 26/11/2010, 12:40
Avatar de User_Kathy  
Fecha de Ingreso: septiembre-2010
Mensajes: 38
Antigüedad: 7 años, 3 meses
Puntos: 8
Respuesta: Menu desplegable

Te voy a pasar mi menu desplegable =D te parece?
  #3 (permalink)  
Antiguo 26/11/2010, 12:56
Avatar de User_Kathy  
Fecha de Ingreso: septiembre-2010
Mensajes: 38
Antigüedad: 7 años, 3 meses
Puntos: 8
Respuesta: Menu desplegable

Código:
/******************************************* estilos del menu CSS


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 875; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #99CCCC;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #336699;
  color: #FFFFFF;
  font: bold 10px/22px Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #99CCFF;
  color: #FFFFFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #336699;
  color: #FFFFFF;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #99CCFF;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #336699;
  color: #FFFFFF;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #99CCFF;
  color: #FFFFFF;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
	background: #336699;
	color: #FFFFFF;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  	background: #99CCFF;
  	color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}


body {
margin: 0;
padding: 0px;
background: #FFF;
color: #666;
text-align: center;
}

h1 {
font: bold 16px, Arial;
}

.p {
margin: 15px 0;
font: 11px/1.5em;
	font-family:arial;
}

.a {
color: #900;
text-decoration: underline;

}

a:hover {
background: #900;
color: #FFF;
text-decoration: none;
}

.hr {
margin: 24px 0;
_margin: 0; /*IE Sucks*/
clear: both;
}

#page-container {
margin: 0 auto;
width: 900px;
text-align: left;
}
<!--*************************************php-->
<!--*********************item1***************-->
<div id="page-container" style="background-color:#336699">

<ul id="navmenu-h" >
<? echo $Ocultar[1];?>
<li>
	<a href="#" onclick="xxx.php">Inicio</a>
</li>
<!--*********************item2***************-->
<li>
	<a href="#">Visitas</a>
    <ul>
    	<li>
           <a href="#" onclick="xxx.php">Registrar Nueva</a> 
        </li>
    	<li>
          <a href="#" onclick="xxx.php">Registrar Salida</a> 
        </li>
         <li>
          <a href="#" onclick="xxx.php">Consultas</a> 
        </li>
	 
    </ul>
</li>
</div>
Espero que te sirva de algo a mi me funciona a la perfección =D
  #4 (permalink)  
Antiguo 26/11/2010, 18:03
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: Menu desplegable

Kathy,
Gracias, lo probaré y te cuento como me va

Saludos
  #5 (permalink)  
Antiguo 26/11/2010, 21:59
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Menu desplegable

<? echo $Ocultar[1];?>

has usado PHP :(
recuerda que no todos los hosting ejecutan PHP, pero esta buena la ayuda.
En fin no ayudamos a aprender a nuestro compañero, pero pues bien, le hara sus modificaciones como quiere a su web. =)
  #6 (permalink)  
Antiguo 26/11/2010, 22:06
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Menu desplegable

En www.araudi.net tienes varios ejemplos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 27/11/2010, 08:00
 
Fecha de Ingreso: noviembre-2010
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Respuesta: Menu desplegable

KurozakiIchigo
Php conozco lo básico, aunque la web que estoy haciendo está en html.
Agradecería me puedan guiar, en lo que tendría que efectuar en el código que ya tengo, que es lo entiendo, para agregar la opción de desplegable en un solo ítem, no en todos los menús.
Así puedo entender la mecánica y probar otras variantes.

Saludos y gracias
  #8 (permalink)  
Antiguo 27/11/2010, 10:09
Avatar de oskarvisual  
Fecha de Ingreso: julio-2010
Ubicación: Lima - Perú
Mensajes: 233
Antigüedad: 7 años, 5 meses
Puntos: 12
Respuesta: Menu desplegable

Prueba con esta web, http://cssmenumaker.com/ ya te da varios modelos solo tienes que crear los item y te da la opción de descargar...

Etiquetas: desplegable
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 21:53.