将动画的Jquery Side Nav转换为Vanilla JS [英] Convert Animated Jquery Side Nav to Vanilla JS

问题描述

我需要帮助将Jquery侧面导航菜单转换为Vanilla JS。我是JS的初学者，不知道如何完成这个任务。还有什么建议动画汉堡图标转换成X单击时？谢谢。任何帮助表示赞赏

/ ********** ************ **** NAVIGATION ************************** /＃sidebar {background：＃ 151718;宽度：12.500em;身高：100％;显示：块;位置：绝对;左：-12.500em; top：0px; transition：left 0.3s linear;}＃sidebar.visible {left：0.000em;} nav {text-align：center;} ul {margin：0.000em; padding：0.000em;} ul li {list-style：none;} ul li a {background：＃1c1e1f;颜色：#ccc; border-bottom：1px solid＃111;显示：块;宽度：11.250em;填充：0.625em;文字修饰：无; text-transform：大写} ul li a：hover {color：＃4876FF; }＃sidebar-btn {display：inline-block; vertical-align：middle;宽度：1.563em;身高：1.250em;光标：指针;保证金：1.250em;位置：绝对;顶部：0.000em;右：-3.750em;}＃sidebar-btn span {height：0.063em;背景：＃282828; margin-bottom：0.313em; display：block;}

 <！DOCTYPE html>< ; html lang =en>< head> < meta charset =UTF-8> < meta name =viewportcontent =device-width，initial-scale = 1> < title> Responsive Side Nav< / title> < link rel =stylesheethref =css / normalize.css> < link rel =stylesheethref =css / style.css< / head>< body> < div id =sidebar> < NAV> < UL> < li>< a href =＃class =active>主页< / a>< / li> < li>< a href =＃>关于< / a>< / li> < li>< a href =＃>服务< / a>< / li> < li>< a href =＃>联络人< / a>< / li> < / UL> < / NAV> < div id =sidebar-btn> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> < / DIV> < / DIV> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script> <脚本> $（document）.ready（function（）{$（'＃sidebar-btn'）。click（function（）{$（'＃sidebar'）。toggleClass（'visible'）;}）;}）; < / script>< / html>  

$（document）.ready（）替换 window.onload = function（）{} ; .click（function（）{}）; .addEventListener（click，function（）{}） document.getElementById（）用于 jQuery（）; Element.classList.toggle（）用于 .toggleClass（）

< pre class =snippet-code-css lang-css prettyprint-override> / ********************** **** NAVIGATION ************************** /＃sidebar {background：＃151718;宽度：12.500em;身高：100％;显示：块;位置：绝对;左：-12.500em; top：0px; transition：left 0.3s linear;}＃sidebar.visible {left：0.000em;} nav {text-align：center;} ul {margin：0.000em; padding：0.000em;} ul li {list-style：none;} ul li a {background：＃1c1e1f;颜色：#ccc; border-bottom：1px solid＃111;显示：块;宽度：11.250em;填充：0.625em;文字修饰：无; text-transform：uppercase} ul li a：hover {color：＃4876FF;}＃sidebar-btn {display：inline-block; vertical-align：middle;宽度：1.563em;身高：1.250em;光标：指针;保证金：1.250em;位置：绝对;顶部：0.000em;右：-3.750em;}＃sidebar-btn span {height：0.063em;背景：＃282828; margin-bottom：0.313em; display：block;}

 <！DOCTYPE html>< ; html lang =en>< head> < meta charset =UTF-8> < meta name =viewportcontent =device-width，initial-scale = 1> < title> Responsive Side Nav< / title> < /头> <身体GT; < div id =sidebar> < NAV> < UL> < li>< a href =＃class =active>主页< / a>< / li> < li>< a href =＃>关于< / a>< / li> < li>< a href =＃>服务< / a>< / li> < li>< a href =＃>联络人< / a>< / li> < / UL> < / NAV> < div id =sidebar-btn> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> < / DIV> < / DIV> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script> <脚本> window.onload = function（）{document.getElementById（'sidebar-btn'）.addEventListener（click，function（）{document.getElementById（'sidebar'）.classList.toggle（'visible'）;}）; }; < /脚本> < / body>< / html>  

I need help converting a Jquery side navigation menu into Vanilla JS. I'm a beginner with JS and have no idea how to accomplish this. Also any advice on animating the burger icon to transform into an X when clicked? Thank you. Any help is appreciated

/**********************
  ****NAVIGATION****
**********************/
#sidebar{
	background: #151718;
	width: 12.500em;
	height: 100%;
	display: block;
	position: absolute;
	left: -12.500em;
	top: 0px;
	transition: left 0.3s linear;
}

#sidebar.visible{
	left: 0.000em;
}

nav{
	text-align: center;
}

ul{
	margin: 0.000em;
	padding: 0.000em;
}

ul li{
	list-style: none;
}

ul li a{
	background: #1c1e1f;
	color: #ccc;
	border-bottom: 1px solid #111;
	display: block;
	width: 11.250em;
	padding: 0.625em;
	text-decoration: none;
	text-transform: uppercase
}
 

ul li a:hover{
	color: #4876FF; 
}

#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width: 1.563em;
	height: 1.250em;
	cursor: pointer;
	margin: 1.250em; 
	position: absolute;
	top: 0.000em;
	right: -3.750em;
}

#sidebar-btn span{
	height: 0.063em;
	background: #282828;
	margin-bottom: 0.313em;
	display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="device-width, initial-scale=1">
	<title>Responsive Side Nav</title>
	<link rel="stylesheet"  href="css/normalize.css">
	<link rel="stylesheet"  href="css/style.css"
</head>
<body>
 
  <div id="sidebar">
  
	<nav>
		<ul>
			<li><a href="#" class="active">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	
	<div id="sidebar-btn">
		<span></span>
		<span></span>
	  	<span></span>
	</div>
 </div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script>
	  
		 $(document).ready(function(){
			 $('#sidebar-btn').click(function(){
				 $('#sidebar').toggleClass('visible');
			 });
		 });
		 
	</script>
</body>
</html>

解决方案

Substitute window.onload = function(){} for $(document).ready(); .addEventListener("click", function() {}) for .click(function() {}); document.getElementById() for jQuery(); Element.classList.toggle() for .toggleClass()

/**********************
  ****NAVIGATION****
**********************/

#sidebar {
  background: #151718;
  width: 12.500em;
  height: 100%;
  display: block;
  position: absolute;
  left: -12.500em;
  top: 0px;
  transition: left 0.3s linear;
}

#sidebar.visible {
  left: 0.000em;
}

nav {
  text-align: center;
}

ul {
  margin: 0.000em;
  padding: 0.000em;
}

ul li {
  list-style: none;
}

ul li a {
  background: #1c1e1f;
  color: #ccc;
  border-bottom: 1px solid #111;
  display: block;
  width: 11.250em;
  padding: 0.625em;
  text-decoration: none;
  text-transform: uppercase
}

ul li a:hover {
  color: #4876FF;
}

#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 1.563em;
  height: 1.250em;
  cursor: pointer;
  margin: 1.250em;
  position: absolute;
  top: 0.000em;
  right: -3.750em;
}

#sidebar-btn span {
  height: 0.063em;
  background: #282828;
  margin-bottom: 0.313em;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="device-width, initial-scale=1">
  <title>Responsive Side Nav</title>
  </head>

  <body>

    <div id="sidebar">

      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

      <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      window.onload = function() {
        document.getElementById('sidebar-btn')
        .addEventListener("click", function() {
          document.getElementById('sidebar')
          .classList.toggle('visible');
        });
      };
    </script>
  </body>

</html>

这篇关于将动画的Jquery Side Nav转换为Vanilla JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！