Foros del Web » Creando para Internet » CSS »

Menú despleglable acordeón css3

Estas en el tema de Menú despleglable acordeón css3 en el foro de CSS en Foros del Web. En esta web: [URL="http://waluxaluminium.es"]waluxaluminium.es[/URL] Necesito que en el menú no desaparezca la lista al pinchar sobre un item desplegado, es decir, si hago clic en ...
  #1 (permalink)  
Antiguo 26/08/2014, 14:48
 
Fecha de Ingreso: agosto-2014
Mensajes: 2
Antigüedad: 10 años, 3 meses
Puntos: 0
Pregunta Menú despleglable acordeón css3

En esta web:

[URL="http://waluxaluminium.es"]waluxaluminium.es[/URL]

Necesito que en el menú no desaparezca la lista al pinchar sobre un item desplegado, es decir, si hago clic en "Quiénes somos", por ejemplo, que se mantenga abierto el submenú.

Este es el código html:

Código HTML:
Ver original
  1. <nav>
  2.         <section id="ac1" class="ac1">  
  3.             <a href="#ac1">Empresa</a>
  4.              <ul>
  5.            <li><a href="#">Quiénes somos</a></li>
  6.            <li><a href="#">Garantía</a></li>
  7.            <li><a href="#">Servicios</a></li>
  8.         </ul>
  9.         </section>  
  10.         <section id="ac2" class="ac2">  
  11.             <a href="#ac2">Productos</a>  
  12.             <ul>
  13.            <li><a href="#">Aluminio</a></li>
  14.            <li><a href="#">Aluminio-madera</a></li>
  15.            <li><a href="#">Techos</a></li>
  16.         </ul>
  17.         </section>  
  18.         <section id="ac3" class="ac3">  
  19.             <a href="#ac3">Accesorios</a>
  20.             <ul>
  21.             <li><a href="#">Herrajes</a></li>
  22.             <li><a href="#">Vídrios</a></li>
  23.             <li><a href="#">Persianas</a></li>
  24.         </ul>
  25.         </section>  
  26. </nav>

Y este el css:

Código CSS:
Ver original
  1. nav section {
  2.     display: block;
  3.     height: 2em;  
  4.     margin: 0 0 0.5em 0;  
  5.     overflow: hidden;  
  6.     padding: 0 1em;  
  7. }
  8.  
  9. nav section:target.ac1, nav section:target.ac2, nav section:target.ac3  {  
  10.     height: 10em;}
  11.  
  12. nav section {  
  13.     transition: all 1s ease;  
  14. }

Última edición por pzin; 26/08/2014 a las 15:37 Razón: formato código
  #2 (permalink)  
Antiguo 27/08/2014, 03:55
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 9 meses
Puntos: 998
Respuesta: Menú despleglable acordeón css3

para eso a la sección que quieres que quede abierta debes de darle una clase "selected" y a dicha clase también darle un height de 10em
y me parece que no son necesarias las clases en el :target, te quedaría así:
Código CSS:
Ver original
  1. nav section:target,
  2. nav section.selected  {
  3.     height: 10em;}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 28/08/2014, 10:12
 
Fecha de Ingreso: agosto-2014
Mensajes: 2
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Menú despleglable acordeón css3

Gracias webosiris, pero no me funciona así

Etiquetas: menu-acordion, menu-desplegable, menu-dinamico
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 13:26.