problema con menu de hamburguesa

rufus · #1 (**permalink**) 21/09/2015, 02:57

Hola...estoy intentando hacer un menu de hamburguesa que esta oculto y al pulsar sobre un checkbox , el menú sale hacia la derecha pero no me funciona, pensaba que era algo del menú de wordpress, pero he hecho otro ejemplo en un archivo index.php basico con solo html y css, tampoco me funciona...les dejo el codigo por si encuentran el fallo...yo por más que lo reviso no encuentro donde me falla

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header_main">
    <div class="headmenu">
        <input type="checkbox" id="nav-toggle" class="nav-toggle">
        <label for="nav-toggle" class="nav-toggle-label"> Menú</label>
    </div>  
 
    <nav class="nav">
 
    
    <ul class="nav_list">
        <li>opcion1 </li>
        <li>opcion2</li>
        <li>opcion3</li>
        <li>opcion4</li>
    </ul>
 
    </nav>  
    
        
    </div>
 
</header>
</body>
</html>

y el css

Código CSS:

Ver originalbody
{
    background-color: #f4f4f4;
}
.nav
{
    height: 100vh;
    width: 30%;
    max-width: 200px;
    position: absolute;
    top:0;  
    left:-200px;
    background-color: white;
    
}
 
.nav li
{
    list-style-type: none;
    display: block;
    text-align: center;
    line-height: 3;
    
    
        color:#000000;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
    
        padding: 6px;
 
        
}
 
 
.nav-toggle
{
    /*display: none;*/
}
.nav-toggle-label::before
{
     content: "☰";
}
.nav-toggle:checked + .nav
{
    left:0;
}
 
 
.headmenu
{
    
    height: 45px;
    text-align: right;
 
}
 
.header_main
{
    
    width: 340px;
    height: 488px;
    margin-right: auto;
    margin-left: auto;   
 
}

AngelKrak · #2 (**permalink**) 21/09/2015, 07:18

Tienes que meter tu Menu Nav al mismo div donde esta el checkbox para que funcione(bueno a mi me funciono así).

y en el CSS, Buscas:

Código CSS:

Ver original.nav-toggle:checked + .nav
{
    left:0;
}

y lo cambias por:

Código CSS:

Ver original.nav-toggle:checked ~ .nav
{
    left:0;
}

Demo:
http://codepen.io/AngelKrak/pen/GpqvGJ

rufus · #3 (**permalink**) 22/09/2015, 05:04

illo. gracias ya me funciona con tu ayuda mil gracias