Foros del Web » Creando para Internet » CSS »

Creacion de un menu para web tipo "Sprite" desplegable

Estas en el tema de Creacion de un menu para web tipo "Sprite" desplegable en el foro de CSS en Foros del Web. Hola a todos. Tengo diseñado menu de tipo "Sprite" que me gustaria que fuera desplegable. Imagino que habreis visto el menu de la web de ...
  #1 (permalink)  
Antiguo 11/12/2009, 05:39
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Creacion de un menu para web tipo "Sprite" desplegable

Hola a todos.

Tengo diseñado menu de tipo "Sprite" que me gustaria que fuera desplegable. Imagino que habreis visto el menu de la web de Apple (no es por hacer publicidad :P) solo que en mi caso he tenido que especificar en cada enlace el tamaño de la seccion ya que no es la mismo que en caso de Apple. Pongo de ejemplo una web para que veais lo que quiero conseguir.

w.w.w.elcorteingles.es (No pretendo hacer SPAM es poner un ejemplo).

¿Es posible hacerlo por CSS sin morir en el intento? He visto que se puede hacer con imagenes por separado pero en mi caso es una imagen con los tres estados (normal, encima [rollover] y pulsando).

Tambien tengo que decir que el tamaño de cada uno de los submenus sera diferente y tendria otro submenu que saldria por la derecha.

Saludos y Gracias.

Última edición por Mr_Raymon; 11/12/2009 a las 13:18
  #2 (permalink)  
Antiguo 11/12/2009, 08:48
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
De acuerdo Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Hola, prueva este, puedes ir agregando submenus, creando una lista <ul> dentro de un elemento <li>:

HTML:

Código:
<div id="menu">
<div class="container850">
<ul id="navmenu-h">
<li><a href="index.php">Inicio</a></li>
<li><a href="nosotros.php">&iquest;Qui&eacute;nes Somos? +</a>
<ul>
<li><a href="nosotros/submenu1.php">Submenu1</a></li>
</ul>
</li>
<li><a href="servicios.php">Nuestros Servicios +</a></li>
</ul>
</div>
</div>
CSS:

Código:
#menu{
width:100%;
border-bottom: solid 4px #b2daf7;
height:44px;
}
.container850{
width:850px;
margin:auto;
}

ul#navmenu-h { margin: 0 0 0 20px; padding: 0; list-style: none; position: relative;}

ul#navmenu-h ul {
 width: 190px; /* Sub Menu Width */
 margin: 0;
 list-style: none;
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
}

ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }

ul#navmenu-h li { float: left; display: inline; position: relative;}
ul#navmenu-h ul li { width: 100%; display: block;}

/* Root Menu */
ul#navmenu-h a {
 border-top: 1px solid #FFF;
 border-right: 1px solid #FFF;
 float: left;
 display: block;
 background: #d5ecfb;
 color: #69c;
 font: bold 0.76em Arial, sans-serif;
 text-decoration: none;
 height: 1%;
}
ul#navmenu-h > li a {
 padding: 13px 22px;
}
ul#navmenu-h ul a {
 padding: 6px 10px;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
 background: #69c;
 color: #FFF;
}

ul#navmenu-h .selected{
background:#b3dbf5;
}

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

/* 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: #039;
}

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

/* 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: #666;
}

/* 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: #666;
}

/* 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: #333;
}

/* Hover Function - Do Not Move */
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; }
  #3 (permalink)  
Antiguo 11/12/2009, 13:15
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Gracias por responder AhmedRugama y por el menu.

Aunque me gustaria que me explicaras como lo has creado paso a paso y como aplicarlo a un menu creado al estilo "Sprite".

De todas formas voy a cambiar el ejemplo por una web para que todo el mundo vea, mas o menos lo que quiero conseguir.

Saludos y Gracias.
  #4 (permalink)  
Antiguo 11/12/2009, 14:14
Avatar de armandoweb  
Fecha de Ingreso: enero-2003
Ubicación: San Cristobal, Santa Fe, Argentina
Mensajes: 544
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Hola:

Revisa estos ejemplos:

http://jorenrapini.com/blog/web-deve...overs#post-137
http://www.cristalab.com/tips/menu-c...rites-c65689l/
http://alexsancho.name/archives/2005...ontal-con-css/

Saludos.
__________________
www.awdesarrollos.com.ar - [twitter: @armandoweb] - [Skype: awdesarrollos"]
  #5 (permalink)  
Antiguo 11/12/2009, 14:18
Avatar de armandoweb  
Fecha de Ingreso: enero-2003
Ubicación: San Cristobal, Santa Fe, Argentina
Mensajes: 544
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Hola de nuevo:

Aqui hay una variacion de uno de los ejemplos anteriores que se hace desplegable:

http://jorenrapini.com/blog/web-deve...downs#post-170

Saludos.
__________________
www.awdesarrollos.com.ar - [twitter: @armandoweb] - [Skype: awdesarrollos"]
  #6 (permalink)  
Antiguo 11/12/2009, 14:58
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Cita:
Iniciado por armandoweb Ver Mensaje
Hola de nuevo:

Aqui hay una variacion de uno de los ejemplos anteriores que se hace desplegable:

[url]http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170[/url]
Esto es justo lo que quiero hacer solo que el menu seria en horizontal. El menu ya lo tengo hecho hace tiempo en CSS con los 3 estados (normal, hover y active). Seria hacerlo sin volverme loco ya que necesito verlo paso a paso para enterarme bien del asunto.

Saludos.
  #7 (permalink)  
Antiguo 19/12/2009, 05:01
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Estoy trasteando con el tema del menu y tengo algunas dudas:

- Es una pregunta tonta pero realmente ¿que significa esto? (ejemplo de la web publicada por armandoweb):

#navigation ul :hover ul ul
#navigation ul :hover ul :hover ul

Entiendo que dentro de #navigation ataca al ul y le añade el efecto hover pero y ¿lo de despues? No lo entiendo muy bien.

- Otra duda que tengo es si es mas correcto poner "display:none" o "visibility:hidden". En teoria es mas correcto el visibility ya que de alguna manera con display desaparece y no lo oculta como lo haria con visibility. Tambien es mas recomendable para los buscadores.

¿Que opinais al respecto?

Saludos y Gracias.
  #8 (permalink)  
Antiguo 19/12/2009, 14:21
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

supongo que es por el tratado al submenu que deberia estar en un ul ej.

Código HTML:
Ver original
  1. <ul>
  2. <li>a</li>
  3. <li>
  4.   <ul>
  5.     <li>b</li>
  6.   </ul>
  7. </li>
  8. </ul>
  #9 (permalink)  
Antiguo 20/12/2009, 13:54
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Hola, Mr_Raymon

lo de #navigation ul :hover ul :hover ul se refiere al ul que esta dentro del li del primer ul, asi como te respondio bkolores,


la diferencia entre display:none y visibility: hidden
es que con visibility:hidden el objeto toma el espacio que requiere aunque esta oculto, con display:none es como si no estuviera
  #10 (permalink)  
Antiguo 02/01/2010, 16:24
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Tengo un par de dudas mas sobre el menu. Adjunto imagen.



He conseguido añadir a cada elemento del menu la imagen del circulo con la flecha mediante una clase y en esa clase añadir un background con el enlace de la imagen a cada "li". El problema que tengo es que si alguien quiere acceder al submenu es mas complicado ya que no tiene suficiente ancho y por lo tanto desaparece. Si amplio el ancho de los li queda bastante feo y me gustaria que fuese accesible sin que quede feo. SOLUCIONADO

La otra duda que tengo es como conseguir poner una linea verde a cada elemento. Se me ha ocurrido que podria hacerlo añadiendo un div debajo de cada elemento, background y repetido en X. Imagino que no creo que sea la mejor solucion pero ¿hay otra en esta situacion?

Saludos y Gracias.

Última edición por Mr_Raymon; 03/01/2010 a las 13:33
  #11 (permalink)  
Antiguo 03/01/2010, 13:32
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Primera duda resuelta. Lo que hecho en vez de poner la posicion "right" le he puesto un numero en pixeles y arreglado.

Pero todavia no se como solucionar lo de la linea.

Saludos.
  #12 (permalink)  
Antiguo 04/01/2010, 05:06
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable

Segunda duda resuelta. Funciona poniendo un div y una imagen de fondo repetida en X, aunque no es el mejor metodo pero en mi caso es valido ya que asi puedo poner las lineas con relieve.

Tambien valdria añadir la propiedad border-bottom a los <li> pero se aplicaria a todos y no tendria el relieve.

Saludos.
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 12:11.