Foros del Web » Creando para Internet » CSS »

novato: alguien me ayuda a desplegar este menu horizontal

Estas en el tema de novato: alguien me ayuda a desplegar este menu horizontal en el foro de CSS en Foros del Web. soy muy novato en css y tengo este menú horizontal creado. mi codigo aspx es este: <ul id="menu"> <li><a class="current" href="">¿Quiénes somos?</a></li> <li><a href="servicios.aspx">Servicios</a></li> <li><a ...
  #1 (permalink)  
Antiguo 03/04/2009, 03:59
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
novato: alguien me ayuda a desplegar este menu horizontal

soy muy novato en css y tengo este menú horizontal creado.

mi codigo aspx es este:

<ul id="menu">
<li><a class="current" href="">¿Quiénes somos?</a></li>
<li><a href="servicios.aspx">Servicios</a></li>
<li><a href="galeria.aspx">Obras</a></li>
<li><a href="presupuestoTerm.aspx">Presupuestos</a></li>
<li><a href="ahorro.aspx">Consejos</a></li>
<li><a href="ofertas.aspx">Ofertas</a></li>
<li><a href="noticias.aspx">Noticias</a></li>
<li><a id="last" href="#">Contacto</a></li>
</ul>



y el css es el siguiente:


#menu { margin: 0 0 50px; }
#menu li { list-style: none; float: left; }
#menu li a { cursor: pointer; font: Verdana; padding: 5px 27px; line-height: 25px; background: #8C2E2E; margin: 0 1px 0 0; color: #B4B4B4; }
#menu li a:hover { background: #FF8787; color: #000; }
#menu li a.current { background: #66A3CF; color: #fff; }
#menu li a#last { margin: 0; padding: 5px 35px 5px 34px; }

.third { font-size: .9em; float: left; width: 800px; margin: 0 30px 30px 30px; }
.last { float: right; margin: 0 10px 10px 0; }



necesito que cuando el raton este sobre "consejos" se desplieguen hacia abajo 4 opciones más. Es esto difícil de conseguir? con los tutoriales no consigo gran cosa, nunca habia visto css.

muchas gracias al que pueda ayudarme!
  #2 (permalink)  
Antiguo 03/04/2009, 04:43
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 12 años
Puntos: 3
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Para hacer eso tienes que utilizar una libreia de java script, que se llama jquery, aqui puedes ver como se hace
http://www.anieto2k.com/2006/11/15/e...eon-de-jquery/

Si si visitas la web de mi firma tambien veras como lo he implementado yo.

Un saludo.
__________________
AlfaMeta formacion
  #3 (permalink)  
Antiguo 03/04/2009, 05:27
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

creo que yo busco algo aún más simple. Estoy intentando basarme en esto:

htmldog.com/articles/suckerfish/dropdowns/

pero no consigo adaptarlo a mi código. Alguien podría echarme un cable en qué cosas de mi css debo modificar?

el codigo html supongo que deberá ser algo asi:

<ul id="menu">
<li><a class="current" href="">¿Quiénes somos?</a></li>
<li><a href="servicios.aspx">Servicios</a></li>
<li><a href="galeria.aspx">Obras</a></li>
<li><a href="presupuestoTerm.aspx">Presupuestos</a></li>
<li><a href="ahorro.aspx">Consejos</a>
<ul>
<li><a href="servicios.aspx">Sublink1</a></li>
<li><a href="galeria.aspx">Sublink2</a></li>
<li><a href="servicios.aspx">Sublink3</a></li>
</ul>
</li>
<li><a href="ofertas.aspx">Ofertas</a></li>
<li><a href="noticias.aspx">Noticias</a></li>
<li><a id="last" href="#">Contacto</a></li>
</ul>

Última edición por javitxin10; 03/04/2009 a las 05:36
  #4 (permalink)  
Antiguo 03/04/2009, 10:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Pásate por la página de Mikmoro
http://www.araudi.net/ejemplos/menus...ables_CSS.html
Ahí tienes unos cuantos menús sólo con css, validados y multinavegador (incluido el ie6)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 03/04/2009, 10:34
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

solo veo los ejemplos de los menus funcionando, pero donde puede ver el código?
  #6 (permalink)  
Antiguo 03/04/2009, 10:35
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Más sencillo que todo eso. Los menus desplegables funcionan con listas anidadas que es exactamente lo que has hecho. Tu código HTML está bien..

Luego en la hoja de estilos tienes que crear las siguientes reglas:

# menu a {
display: block; /*en caso de que quieras añadir imágenes de fondo
width: ???px;
}
# menu li {
float: left; /*coloca los items del menú en horizontal
width: ???px;
}
#menu li ul { /*Esta es la lista anidada, el submenú desplegable
position: absolute;
width: ???px;
left: -1000 cm; /*para que desaparezca de la pantalla (puedes darle cualquier cantidad siempre que sea muuuucho)
}
#menu li:hover {
left: auto; /*para que vuelva a parecer el submenú al posarse sobre "consejos"
}

La anchura (width) depende de si todas las cajas y el desplegable tienan la misma. Si es así, procura darla a esos tres elementos.

Es básicamente lo mismo, o muy parecido, que lo que hacen en el ejemplo que mostrabas. Ahora te funcionará excepto en Explorer, que no admite pseudoclases a elementos que no sean anclas. Para que vaya bien, añade este código al <head>:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Suerte
__________________
}8[/
  #7 (permalink)  
Antiguo 03/04/2009, 10:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Varias opciones:
"guardar página completa como..."
También puedes seleccionar "ver código" y en el "head" verás esta referencia:
Cita:
<link rel="stylesheet" href="css/menu-1.css" type="text/css" />
sustituye en la barra de navegación el nombre del archivo: "..../archivo.html" por lo que te aparece en el href y tendrás también el código css.

Edito:
Hola Gorkreg
¿por qué el uso de js cuando javtxin no lo contempla en su pregunta inicial?
Creo que se va a liar más, pues si desconoce cómo obtener el css y html de una página cargada, no quiero pensar si le añadimos otras técnicas.
Cualquiera de los menús indicados funcionan perfectamente con ie6 y mayores.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 03/04/2009 a las 10:46
  #8 (permalink)  
Antiguo 03/04/2009, 11:11
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

muchas gracias a los dos, probaré con todo lo que me habeis aportado y sin tengo alguna duda, volveré a preguntar. gracias!
  #9 (permalink)  
Antiguo 03/04/2009, 15:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Cita:
Iniciado por kseso? Ver Mensaje
¿por qué el uso de js cuando javtxin no lo contempla en su pregunta inicial?
Creo que se va a liar más, pues si desconoce cómo obtener el css y html de una página cargada, no quiero pensar si le añadimos otras técnicas.
Cualquiera de los menús indicados funcionan perfectamente con ie6 y mayores.
Un saludo
Hola:

Totalmente de acuerdo.

Saludos.

  #10 (permalink)  
Antiguo 06/04/2009, 10:51
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

hola de nuevo! me sirvió de mucha ayuda el menu horizontal desplegable de 3 niveles de la pagina que me recomendaste con contenidos interesantes sacados del foro. Tras cambiar pequeñas cosas para que el menu tengo los colores que yo quiero, etc. sigo teniendo problemas ya que no se me ve exactamente igual en Internet Explorer que en Firefox. He aqui dos pantallazos:

img168.imageshack.us/my.php?image=menuenfirefox.jpg

img520.imageshack.us/my.php?image=menuenie.jpg

Logicamente yo quiero que el resultado sea como en Firefox, pero como veis IE solapa el boton del nivel2 del menu, y si añado un 3º nivel, ese boton aparece más separado.


podríais ayudarme a arreglar esto? Que parte del css debería tocar?

muchas gracias

Última edición por javitxin10; 07/04/2009 a las 01:58
  #11 (permalink)  
Antiguo 06/04/2009, 13:16
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Cita:
Iniciado por javitxin10 Ver Mensaje
solo veo los ejemplos de los menus funcionando, pero donde puede ver el código?
Hola:

En tu navegador -> Ver -> Código Fuente

Saludos.

  #12 (permalink)  
Antiguo 07/04/2009, 01:59
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
Respuesta: novato: alguien me ayuda a desplegar este menu horizontal

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

En tu navegador -> Ver -> Código Fuente

Saludos.

si, ya me di cuenta de que tenía que verlo así, ahora mi problema es el que comento en el mensaje anterior. gracias de todas formas
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 15:54.