jQuery侧边栏菜单

Question

您能帮我改善下面的代码吗？ 我正在尝试使用jquery的侧边栏菜单，但是我不知道我要去哪里错了...这里是我的代码：

html:
    <!DOCTYPE html>
    <html lang="PT-BR">
      <head>
        <meta charset="utf-8">
        <title>Teste Menu c Javascript</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="/js/jquery-3.2.0.min.js">
      </head>
      <body>
        <div class="sidebar">
         <ul>
           <h2>Menu</h2>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
         </ul>
        </div>
        <div class="nav">
            <img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/>
        </div>
       <script src="js/script.js"></script>
     </body>
    </html>

css:
    body{
     margin: 0;
    }

    .sidebar{
     position: absolute;
     width: 250px;
     height:100%;
     background: #333;
     color: white;
     font-family: arial;
      outline: 1px solid #2a2a2a;
    }

    .sidebar h2{
     text-align: center;
     margin: 0;
     padding: 10px;
     background: #2a2a2a;
    }

    .sidebar ul{
     list-style: none;
     padding: 0;
     margin: 0;
    }

    .sidebar li{
     outline: 1px solid #2a2a2a;
     transition: all 0.3s;
    }

    .sidebar li:hover{
     background: #444;
     border-left: 5px solid #eee;
    }

    .sidebar a{
     text-decoration: none;
     color: white;
     display: block;
     padding: 10px;

    }
    .nav{
     width: 100%;
     height: 100%;
     position: absolute;
     background: white;
     padding: 30px;
     transition: all 0.3s;

    }

    .menu-bar{
     cursor: pointer;
    }

    .open{
     transform: translateX(250px);
    }

js:

    $('.menu-bar').on('click', function(){
     $('.nav').toggleClass('open');
    });

我不知道问题是jquery链接还是其他问题...

Answer 1

您的代码并不完全正确。 从语义的角度来看，h2标签（什么也没有）应该保留在ul标签之内和li标签之外。

这里简单的例子：

本示例使用css translation3d功能，该功能在GPU而不是CPU上运行，这对于性能问题而言是一件好事。

https://jsfiddle.net/c4hjhbp4/

HTML

<div class="nav">
  <button id='show-hide-menu'>
    Menu
  </button>
</div>
<div class="sidebar-container">
  <div class="sidebar" id='sidebar'>
     <h2>Menu</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

javascript（jQuery）

$('#show-hide-menu').click(function() {
    if ($('#sidebar').hasClass('visible')) {
    $('#sidebar').removeClass('visible');
  } else {
    $('#sidebar').addClass('visible');
  }
});

CSS

body, html {
  margin: 0;
  padding: 0;
}
.sidebar-container {
  position: relative;
  width: 0;
  height: 0;
}

.sidebar {
  position: absolute;
  width: 230px;
  height: 400px;
  background: #ccc;
  transform: translate3d(-230px,0,0);
  transition: transform 0.5s;
}`enter code here`

jQuery侧边栏菜单

问题描述

1 个解决方案

解决方案1
0 2017-04-06 20:23:02

jQuery侧边栏菜单

问题描述

1 个解决方案

解决方案1 0 2017-04-06 20:23:02

解决方案1
0 2017-04-06 20:23:02