javascript - CSS3 和 jQuery 中的简单推送菜单

Question

我正在尝试在我的网站中添加一个推送菜单。此菜单必须从左侧滑出并且应与当前页面重叠。我正在使用以下代码，但它不起作用。我有什么遗漏或做错了吗？

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);
     }

Java脚本:

            $(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

为您创建了一个工作示例。希望对您有所帮助!

$(".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>