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

Question

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

CNN Menu Nav

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>

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

How to create a CNN Menu Navigation using HTML, CSS and JQuery

html

css

responsive