html - 如何使用HTML，CSS和JQuery创建CNN菜单导航

我想实现这种菜单导航（http://cnn.com），当您单击汉堡包图标时，它将打开菜单导航。我不确定这是否是模态的，有人知道如何为这种菜单导航创建html，css和jquery吗？

最佳答案

以下是一些入门知识：

$hamberger = $("#hambergerMenu");
$("#triggerMenu").click(function() {
  $hamberger.show(500);
});

$("#closeHamberger").click(function() {
  $hamberger.hide(500);
});

#hambergerMenu {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #a6a6a6;
}

#closeHamberger {
  margin: 10px;
  position: fixed;
  right: 0;
  font-size: 2em;
  top: 0;
  text-decoration: none;
  color: white;
}

#hambergerMenu ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<img id="triggerMenu" src="http://neil.computer/stack/3line.png" />
<div id="hambergerMenu">
  <a id="closeHamberger" href="javascript:void(0)">X</a>
  <ul>
    <li>
      Content
    </li>
    <li>
      Good Content
    </li>
    <li>
      Bad Content
    </li>
    <li>
      Meh Content
    </li>
    <li>
      SO Content
    </li>
  </ul>
</div>

关于html - 如何使用HTML，CSS和JQuery创建CNN菜单导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42825556/