我只是有一个关于调整侧边栏菜单切换速度的简单问题。我很确定它是由转换调整的,但由于某种原因我遇到了麻烦....下面是我的代码,并提前感谢您的帮助!
html:
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><img src="img/portfolio/close-icon-small.png"></a>
<li class="sidebar-brand"><img src="img/portfolio/ddilogo.png" alt=""></a>
</li>
<li><a href="homepage.html">Work</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="#services">Services</a>
</li>
<li><a href="team.html">team</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /Side Menu -->
CSS:
/* Side Menu */
#sidebar-wrapper {
margin-right: -250px;
right: 0;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: 0.8s ease all;
-moz-transition: 0.8s ease all;
-ms-transition: 0.8s ease all;
-o-transition: 0.8s ease all;
transition: 0.8s ease all;
}
#sidebar-wrapper.active {
left: 0px;
width: 250px;
-webkit-transition: 0.8s ease all;
-moz-transition: 0.8s ease all;
-ms-transition: 0.8s ease all;
-o-transition: 0.8s ease all;
transition: 0.8s ease all;
}
JS:
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>