如何使用HTML、CSS和JQuery创建CNN菜单导航

Question

我想实现这种菜单导航(http://cnn.com)，当你点击汉堡包图标它打开菜单导航。我不确定这是否是模式，有人知道如何为这种菜单导航创建html、css和jquery吗？

​

​

Answer 1

这里有件事可以让你开始：

​

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

​