堆棧內存溢出
  簡體   English   中英

使菜單按鈕與菜單一起滑動

[英]Make the menu button slide with the menu

 原文  2017-07-28 13:22:55  9   2    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 個解決方案

解決方案1
 3 已采納  2017-07-28 13:43:06

單擊菜單后，我在標題中添加了一個類。 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>

解決方案2
 0  2017-07-28 13:48:02

您的#header左邊距為218px，更改菜單顯示時您不會對此進行任何操作。 我修改您的代碼，並為此使用CSS過渡： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使導航菜單滑入 使菜單上下滑動 如何使此幻燈片菜單起作用 如何使下拉菜單向上滑動？ 滑動面板菜單后退按鈕不起作用 jQuery菜單幻燈片和更改按鈕文本 為什么后退按鈕與幻燈片菜單一起顯示？ Javascript：多級菜單滑動按鈕單擊 使子菜單在頁腳上方滑動 如何使菜單從視口滑動到標題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM