我的菜单仍然打开

时间：2018-07-16 09:03:33

标签： javascript html css menu

我尝试以汉堡包样式制作导航菜单...我制作了html，css和JS，一切正常，但是当我单击菜单中的链接时，菜单不会隐藏并且仍然处于打开状态。 点击链接时我需要隐藏菜单 真的不知道为什么它不起作用，因为例如在十字架上切换是可以的。

这里是CODE。 HTML + JS在一起：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

header {
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  background-color: #1d1d1d;
  top: 100%;
  right: 0;
  height: 0px;
  overflow: hidden;
  transition: .5s ease-in-out;
  opacity: 0;
  width: 100%;
}

.site-nav--open {
  height: auto;
  opacity: 100;
}

.site-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.site-nav li {
  width: 100%;
  text-align: center;
  /*	border-bottom: 1px solid #575766;*/
}

.site-nav li:last-child {
  /*	border-bottom: none;	*/
}

.site-nav a {
  font-weight: 800;
  font-size: 40px;
  color: #9E9E9E;
  text-decoration: none;
  display: block;
  padding: 2em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus {
  color: white;
}

.menu-toggle {
  position: fixed;
  padding: 1em;
  position: absolute;
  right: .75em;
  top: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background-color: #ebebbd;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: .5s ease-in-out;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(90deg);
}

.open .hamburger {
  transform: rotate(45deg);
}

#particles-js {
  height: 100vh;
  background-color: #1d1d1d;
}

#about {
  height: 100vh;
  background-color: green;
}

#portfolio {
  height: 100vh;
  background-color: blue;
}

#contact {
  height: 100vh;
  background-color: red;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
  <header>
    <div class="container">
      <h1 class="logo">Try <span>it</span></h1>
      <nav class="site-nav">
        <ul>
          <li><a href="#particles-js">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
      </div>
    </div>
  </header>
  <div id="particles-js"></div>
  <div id="about"></div>
  <div id="portfolio"></div>
  <div id="contact"></div>

  <script src="js/particles.js"></script>
  <script src="js/app.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.menu-toggle').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $(this).toggleClass('open');
    })
  </script>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

我希望它能对您有所帮助！ 

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
	margin: 0;
	padding: 0;
	
}

.container {
  width: 100%;	
  margin: 0 auto;
  padding: 0;
}
header {

  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
	width: 100%
}
header::after {
  content: '';
  clear: both;
  display: block;
}
.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;	
  text-transform: uppercase;
  font-weight: 700;
}
.logo span {
  font-weight: 400;
}

.site-nav {
	position: absolute;
	background-color: #1d1d1d;
	top: 100%;
	right: 0;
	height: 0px;
	overflow: hidden;
	transition: .5s ease-in-out;
	opacity: 0;
	width: 100%;
	
}
.site-nav--open {
	height: auto;
	opacity: 100;
}
.site-nav ul {
	padding: 0;
	list-style: none;
	margin: 0;
}
.site-nav li {
	width: 100%;
	text-align: center;
/*	border-bottom: 1px solid #575766;*/
}
.site-nav li:last-child {
/*	border-bottom: none;	*/
}
.site-nav a {
	font-weight: 800;
	font-size: 40px;
	color: #9E9E9E;
	text-decoration: none;
	display: block;
	padding: 2em;
	text-transform: uppercase;
}
.site-nav a:hover,
.site-nav a:focus {
	
	color: white;
}
.menu-toggle {
	position: fixed;
	padding: 1em;
	position: absolute;
	right: .75em;
	top: .75em;
	cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	content: '';
	display: block;
	background-color: #ebebbd;
	height: 3px;
	width: 1.75em;
	border-radius: 3px;
	transition: .5s ease-in-out;
}
.hamburger::before {
	
	transform: translateY(-6px);
}
.hamburger::after {
	transform: translateY(3px);
	
}


.open .hamburger::before {
	opacity: 0;
}
.open .hamburger::after{
	transform: translateY(-3px) rotate(90deg);
	
}
.open .hamburger {
	transform: rotate(45deg);
}
#particles-js {
	height: 100vh;
	background-color: #1d1d1d;
}
#about {
	height: 100vh;
	background-color: green;
	
}
#portfolio {
	height: 100vh;
	background-color: blue;
	
}
#contact {
	height: 100vh;
	background-color: red;
}
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <meta name="description" content="Doplniť neskôr">
    </head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <body>
        <header>
        	<div class="container">
        		<h1 class="logo">Try <span>it</span></h1>
        		<nav class="site-nav">
        			<ul>
        				<li><a class="menu-link" href="#particles-js">Home</a></li>
        				<li><a class="menu-link" href="#about">About</a></li>
        				<li><a class="menu-link" href="#portfolio">Portfolio</a></li>
        				<li><a class="menu-link" href="#contact">Contact</a></li>
        			</ul>
        		</nav>
        		<div class="menu-toggle">
        			<div class="hamburger"></div>
        		</div>
        	</div>
        </header>
        <div id="particles-js"></div>
        <div id="about"></div>
        <div id="portfolio"></div>
        <div id="contact"></div>

<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script>		
	   
$('.menu-toggle').click(function() {
  
  $('.site-nav').toggleClass('site-nav--open', 500);
  $(this).toggleClass('open');
  
});
$('.menu-link').click(function(){
 $('.site-nav').toggleClass('close site-nav--open');
 $('.menu-toggle').toggleClass('open')
});

		</script>
    </body>
</html>

答案 1 :(得分：0)

我添加了新功能，可以在.menu-link单击时关闭菜单。

我相信它可以解决您的问题。

摘要

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

header {
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  background-color: #1d1d1d;
  top: 100%;
  right: 0;
  height: 0px;
  overflow: hidden;
  transition: .5s ease-in-out;
  opacity: 0;
  width: 100%;
}

.site-nav--open {
  height: auto;
  opacity: 100;
}

.site-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.site-nav li {
  width: 100%;
  text-align: center;
  /*	border-bottom: 1px solid #575766;*/
}

.site-nav li:last-child {
  /*	border-bottom: none;	*/
}

.site-nav a {
  font-weight: 800;
  font-size: 40px;
  color: #9E9E9E;
  text-decoration: none;
  display: block;
  padding: 2em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a:focus {
  color: white;
}

.menu-toggle {
  position: fixed;
  padding: 1em;
  position: absolute;
  right: .75em;
  top: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background-color: #ebebbd;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: .5s ease-in-out;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(90deg);
}

.open .hamburger {
  transform: rotate(45deg);
}

#particles-js {
  height: 100vh;
  background-color: #1d1d1d;
}

#about {
  height: 100vh;
  background-color: green;
}

#portfolio {
  height: 100vh;
  background-color: blue;
}

#contact {
  height: 100vh;
  background-color: red;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
  <header>
    <div class="container">
      <h1 class="logo">Try <span>it</span></h1>
      <nav class="site-nav">
        <ul>
          <li><a class="menu-link" href="#particles-js">Home</a></li>
          <li><a class="menu-link" href="#about">About</a></li>
          <li><a class="menu-link" href="#portfolio">Portfolio</a></li>
          <li><a class="menu-link" href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
      </div>
    </div>
  </header>
  <div id="particles-js"></div>
  <div id="about"></div>
  <div id="portfolio"></div>
  <div id="contact"></div>

  <script src="js/particles.js"></script>
  <script src="js/app.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.menu-toggle').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $(this).toggleClass('open');
    })
    $('.menu-link').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $('.menu-toggle').toggleClass('open');
    })
  </script>
</body>
</html>

相关问题
最新问题