Sliding sidebar

by Codi Bezouka-Smith

HTML

<header>
  <nav>
    <div class="navbar-left">
      <a href="index.php">
        <img src="http://i.imgur.com/IGvg5kM.png" alt="heart[fx] logo" width="100px" />
      </a>
    </div>
    <div class="navbar-right">
      <!-- icons -->
      <img src="http://i.imgur.com/HD6W7XJ.png" class="icon-search" alt="search-icon" />

      <a class="p1" href="#p1">
        <span class="icon-bars-button">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </span>
      </a>

      <div class="page" id="p1-page">
        <div id="shell">
          <img src="http://i.imgur.com/HD6W7XJ.png" class="" alt="large_avatar" width="100%" height="100%" />

          <br /><button>close</button>
        </div>
      </div>
      
      <img src="http://i.imgur.com/QFxs0nX.png" class="user_avatar" alt="default avatar" />
      
    </div>
    <!-- closing tag for nav.navbar -->
  </nav>
</header>

CSS

/* basic css for html & body */

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  font-family: verdana, sans-serif;
}


/* adjusts look of navbar */

nav {
  background-color: #343534;
  overflow: hidden;
}


/* navbar-left */

.navbar-left {
  float: left;
  padding: 15px;
  max-height: 60px;
}

.navbar-left:hover {
  background-color: #121212;
}


/* navbar-right */

.navbar-right {
  float: right;
  max-height: 60px;
}


/* sign-up & log-in buttons */

button.sign-up,
button.log-in {
  background-color: #ec5645;
  border-radius: 1px;
  border: 1px solid transparent;
  color: white;
  width: 80px;
  height: 25px;
  font-family: verdana;
  font-size: 10px;
  margin-right: 3px;
  margin-top: 12px;
}


/* sign-up & log-in btns on hover & focus */

button.sign-up:hover,
button.sign-up:focus,
button.log-in:hover,
button.log-in:focus {
  background-color: #e62d18;
  cursor: pointer;
}


/* adjusts the search-icon */

img.icon-search {
  width: 23px;
  position: relative;
  top: 8px;
  margin-right: 5px;
}


/* creates the icon bar from span.icon-bars-button & span.icon-bar */


/* creates the icon bar from span.icon-bars-button & span.icon-bar */

.icon-bars-button {
  display: inline-block;
  vertical-align: block;
  margin-right: 20px;
  position: relative;
  top: 7px;
}

.icon-bar {
  margin-bottom: 2px;
  display: block;
  width: 20px;
  height: 5px;
  background-color: white;
  border-radius: 1px;
}

.page.active {
  z-index: 100;
}


/* adjust page (sidebar) that slides in... */

.page {
  width: 18%;
  height: 100%;
  text-align: left;
  position: fixed;
  display: none;
  top: 55px;
  right: 0;
}

.page #shell {
  height: 100%;
  padding: 0.5em 1em;
  background: #FFF;
  background: rgba(255, 255, 255, 0.9);
  border-left: 1px solid #EEE;
}

.front_layer {
  z-index: 2;
}


/* adjusts the form where users will Log In */

form.login_module,
form.register_module {
  max-width: 40%;
  margin-top: 2%;
}

@media only screen and (max-width:...

JavaScript

$(function() {

  var nav = $('a.p1');
  nav.click(function() {
    var target = $($(this).attr('href') + '-page');
    target.addClass('active').toggle(500);
    $('.page:visible').not(target).removeClass('active').toggle(500);
    return false;
  });

  $(".page button").click(function() {
    $(".page").hide(1000);
  });
});