[SOLUCIONADO] Hacer submenú deslizante

[kovicic]

Hola, lo que quiero hacer es que cada submenú sustituya en el display al menú principal.
Esto es si doy click, aparece desde derecha a izq el submenú y desaparece el menú principal. Hasta ahora lo que logré es esto, pero despliega el submenú tipo drop down y no es lo que busco. Les agradezco si pueden sugerirme cambios. Gracias.

http://jsfiddle.net/s1fpz40c/1/

[MMan]

http://jsfiddle.net/s1fpz40c/3/

[kovicic]

gracias!, se acerca. pero lo que quiero es que el menú principal desaparezca y quede el submenú. De todos modos voy a trabajar sobre tu ejemplo.
Quiero lograr algo como esto:

http://tympanus.net/Development/Mult...nu/index2.html

[lauser]

Iniciado por kovicic

gracias!, se acerca. pero lo que quiero es que el menú principal desaparezca y quede el submenú. De todos modos voy a trabajar sobre tu ejemplo.
Quiero lograr algo como esto:

http://tympanus.net/Development/Mult...nu/index2.html

Y porque no descargas el código del ejemplo que tu mismo has puesto?
http://tympanus.net/Development/Mult...elPushMenu.zip

[MMan]

http://jsfiddle.net/s1fpz40c/4/


otro intento desde 0

[kovicic]

@MMan, exacto, eso mismo!. Gracias, voy a estudiarlo y pulirlo un poco para suavizar las transiciones.

@lauser, el ejemplo que puse era más difícil de entender y personalizar, al menos para mi.

Tengo poca experiencia en html5 y css3, estoy comenzando recién.

Saludos!

[jorgecominges]

No se si llego tarde pero podrías probar con este, que tiene varias transiciones y el resultado es bastante vistoso.

[URL="http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/"]http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/[/URL]

[kovicic]

Iniciado por kovicic

@MMan, exacto, eso mismo!. Gracias, voy a estudiarlo y pulirlo un poco para suavizar las transiciones.

@lauser, el ejemplo que puse era más difícil de entender y personalizar, al menos para mi.

Tengo poca experiencia en html5 y css3, estoy comenzando recién.

Saludos!

Estimados, basándome en el ejemplo de @MMan, hice el menú con algunas adaptaciones. Pero el jfiddle hecho por @MMan http://jsfiddle.net/s1fpz40c/4/ fue la referencia.

Lo que no logro hacer andar es cuando el submenú consiste en checkboxes.
No respeta el background y al clickearlo desliza el menú hacia la derecha.

Esta es la base del código:

Código:

<ul class="menu">
                    <li tabindex="1" class="lsm"><span class="menu1">Home &gt;</span>
                        <ul class="submenu">
                            <li><a href="#" class="back">Volver</a></li>                            
                            <li><a href="#" class="home">Home 11</a></li>
                            <li><a href="#" class="users">Home 12</a></li>
                            
                            <li><span id="h13" class="fijo">Home 13</span></li> <!--funciona -->
                            <li><span id="h14" class="fijo">Home 14 <input type="checkbox"/></span>  <!-- checkbox -->
                                                                
                            </li>

                            <!--li ><span class="menu1">Home 14</span></li-->

                        </ul>   
                       
                    </li>
                    <li tabindex="2" class="lsm"><span class="menu2">Explore &gt;</span>
                        
                    </li>
                    <li tabindex="3"><span class="menu3"> Users</span></li>
                    <li tabindex="4"><span class="menu4"> Sign Out</span></li>
                </ul>

Código:

#sidebar ul li ul li span input [type="checkbox"] {

  display: none;
  background-color: #fefefe;
  display: inline-block;
  border: 1px solid;
  border-color: #ccc #fff #fff #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  display: inline-block;
  float: right;  
  right: 40px;
  margin-right: 7px;
  padding: 7px;
  position: relative;
  z-index: 15;
}


input[type="checkbox"]:checked  {
  color: #fff;
  content: "\2714";
  font-size: 13px;
  left: 2px;
  position: absolute;
  top: 1px;

}

Gracias!!

[MMan]

http://jsfiddle.net/nvzfh8ek/

y otra vez desde 0, buena la practica

con checkboxes

aunque le falta arreglar las animaciones

[kovicic]

Gracias, se acerca muuucho a lo que intentaba. Voy a estudiarlo.

[kovicic]

Iniciado por MMan

http://jsfiddle.net/nvzfh8ek/

y otra vez desde 0, buena la practica

con checkboxes

aunque le falta arreglar las animaciones

Hola @MMan, respecto al código anterior cuando usabas jquery y sin checkboxes http://jsfiddle.net/s1fpz40c/4/, he notado que esta sentencia afecta a las etiquetas <a>. ¿Se puede evitar?

Código:

#sidebar ul li:focus ul,
#sidebar ul li:active ul{
    right:0px;
}

Cada vez que clickeo en una en una sentencia del tipo:
<li><a> ...el menú desliza, y no es la idea.
Lo "solucioné", poniendo <li><span> en su lugar.

No entiendo porqué funciona así. Gracias!!