dnestoff
9/19/2016 - 10:01 PM

Javascript: Collapsible Menu Bar

Create a left menu bar that collapses and expands content when clicked.

collapsible_side_menu.html
content_copyfile_download
<body>
  <div class="container">
    <header>
      <h1>My Super SaaS</h1>
    </header>
      <button id="menu_collapser"> > </button>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <br clear="all">
    </nav>
    <div class="content">
    </div>
  </div>
</body>
collapsible_side_menu.css
content_copyfile_download
#menu_collapser {
  position: absolute;
  padding: 0em .75em 0em .75em;
  color: #444;
  border: 0px;
  height: 100%;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  background-color: inherit;
}

nav {
  text-align: center;
  float: left;
  width: 20%;
}

nav * {
  line-height: 150%;
  text-decoration: none;
  font-weight: bold;
}

.content {
  border-left: 1px dashed black;
  padding-left: 2%;
  margin-left: 20%;
  margin-bottom: 20px;
  height: 100%;
}
Collapsible_side_menu.js
content_copyfile_download
$(function () {
  var toggler = 0;
  $("#menu_collapser").click( function(event) {
    event.preventDefault();
    if(toggler == 0) {
      $("nav").hide("fast");
      $(".content").animate({
        marginLeft:'0%'
      });
      toggler = 1;
    }
    else if(toggler == 1) {
      $("nav").show("slow");
      $(".content").animate({
        marginLeft:'20%'
      });
      toggler = 0;
    };
  });
});