jQuery中的汉堡菜单

时间：2016-11-01 09:30:11

标签： javascript jquery html css

我刚开始使用jQuery，并试图制作一个汉堡包菜单。是否可以只将菜单作为右上角的小方块和左上角的徽标？

现在菜单中的黑条就像导航栏一样填充。

$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

$(".cross").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".cross").hide();
    $(".hamburger").show();
  });
});
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
}
header {
  width: 100%;
  background: #1d1f20;
  height: 60px;
  line-height: 60px;
}
.hamburger {
  background: none;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}
.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 0;
  padding: 13px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}
.menu {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  width: 100%;
  background: #131313;
  position: absolute;
  text-align: center;
}
.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
.menu li {
  display: block;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}
.menu li:hover {
  display: block;
  background: #181818;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}
.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}
.menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}
.menu a {
  text-decoration: none;
  color: white;
}
.menu a:hover {
  text-decoration: none;
  color: white;
}
.glyphicon-home {
  color: white;
  font-size: 1.5em;
  margin-top: 5px;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>

<div class="menu">
  <ul>
    <a href="#">
      <li>Forside</li>
    </a>
    <li class="dropdown">
      <a href="#" class="dropbtn">Møbler</a>
      <div class="dropdown-content">
        <a href="http://facebook.com">Stole</a>
        <a href="#">Border</a>
        <a href="#">Sofaer</a>
      </div>
    </li>
    <a href="#">
      <li>Blog</li>
    </a>
    <a href="#">
      <li>Leverandøre</li>
    </a>
    <a href="#">
      <li>Om Os</li>
    </a>
  </ul>
</div>

2 个答案:

答案 0 :(得分：0)

试试这个。使用Jquery。

＆＃13;
＆＃13; 
$(".hamburger").click(function() {
  $(this).hide();
  $('.cross').show();
  $(".menu").slideToggle();
});
$(".cross").click(function() {
  $(this).hide();
  $('.hamburger').show();
  $(".menu").slideToggle();
});
＆＃13; 
body{
	font-family: 'Noto Sans', sans-serif;
	margin:0;
	width:100%;
	height:100vh;
}
header{
	width:100%; 
	background:#1d1f20; 
	height:60px; 
	line-height:60px;
}

.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:13px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
  display:none;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313;  position:absolute; text-align:center;display:none;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu li:hover{display: block;    background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#fff;}
.menu ul li a:hover {  color: #fff; text-decoration:none;}
.menu a{text-decoration:none; color:white;}
.menu a:hover{text-decoration:none; color:white;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
.active{
  display:block;
  transition:all ease 0.3s;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>

<div class="menu">
  <ul>
    <a href="#"><li>Forside</li></a>
	<li class="dropdown">
    <a href="#" class="dropbtn">Møbler</a>
    <div class="dropdown-content">
      <a href="http://facebook.com">Stole</a>
      <a href="#">Border</a>
      <a href="#">Sofaer</a>
    </div>
  </li>
    <a href="#"><li>Blog</li></a>
    <a href="#"><li>Leverandøre</li></a>
    <a href="#"><li>Om Os</li></a>
  </ul>
</div>
 <script>


</script>
 
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你的代码看起来应该像这样。 你还应该添加一些if / else

您可以在此处详细了解：http://www.w3schools.com/js/js_if_else.asp

只需在您的本地项目中尝试此代码！

＆＃13;
＆＃13; 
body{
	font-family: 'Noto Sans', sans-serif;
	margin:0;
	width:100%;
	height:100vh;
}
header{
	width:100%; 
	background:#1d1f20; 
	height:60px; 
	line-height:60px;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:13px 15px 0px 15px;
  color:#fff;
  border:0;
  font-size:3em;
  line-height:65px;
  display:none
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313;  position:absolute; text-align:center;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu li:hover{display: block;    background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#fff;}
.menu ul li a:hover {  color: #fff; text-decoration:none;}
.menu a{text-decoration:none; color:white;}
.menu a:hover{text-decoration:none; color:white;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}

.menu { 
  height: 0px;
  overflow: hidden;
  transition-duration .3s; 
}
.OpenMenu .menu {
  height: auto;
 }
.OpenMenu .cross {
  display: block;
  }
.OpenMenu .hamburger {
  display: none;
 }
＆＃13; 
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>


 <div class="menu">
   <ul>
    <a href="#"><li>Forside</li></a>
	<li class="dropdown">
    <a href="#" class="dropbtn">Møbler</a>
    <div class="dropdown-content">
      <a href="http://facebook.com">Stole</a>
      <a href="#">Border</a>
      <a href="#">Sofaer</a>
    </div>
   </li>
    <a href="#"><li>Blog</li></a>
    <a href="#"><li>Leverandøre</li></a>
    <a href="#"><li>Om Os</li></a>
   </ul>
 </div>
  </header>
  
  <script>
    $(".hamburger").click(function() {
  $("header").addClass("OpenMenu");
 });
                        
$(".cross").click(function() {
  $("header").removeClass("OpenMenu);
});
  </script>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题