Foros del Web » Creando para Internet » CSS »

Menu despegable con solo css

Estas en el tema de Menu despegable con solo css en el foro de CSS en Foros del Web. Hola, me problema es que tengo un menú normal que despliega subcategorías pero me gustaría saber como se podría hacer que cuando pasas por una ...
  #1 (permalink)  
Antiguo 21/01/2012, 16:43
seravifer
Invitado
 
Mensajes: n/a
Puntos:
Menu despegable con solo css

Hola, me problema es que tengo un menú normal que despliega subcategorías pero me gustaría saber como se podría hacer que cuando pasas por una categoría y se despliegan la subcategorías, entre ellas salga un icono como una flecha.

Pueden ver el código en http://www.seravifer.familiapixel.com esta pagina es una prueba.
  #2 (permalink)  
Antiguo 21/01/2012, 17:15
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años, 7 meses
Puntos: 116
Respuesta: Menu despegable con solo css

Podrias mostrar un diseño "demo" del resultado que quieres.
No entiendo al 100, eso de una flechita entre ellas.
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 21/01/2012, 17:39
seravifer
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu despegable con solo css

  #4 (permalink)  
Antiguo 21/01/2012, 22:18
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Menu despegable con solo css

Hola
Primero corrige el error que tienes en el menú: una lista tiene esta estructura <ul><li></li></ul> y no <li><ul></ul></li>
Código HTML:
Ver original
  1. <div id="menu">
  2.  
  3.           <div class="left">
  4.  
  5.             <li class="cat-item cat-item-1"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/" title="Ver todas las entradas archivadas en Sin categoría">Sin categoría</a>
  6. <ul class='children'>
  7.     <li class="cat-item cat-item-3"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/1/" title="Ver todas las entradas archivadas en 1">1</a>
  8. </li>
  9.     <li class="cat-item cat-item-4"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/2/" title="Ver todas las entradas archivadas en 2">2</a>
  10. </li>
  11.     <li class="cat-item cat-item-5"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/3/" title="Ver todas las entradas archivadas en 3">3</a>
  12.     <ul class='children'>
  13.     <li class="cat-item cat-item-6"><a href="http://www.seravifer.familiapixel.com/category/sin-categoria/3/4/" title="Ver todas las entradas archivadas en 4">4</a>
  14. </li>
  15.     </ul>
  16. </li>
  17. </ul>
  18. </li>
  19.      </div>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 22/01/2012, 06:37
seravifer
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu despegable con solo css

Dudo que pueda cambiar la estrucctura, esta con wordpress...

Diseño:
Cita:
<div id="menu">
<div class="left">
<?php wp_list_categories('title_li=&orderby=id'); ?>
</div>

Última edición por seravifer; 22/01/2012 a las 06:57
  #6 (permalink)  
Antiguo 22/01/2012, 06:57
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Menu despegable con solo css

¿Pero entonces como piensas realizar el agregado de la flechita?

En cuanto al error solamente debes agregar <ul> antes de <li class="cat-item cat-item-1">
y cerrarlo al final de todo.

Para la flechita, una posibilidad es meter una imagen dentro de un <li> o un div con position:absolute. Es decir que es posible que tengas que cambiar el html.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 22/01/2012, 06:58
seravifer
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu despegable con solo css

http://codex.wordpress.org/Template_Tags/wp_list_categories
  #8 (permalink)  
Antiguo 22/01/2012, 07:03
seravifer
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu despegable con solo css

Ok meto el ul delante y ahora la flechita como la pongo.

Última edición por seravifer; 22/01/2012 a las 07:57
  #9 (permalink)  
Antiguo 23/01/2012, 05:06
danihxh
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu despegable con solo css

Si quieres utilizar sólo CSS añade un padding-top: 10px al <ul> y lo siguiente en tu hoja de estilos:

Código:
.children::before
{
	border-bottom: 10px solid red;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: relative;
	left: 10px;
	top: 2px;
	height: 0;
	width: 0;
	z-index: 10;
	content: "";
	display: block;
}
Si prefieres hacer otra cosa para segurar la compatibilidad con otros navegadores prueba a añadir algo como <div class="flecha"></div> dentro del <ul> (con el mismo padding-top que antes) y le pones también el mismo estilo o si lo prefieres lo modificas un poco y pones una imagen de una flecha de fondo.

Etiquetas: despegable
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 17:12.