Javascript 使菜单按钮与菜单一起滑动
我试图制作一个侧菜单栏，它可以通过按下菜单按钮进行切换，但我在这里面临的问题是，我希望侧菜单滑出时菜单按钮向左滑动，然后在菜单滑入时再次移回同一位置，希望从SO那里得到一些帮助 这是我的密码如果我出错了请告诉我 .htmlJavascript 使菜单按钮与菜单一起滑动,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我试图制作一个侧菜单栏，它可以通过按下菜单按钮进行切换，但我在这里面临的问题是，我希望侧菜单滑出时菜单按钮向左滑动，然后在菜单滑入时再次移回同一位置，希望从SO那里得到一些帮助 这是我的密码如果我出错了请告诉我 .html <html> <head> <title>SLDS Nav-Bar</title> <link rel="stylesheet" href="//code.
<html>
<head>
<title>SLDS Nav-Bar</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"/>
<style>
/*Basic styling*/
html,
body {
height: 100%;
background-color: #eee;
}
#header{
margin-left: 218px;
width: 59.88em;
margin-bottom: -3em;
}
.menu-button{
font-size:2em;
}
/*Additional slds styling*/
.slds-nav--size{
width: 218px;
border-right: 1px solid #d8dde6;
background:white;
height: 50.96em;
}
/*Media Queries*/
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="slds-nav--size"] {
transform: translate(-218px);
}
}
</style>
<!--Script's gose here-->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// ==========================================================================
// Animate for menu toggle
// ==========================================================================
$(document).ready(function(){
$(".menu-button").click(function(){
$(".toggle-menu").toggle("drop",300);
});
});
</script>
</head>
<body>
<header id="header">
<div class="">
<a class="menu-button">☰</a>
</div>
</header>
<div class="slds-grid slds-grid--vertical slds-navigation-list--vertical slds-navigation-list--vertical-inverse slds-nav--size toggle-menu">
<h2 class="slds-text-title--caps slds-p-around--medium" id="search-results">Search Results</h2>
<ul>
<li class="slds-is-active"><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Top Results</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Accounts</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Contacts</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Opportunities</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Leads</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Groups</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Files</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Dashboards</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Reports</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="search-results">Feeds</a></li>
</ul>
<h2 class="slds-text-title--caps slds-p-around--medium" id="external-results">External Results</h2>
<ul>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="external-results">App One</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="external-results">App Two</a></li>
<li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="external-results">App Three</a></li>
</ul>
</div>
</body>
</html>
导航条
/*基本造型*/
html，
身体{
身高：100%；
背景色：#eee；
}
#标题{
左边距：218px；
宽度：59.88em；
边缘底部：-3em；
}
.菜单按钮{
字号：2em；
}
/*附加SLD样式*/
.slds导航--大小{
宽度：218px；
右边框：1px实心#d8dde6；
背景：白色；
高度：50.96em；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
[类别*=“slds导航--大小”]{
转换：转换（-218px）；
}
}
// ==========================================================================
//为菜单切换设置动画
// ==========================================================================
$（文档）.ready（函数（）{
$（“.menu按钮”）。单击（函数（）{
$（“.toggle menu”）.toggle（“drop”，300）；
});
});
外部结果
左边距定义为10px。再次单击菜单时，它会返回到原始位置
$（文档）.ready（函数（）{
$（“.menu按钮”）。单击（函数（）{
$（“.toggle menu”）.toggle（“drop”，300）；
$（“#标题”）.toggleClass（“向左”）；
});
});
html，
身体{
身高：100%；
背景色：#eee；
}
#标题{
左边距：218px；
宽度：59.88em；
边缘底部：-3em；
过渡：0秒后，边距向左移动0.3秒；
}
#页眉。向左{
左边距：10px；
}
.菜单按钮{
字号：2em；
}
/*附加SLD样式*/
.slds导航--大小{
宽度：218px；
右边框：1px实心#d8dde6；
背景：白色；
高度：50.96em；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：400px）{
/*移动电话：*/
[类别*=“slds导航--大小”]{
转换：转换（-218px）；
}
}
外部结果
单击菜单时，我会在标题中添加一个类。CSS中的类将左边距定义为10px。再次单击菜单时，它会返回到原始位置
$（文档）.ready（函数（）{
$（“.menu按钮”）。单击（函数（）{
$（“.toggle menu”）.toggle（“drop”，300）；
$（“#标题”）.toggleClass（“向左”）；
});
});
html，
身体{
身高：100%；
背景色：#eee；
}
#标题{
左边距：218px；
宽度：59.88em；
边缘底部：-3em；
过渡：0秒后，边距向左移动0.3秒；
}
#页眉。向左{
左边距：10px；
}
.菜单按钮{
字号：2em；
}
/*附加SLD样式*/
.slds导航--大小{
宽度：218px；
右边框：1px实心#d8dde6；
背景：白色；
高度：50.96em；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：400px）{
/*移动电话：*/
[类别*=“slds导航--大小”]{
转换：转换（-218px）；
}
}
外部结果
您的#页眉留有边距：218px，当您更改菜单显示时，您不会对其执行任何操作。我修改了您的代码并使用CSS转换：
导航条
/*基本造型*/
html，
身体{
溢出：隐藏；
身高：100%；
背景色：#eee；
}
#标题{
宽度：59.88em；
保证金：0.0-3em0；
-webkit过渡：左边距为0.3s线性；
-moz过渡：边距左0.3s线性；
过渡：边距左0.3s线性；
}
#标题：nav-open{
左边距：218px；
}
.菜单按钮{
字号：2em；
}
/*附加SLD样式*/
.slds导航--大小{
位置：相对位置；
左：-218px；
宽度：218px；
右边框：1px实心#d8dde6；
背景：白色；
高度：50.96em；
-webkit转换：左0.3s线性；
-moz过渡：左0.3s线性；
过渡：左0.3s线性；
}
.slds-nav--size.open{
左：0；
}
/*媒体查询*/
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
[类别*=“slds导航--大小”]{
转换：translate