Hacer submenú deslizante

[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!!