Stellen Sie die Menüschaltfläche mit dem Menü

dar. Ich versuche eine seitliche Menüleiste zu erstellen, die mit dem Drücken einer Menütaste wechselt, aber das Problem hier ist, dass ich die Menütaste nach links als verschieben möchte das Seitenmenü abrutscht und wieder zurück in derselben Position bewegen, wenn das Menü in gleitet, von SO etwas Hilfe zu bekommen gehofft ..Stellen Sie die Menüschaltfläche mit dem Menü

Hier ist mein Code Sie mich bitte, wenn ich falsch ging somewere,

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

Quelle

2017-07-28 Anonymous

Wenn die Menü wird angeklickt, ich füge eine Klasse zur Überschrift hinzu. Die Klasse in CSS definiert margin-left als 10px. Wenn das Menü erneut angeklickt wird, kehrt es zur ursprünglichen Position zurück.

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

Quelle

2017-07-28 13:43:06 Gerard

Lol, ich buchstäblich nur zusammen eine Geige fertig stellen (das gleiche tun), kam zurück und sah Ihre Antwort: D. Btw, wenn du 'transition: margin-left 0.3s ease-in 0s;' zu '.menu-button' hinzufügst, wird es der Geschwindigkeit und der Lockerung der Menü-Folie entsprechen :) – Frits

Hehe, danke für den Tipp. Übergang ist hinzugefügt :) – Gerard

Ziemlich überrascht, dass Sie JS mit ihm verwenden, wenn dies manchmal besser durch direkte CSS3 – Option

Ihre #header haben margin-left: 218px und Sie tun nichts mit diesem, wenn Sie Menüanzeige ändern. Ich Code und die Verwendung CSS Übergang für diese ändern:

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

Quelle

2017-07-28 13:48:02

Stellen Sie die Menüschaltfläche mit dem Menü

Antwort

Verwandte Themen