bootstrap侧边栏切换速度

时间:2014-10-07 14:31:46

标签: css twitter-bootstrap-3 sidebar

我只是有一个关于调整侧边栏菜单切换速度的简单问题。我很确定它是由转换调整的,但由于某种原因我遇到了麻烦....下面是我的代码,并提前感谢您的帮助!

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>

0 个答案:

没有答案