Tema: problema con menu de hamburguesa
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2015, 02:57
rufus
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 15 años
Puntos: 1
problema con menu de hamburguesa
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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <header class="header_main">
  10.     <div class="headmenu">
  11.         <input type="checkbox" id="nav-toggle" class="nav-toggle">
  12.         <label for="nav-toggle" class="nav-toggle-label"> Menú</label>
  13.     </div>  
  14.  
  15.     <nav class="nav">
  16.  
  17.     
  18.     <ul class="nav_list">
  19.         <li>opcion1 </li>
  20.         <li>opcion2</li>
  21.         <li>opcion3</li>
  22.         <li>opcion4</li>
  23.     </ul>
  24.  
  25.     </nav>  
  26.     
  27.         
  28.     </div>
  29.  
  30. </header>
  31. </body>
  32. </html>

y el css

Código CSS: 
Ver original
  1. body
  2. {
  3.     background-color: #f4f4f4;
  4. }
  5. .nav
  6. {
  7.     height: 100vh;
  8.     width: 30%;
  9.     max-width: 200px;
  10.     position: absolute;
  11.     top:0;  
  12.     left:-200px;
  13.     background-color: white;
  14.     
  15. }
  16.  
  17. .nav li
  18. {
  19.     list-style-type: none;
  20.     display: block;
  21.     text-align: center;
  22.     line-height: 3;
  23.     
  24.     
  25.         color:#000000;
  26.         text-decoration: none;
  27.         font-size: 12px;
  28.         font-weight: bold;
  29.     
  30.         padding: 6px;
  31.  
  32.         
  33. }
  34.  
  35.  
  36. .nav-toggle
  37. {
  38.     /*display: none;*/
  39. }
  40. .nav-toggle-label::before
  41. {
  42.      content: "☰";
  43. }
  44. .nav-toggle:checked + .nav
  45. {
  46.     left:0;
  47. }
  48.  
  49.  
  50. .headmenu
  51. {
  52.     
  53.     height: 45px;
  54.     text-align: right;
  55.  
  56. }
  57.  
  58. .header_main
  59. {
  60.     
  61.     width: 340px;
  62.     height: 488px;
  63.     margin-right: auto;
  64.     margin-left: auto;   
  65.  
  66. }