Question

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Breionna Dillon - Graphic | Web Designer</title>

<!-- STYLESHEETS-->


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/nav-icon.css" rel="stylesheet">
<link href="css/slidemenu.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

<script async src="js/sliiide.js"></script>
<script type="text/javascript">


var settings = {
    toggle: "#sliiider-toggle", 
    exit_selector: ".slider-exit", 
    animation_duration: "0.5s", 
    place: "left", 
    animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", 
    body_slide: true, 
    no_scroll: true 
};

   $("#left-menu").sliiide(settings); //initialize sliiide
    </script>

</head>

<body>
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<div class="sliding-menu flex-center-wrapper flex-column left-menu">
<ul>
<li> <a href="#">Home</a> </li>
<li><hr></li>
<li><a href="#">Contact</a></li>
<li> <hr></li>
<li><a href="#">About</a>/li>
</ul><span class="sliiider-exit exit left-exit">&#215;</span>
</div>










<!--=================================JQUERY FILES =======================================-->

<script src="jquery-1.12.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
/*CSS*/
@charset "utf-8";


.flex-center-wrapper {
  display: flex;
  display: -webkit-flex;
  align-content: center;
  align-items: center;
  -webkit-align-content: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  text-align: center;
}

.flex-row {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.slider-toggle {
  display: block;
  margin: 10px 15px 10px 15px;
  color: white;
  font-size: 18px;
  border: none;
  letter-spacing: 1px;
  font-family: Lato;
  width: 50px;
  height: 20px;
  border-radius: 100px;
  text-align: center;
  background-color: rgb(43, 57, 69);
  transition: background-color 0.5s;
}

.buttons-container 
  color: white;
  font-family: Lato;
  font-size: 18px;
  letter-spacing: 1.2px;
}

.selected { background-color: rgb(18, 209, 234); }

.sliding-menu {
  background-color: rgb(40, 38, 38);
  visibility: hidden;
  position: fixed;
  overflow: hidden;
}

.sliding-menu a, .sliding-menu p {
  font-family: Lato;
      font-weight: 100;
  letter-spacing: 2px;
  font-size: 18px;
  color: rgb(200, 200, 200);
  text-decoration: none;
  margin: 0 20px;
}

.sliding-menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.sliding-menu li { margin: 40px auto 40px auto; }

.sliding-menu hr {
      width: 50%;
  min-width: 100px;
  border-color: rgb(18, 209, 234);
}

.exit {
  position: absolute;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

上面附有我的代码，试图为ahmedrad preview的类项目合并“sliiiide.js”菜单插件。我完全按照指示告诉我做的，再加上我找到了一个教程tutorial w/css 帮助我更好地理解，但这也失败了。

有人可以查看我的代码，告诉我这里到底是什么错误吗？我正在考虑添加“onCLick”功能来激活图标，但我的教授告诉我不要这样做。

JavaScript Sliiiiiiiide J查询插件不起作用

0 个答案: