使用菜单使菜单按钮滑动

时间：2017-07-28 13:22:56

标签： javascript jquery html css jquery-ui

我正在尝试创建一个侧面菜单栏，按下菜单按钮切换，但我面临的问题是，当侧面菜单滑落时，我希望菜单按钮向左滑动当菜单滑入时，再次回到同一位置，希望从SO中得到一些帮助。

这是我的代码，如果我出错了，请告诉我，

html的 

 <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>

2 个答案:

答案 0 :(得分：3)

单击菜单时，我会在标题中添加一个类。 CSS中的类将margin-left定义为10px。再次单击菜单后，它将返回原始位置。

$(document).ready(function() {
  $(".menu-button").click(function() {
    $(".toggle-menu").toggle("drop", 300);
    $("#header").toggleClass("to-the-left");
  });
});
html,
body {
  height: 100%;
  background-color: #eee;
}

#header {
  margin-left: 218px;
  width: 59.88em;
  margin-bottom: -3em;
  transition: margin-left 0.3s ease-in 0s;
}

#header.to-the-left {
  margin-left: 10px;
}

.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: 400px) {
  /* For mobile phones: */
  [class*="slds-nav--size"] {
    transform: translate(-218px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>

答案 1 :(得分：0)

您的#header有左边距：218px，当您更改菜单显示时，您不会对此做任何事情。我修改你的代码并使用CSS转换：

＆＃13;
＆＃13; 
<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 {
            overflow: hidden;
            height: 100%;
            background-color: #eee;
        }

        #header{
            width: 59.88em;
            margin: 0 0 -3em 0;
            -webkit-transition: margin-left 0.3s linear;
            -moz-transition: margin-left 0.3s linear;
            transition: margin-left 0.3s linear;
        }

        #header.nav-open {
            margin-left: 218px;
        }

        .menu-button{
            font-size:2em;
        }
        /*Additional slds styling*/
        .slds-nav--size{
            position: relative;
            left: -218px;
            width: 218px;
            border-right: 1px solid #d8dde6;
            background:white;
            height: 50.96em;
            -webkit-transition: left 0.3s linear;
            -moz-transition: left 0.3s linear;
            transition: left 0.3s linear;
        }

        .slds-nav--size.open {
            left: 0;
        }
        /*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(){
                        $("#header").toggleClass('nav-open');
                        $(".slds-nav--size").toggleClass('open');
                    });
                });
        </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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题