这是我的 index.HTML 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge ,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Side Nav</title>
<link rel="stylesheet" href="css/master.css">
<link href="css/main.css" rel="stylesheet">
<style type="text/css">
.sticky-container{
/*background-color: #333;*/
padding: 0px;
margin: 0px;
position: fixed;
right: -119px;
top:130px;
width: 200px;
}
.sticky li{
list-style-type: none;
background-color: #333;
color: efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 0px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.sticky li:hover{
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
-moz-transform: translateX(-115px);
-o-transform: translateX(-115px);
-ms-transform: translateX(-115px);
transform:translateX(-115px);*/
/*background-color: #8e44ad;*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.sticky li img{
float: left;
margin: 5px 5px;
margin-right: 10px;
}
.sticky li p{
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}
p a{
color: #ecf0f1;
}
</style>
</head>
<body>
<div class="header">
<button class="js-menu-show header__menu-toggle material-icons">menu</button><center><img src="logo.png" width="25%" height="50%"/></center><font face="Comic sans MS" size="5" color="pink">RAMOLD</font><font size="-1" >.net23.net</font>
</div><img src="trusted-people.png" width="100%" height="200"/>
<aside class="js-side-nav side-nav">
<nav class="js-side-nav__container side-nav__container">
<button class="js-menu-hide side-nav__hide material-icons">close</button>
<header class="side-nav__header">
<br><br><center><img src="logo.png" width="50%" height="90%"/></center>
</header>
<ul class="side-nav__content">
<li><a href="logo.png"><h1>about us</h1></a></li>
<hr /> <li><a href="contact.html"><h1>contact us</h1></a></li>
<hr /> <li><a href="privacy.html"><h1>privacy policy</h1></a></li><hr />
<li><a href="notification.html"><h1>notification</h1></a></li><hr />
</ul>
</nav>
</aside>
<div class="sticky-container">
<ul class="sticky">
<li>
<img width="32" height="32" title="" alt="" src="img/fb1.png" />
<p><a href='http://m.facebook.com/nalin.nishant.56' target='_blank'> Facebook</a></p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="img/tw1.png" />
<p><a href='http://www.twitter.com/nalin.nishant' target='_blank'>Twitter</a></p>
</li>
<li>
<img width="32" height="32" title="" alt="" src="img/wp1.png" />
<p><a href='http://www.hackingworldtips.wordpress.com' target='_blank'>Hackingtips</a></p>
</li>
</ul>
</div>
<section id="services" class="emerald">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="media">
<div class="pull-left">
<center><i class="icon-facebook icon-md"><img src="img/fb1.png" width="90%" height="90%"/></i></center>
</div>
<div class="media-body">
<h3 class="media-heading">Facebook Tools</h3>
<p>Our sites provides you awesome FB tools like Multi Group And Page Poster, Autoliker/Auto Commenter and many more in free. </p>
</div>
</div>
</div><!--/.col-md-4--><hr />
<div class="col-md-4 col-sm-6">
<div class="media">
<div class="pull-left">
<i class="icon-group icon-md"></i>
</div>
<div class="media-body">
<h3 class="media-heading">Trusted</h3>
<p>Our website tools are used and trusted by thousands users.</p>
</div>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<div class="media">
<div class="pull-left">
<i class="icon-ok icon-md"></i>
</div>
<div class="media-body">
<h3 class="media-heading">Spam Free</h3>
<p>Our site is 100% safe and spam free. We don't misuse your account to share anything.</p>
</div>
</div>
</div><!--/.col-md-4-->
</div>
</div>
</section><!--/#services-->
<script src="js/side-nav.js"></script>
</body>
</html>
这是我的 side-nav.js 文件
'use strict'
class SideNav{
constructor(){
this.showButtonEl=document.querySelector('.js-menu-show');
this.hideButtonEl=document.querySelector('.js-menu-hide');
this.sideNavEl=document.querySelector('.js-side-nav');
this.sideNavContainerEl=document.querySelector('.js-side-nav__container');
this.showSideNav=this.showSideNav.bind(this);
this.hideSideNav=this.hideSideNav.bind(this);
this.blockClicks=this.blockClicks.bind(this);
this.onTouchStart=this.onTouchStart.bind(this);
this.onTouchMove=this.onTouchMove.bind(this);
this.onTouchEnd=this.onTouchEnd.bind(this);
this.onTransitionEnd=this.onTransitionEnd.bind(this);
this.startX=0;
this.currentX=0;
this.addEventListeners();
}
addEventListeners(){
this.showButtonEl.addEventListener('click',this.showSideNav);
this.hideButtonEl.addEventListener('click',this.hideSideNav);
this.sideNavEl.addEventListener('click',this.hideSideNav);
this.sideNavContainerEl.addEventListener('click', this.blockClicks);
document.addEventListener('touchstart', this.onTouchStart);
document.addEventListener('touchmove', this.onTouchMove);
document.addEventListener('touchend', this.onTouchEnd);
}
onTouchStart(evt){
if (!this.sideNavEl.classList.contains('side-nav--visible'))
return;
this.startX=evt.touches[0].pageX;
this.currentX=this.startX;
}
onTouchMove(evt){
this.currentX=evt.touches[0].pageX;
const translatex= Math.min(0,this.currentX - this.startX);
if (translatex < 0) {
evt.preventDefault();
}
this.sideNavContainerEl.style.transform=`translateX(${translatex}px)`;
}
onTouchEnd(evt){
const translatex= Math.min(0,this.currentX - this.startX);
if(translatex < 0){
this.sideNavContainerEl.style.transform='';
this.hideSideNav();
}
}
blockClicks(evt){
evt.stopPropagation();
}
onTransitionEnd(evt){
this.sideNavEl.classList.remove('side-nav--animatable');
this.sideNavEl.removeEventListener('transitionend', this.onTransitionEnd);
}
showSideNav(){
this.sideNavEl.classList.add('side-nav--animatable');
this.sideNavEl.classList.add('side-nav--visible');
this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
}
hideSideNav(){
this.sideNavEl.classList.add('side-nav--animatable');
this.sideNavEl.classList.remove('side-nav--visible');
this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
}
}
new SideNav();
任何类型的帮助都将非常感谢....