CSS3 和 jQuery 中的简单推送菜单答案

【问题标题】：Simple Push Menu in CSS3 and jQueryCSS3 和 jQuery 中的简单推送菜单
【发布时间】：2015-11-24 04:53:09
【问题描述】：

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

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>

【问题讨论】：

标签： javascript jquery css

【解决方案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>

【讨论】：

【解决方案2】：

在您的代码中：

缺少#toggle-menu 元素
您将display:none 设置为#menu 样式
jQuery sintax 添加.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>

【讨论】：