javascript - Make the menu button slide with the menu -


i trying make side menu bar toggles press of menu button, issue i'm facing here want menu button slide left side menu slides off , again move same position when menu slides in, hoping so..

here code please let me know if went wrong 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 screen , (max-width: 768px) {             /* 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 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>

when menu clicked, add class header. class in css defines margin-left 10px. when menu clicked again, goes original position.

$(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 screen , (max-width: 400px) {    /* 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>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more