Простое меню Push в CSS3 и jQuery

Question

Я пытаюсь добавить меню push на своем веб-сайте. Это меню должно выдвигаться слева и должно перекрывать текущую страницу. Я использую следующий код, но он не работает. Есть что-то, что я упускаю или делаю неправильно?

CSS:

#menu { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: -240px ; 
     position: fixed; 

    width: 240px; 
     height: 100%; 
    padding: 15px 25px; 
    margin: 0; 

    list-style: none; 
    background: #333; 
    z-index: 9999; 

     transition: all 0.3s ease; 
     -webkit-transition all 0.3s ease; 
    } 

    #menu a { 
     display: block; 
     color: #fff; 
     padding: 15px 0; 
     border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    } 

    .animate { 
      transform: translateX(240px); 
     -webkit-transform: translateX(240px); 
    } 

JavaScipt:

  $(function() { 
        $('#toggle-menu').click(function() { 
          toggleMenu(); 
        }); 
      })(jQuery); 



     function toggleMenu() { 
       if ($('#menu').hasClass('animate')) { 
        $('#menu').removeClass('animate'); 
           } 
       else { 
         $('#menu').addClass('animate'); 
         } 

       //$('#menu').toggleClass('animate'); 
      } 

HTML:

 <div id="menu"> 
      <ul> 
      <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       </ul> 
       </div> 

Answer 1

В коде:

• Там не хватает на #toggle-menu элемент
• Вы устанавливаете display:none в #menu стиле
• JQuery синтаксисом добавив .click() событие

Ваш код фиксирован, и рабочий JSFiddle (http://jsfiddle.net/bL62bek2/)

$('#toogle-menu').click(function() { 
 
    toggleMenu(); 
 
}); 
 

 
$('#menu').click(function() { 
 
    toggleMenu(); 
 
}); 
 

 
function toggleMenu() { 
 
    if ($('#menu').hasClass('animate')) { 
 
     $('#menu').removeClass('animate'); 
 
    } else { 
 
     $('#menu').addClass('animate'); 
 
    } 
 
    //$('#menu').toggleClass('animate'); 
 
}

#toogle-menu{ 
 
    position:absolute; 
 
    right:0px; 
 
    top:30px; 
 
    cursor:pointer; 
 
    padding: 3px; 
 
    background-color:#333; 
 
    color:#fff; 
 
} 
 
#menu { 
 
    /*display: none;*/ 
 
    position: absolute; 
 
    top: 0; 
 
    left: -240px ; 
 
    position: fixed; 
 

 
    width: 240px; 
 
    height: 100%; 
 
    padding: 15px 25px; 
 
    margin: 0; 
 

 
    list-style: none; 
 
    background: #333; 
 
    z-index: 9999; 
 

 
    transition: all 0.3s ease; 
 
    -webkit-transition all 0.3s ease; 
 
    } 
 

 
#menu a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 15px 0; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
 
} 
 

 
.animate { 
 
    transform: translateX(240px); 
 
    -webkit-transform: translateX(240px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 

 
<div id="toogle-menu">menu</div> 
 
<div id="menu" class="animate"> 
 
    <ul> 
 
     <li><a href="#"> Home </a></li> 
 
     <li><a href="#"> Home </a></li> 
 
     <li><a href="#"> Home </a></li> 
 
    </ul> 
 
</div>

Answer 2

создал рабочий пример для вас. Надеюсь, поможет!

$(".menu").click(function() { 
 
    $('#menu').toggleClass('animate'); 
 
});

body { 
 
    overflow: hidden; 
 
} 
 
#menu { 
 
    top: 50px; 
 
    transform: translateX(-300px); 
 
    -webkit-transform: translateX(-300px); 
 
    position: fixed; 
 
    width: 240px; 
 
    height: 100%; 
 
    padding: 15px 25px; 
 
    margin: 0; 
 
    list-style: none; 
 
    background: #333; 
 
    z-index: 9999; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition all 0.3s ease; 
 
} 
 
#menu a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 15px 0; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
 
} 
 
#menu.animate { 
 
    transform: translateX(0); 
 
    -webkit-transform: translateX(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <ul> 
 
    <li><a href="#"> Home </a> 
 
    </li> 
 
    <li><a href="#"> Home </a> 
 
    </li> 
 
    <li><a href="#"> Home </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="menu">click</div>