JavaScript SLIIIDE J查询插件不工作 Breionna Dillon-图形|网页设计师 变量设置={ 切换：“滑动条切换”， 退出选择器：“.滑块退出”， 动画持续时间：“0.5s”， 地点：“左”， 动画曲线：“立方贝塞尔（0.54,0.01,0.57,1.03）”， body_幻灯片：没错， 否：正确 }; $（“#左菜单”）.sliide（设置）//初始化滑动条 /李> 和#215； /*CSS*/ @字符集“utf-8”； .柔性中心包装{ 显示器：flex； 显示：-webkit flex； 对齐内容：居中对齐； 对齐项目：居中； -webkit对齐内容：中心； -webkit对齐项目：居中； 证明内容：中心； -webkit内容：中心； 文本对齐：居中； } .弹性行{ -webkit柔性方向：行； -ms柔性方向：行； 弯曲方向：行； } .柔性柱{ -webkit柔性方向：列； -ms-flex方向：列； 弯曲方向：立柱； } .滑块切换{ 显示：块； 利润率：10px 15px 10px 15px； 颜色：白色； 字号：18px； 边界：无； 字母间距：1px； 字体系列：Lato； 宽度：50px； 高度：20px； 边界半径：100px； 文本对齐：居中； 背景色：rgb（43,57,69）； 过渡：背景色0.5s； } .按钮容器 颜色：白色； 字体系列：Lato； 字号：18px； 字母间距：1.2px； } .选定{背景色：rgb（18209234）；} .滑动菜单{ 背景色：rgb（40,38,38）； 可见性：隐藏； 位置：固定； 溢出：隐藏； } .滑动菜单a、.滑动菜单p{ 字体系列：Lato； 字号：100； 字母间距：2px； 字号：18px； 颜色：rgb（200200200200）； 文字装饰：无； 利润率：0.20px； } .滑动菜单{ 列表样式：无； 文本对齐：居中； 填充：0； } .滑动菜单li{margin:40px auto 40px auto；} .滑动菜单hr{ 宽度：50%； 最小宽度：100px； 边框颜色：rgb（18209234）； } .退出{ 位置：绝对位置； 字体大小：40px； 颜色：白色； 光标：指针； }
上面附上的是我的代码，用于尝试将“sliiide.js”菜单插件合并到ahmedrad的一个类项目中。我已经完全按照指示做了，而且我还找到了一个教程 为了帮助我更好地理解，这也失败了JavaScript SLIIIDE J查询插件不工作 Breionna Dillon-图形|网页设计师 变量设置={ 切换：“滑动条切换”， 退出选择器：“.滑块退出”， 动画持续时间：“0.5s”， 地点：“左”， 动画曲线：“立方贝塞尔（0.54,0.01,0.57,1.03）”， body_幻灯片：没错， 否：正确 }; $（“#左菜单”）.sliide（设置）//初始化滑动条 /李> 和#215； /*CSS*/ @字符集“utf-8”； .柔性中心包装{ 显示器：flex； 显示：-webkit flex； 对齐内容：居中对齐； 对齐项目：居中； -webkit对齐内容：中心； -webkit对齐项目：居中； 证明内容：中心； -webkit内容：中心； 文本对齐：居中； } .弹性行{ -webkit柔性方向：行； -ms柔性方向：行； 弯曲方向：行； } .柔性柱{ -webkit柔性方向：列； -ms-flex方向：列； 弯曲方向：立柱； } .滑块切换{ 显示：块； 利润率：10px 15px 10px 15px； 颜色：白色； 字号：18px； 边界：无； 字母间距：1px； 字体系列：Lato； 宽度：50px； 高度：20px； 边界半径：100px； 文本对齐：居中； 背景色：rgb（43,57,69）； 过渡：背景色0.5s； } .按钮容器 颜色：白色； 字体系列：Lato； 字号：18px； 字母间距：1.2px； } .选定{背景色：rgb（18209234）；} .滑动菜单{ 背景色：rgb（40,38,38）； 可见性：隐藏； 位置：固定； 溢出：隐藏； } .滑动菜单a、.滑动菜单p{ 字体系列：Lato； 字号：100； 字母间距：2px； 字号：18px； 颜色：rgb（200200200200）； 文字装饰：无； 利润率：0.20px； } .滑动菜单{ 列表样式：无； 文本对齐：居中； 填充：0； } .滑动菜单li{margin:40px auto 40px auto；} .滑动菜单hr{ 宽度：50%； 最小宽度：100px； 边框颜色：rgb（18209234）； } .退出{ 位置：绝对位置； 字体大小：40px； 颜色：白色； 光标：指针； },javascript,jquery,css,plugins,navigation,Javascript,Jquery,Css,Plugins,Navigation,上面附上的是我的代码，用于尝试将“sliiide.js”菜单插件合并到ahmedrad的一个类项目中。我已经完全按照指示做了，而且我还找到了一个教程 为了帮助我更好地理解，这也失败了 有人能检查一下我的代码，告诉我这里到底出了什么问题吗？我正在考虑添加“onCLick”功能来激活图标，但我的教授告诉我不要这样做 也许你能描述一下这个问题？这里没有人能看到你的屏幕，我们不知道这对你来说是怎么失败的。基本上，我试图让我的导航菜单从左边推我的主页，以显示全局导航。我有相应的所有链接，但唯一能工作或显示
有人能检查一下我的代码，告诉我这里到底出了什么问题吗？我正在考虑添加“onCLick”功能来激活图标，但我的教授告诉我不要这样做 也许你能描述一下这个问题？这里没有人能看到你的屏幕，我们不知道这对你来说是怎么失败的。基本上，我试图让我的导航菜单从左边推我的主页，以显示全局导航。我有相应的所有链接，但唯一能工作或显示“汉堡包图标”的东西，我正试图让菜单出现一个我看到关闭的东西是你的左菜单选择器。您应该更改此行
$（“#左菜单”）.sliide（设置）至$（“.left menu”）.sliide（设置）
或使用左菜单作为ID，而不是像这样的类
<!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">×</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;
}