如何使用HTML,CSS和JQuery创建CNN菜单导航
问题描述:
我想实现这种菜单导航(http://cnn.com),当你点击汉堡包图标时它会打开menu nav。我不确定这是否为模态,任何人都知道如何为这种菜单导航创建html,css和jquery?如何使用HTML,CSS和JQuery创建CNN菜单导航
答
这里的东西,让你开始:
$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>
+0
简直太神奇了,谢谢尼尔,你真棒。我会找出其余的。 –
哪里是你尝试代码 –
对不起,我没有创建一个呢,我在看一些例子,也许你可以提供一些链接或任何教程。谢谢。 –