在javascript中创建汉堡菜单 [英] create hamburger menu in javascript
问题描述
我需要帮助在javascript中创建汉堡包菜单。什么是最有效的方式来创建这个没有使用jquery？我在底部的JavaScript代码应该工作，但我错过了别的东西。
I need help creating a hamburger menu in javascript. What's the most efficient way to create this without using jquery? The javascript code that I have at the bottom should work but I'm missing something else.
<html>
<head>
<style>
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.75em;
border-top: 0.18em solid #000;
border-bottom: 0.18em solid #000;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.18em solid #000;
}
</style>
</head>
<body>
<span class="hamburger"></span>
<li>Development</li>
<li>Illustrations</li>
<script type="text/javascript">
var myEl = document.getElementById('hamburger');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
</script>
</body>
</html>
推荐答案
问题是
在不使用jquery的情况下，最有效的方法是什么？
What's the most efficient way to create this without using jquery?
纯CSS将会正常，我假设？
So pure CSS would be OK, I presume?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hamburger Menu</title>
<style>
ul {
list-style-type: none;
position: relative;
top: -200px;
transition: all .5s ease;
margin-right: 10px;
}
.nav {
display: none;
}
#nav:checked ~ ul {
top: 0;
}
#nav {
display: none;
}
.navmenu {
position: relative;
display: block;
margin: -1ex 10px -2ex 10px;
padding: 5px 20px;
background: linear-gradient(to right, #445566, #888);
color: #fff;
z-index: 999;
/* The UX expert said so */
cursor: pointer;
}
li {
background: linear-gradient(to right, #445566, #888);
color: white;
padding-left: 5em;
padding-top: 1ex;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="navigation">
<input type="checkbox" id="nav">
<label for="nav" class="navmenu">☰</label>
<ul>
<li>First entry</li>
<li>Second entry</li>
<li>Third entry</li>
<li>Fourth of July entry</li>
</ul>
</div>
</body>
</html>
定位是有点丑陋，承认，但你可以自我调节。
The positioning is a bit ugly, admitted, but you can finetune yourself.
导航列表位于顶部，当您选中复选框时，它会向下滚动。 burger在复选框的标签元素中，并且选中/取消选中该复选框会更改属性顶部的值 ul 元素。
The navigation-list is over the top first and rolls down when you check the checkbox. The "burger" is in the label element for the checkbox and checking/unchecking the checkbox changes the value of the attribute top of the ul element.
这篇关于在javascript中创建汉堡菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
