Side Nav Popout

Side Navigation Popout

by Torwan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="content">
safafsdfsdf
</div>

<nav>
<button id="sidenav-toggle"><img alt="Hamburger" src="https://www.solodev.com/assets/side-nav/hamburger.png"></button>
</nav>

<div class="ct-sidenav">
            <button class="close">×</button><img alt="Logo" class="ct-sidenav-logo" src="https://www.solodev.com/assets/side-nav/logo.png">
             <ul class="list-unstyled ct-sidenav-list">
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">Team</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>           
                <li>
                    <a href="#">Services</a>
                </li>
   
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
            <div class="inner">
                <div class="separator"></div>
                <div class="ct-footer-header">
                    Get in Touch
                </div>
                <div class="address">
                    <span>123 Easy Street</span><span>Orlando, FL 32801</span>
                </div>
                <div class="ct-footer-header">
                    Join Us
                </div>
                <ul class="ct-socials list-inline list-unstyled">
                    <li class="ct-socials--facebook">
                        <a href="//www.facebook.com/"><img alt="Facebook" src="#"></a>
                    </li>
                    <li class="ct-socials--linkedin">
                        <a href="//www.linkedin.com/"><img alt="Linkedin" src="#"></a>
                    </li>
                    <li...

CSS

body {
  background-color: #ffffff;
}
#sidenav-toggle img {
  background-color: #000000;
}
#sidenav-toggle img:hover {
    background-color: #00A7E8;
}
#sidenav-toggle img {
    -webkit-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
    padding: 10px 8px;
    padding: 1rem 0.8rem;
}
#sidenav-toggle {
    position: absolute;
    top: 0;
    right: 10px;
    right: 1rem;
    border: none;
    background: transparent;
    font-size: 28px;
    font-size: 2.8rem;
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    line-height: 70px;
    line-height: 7rem;
}
.ct-sidenav.open {
    right: 0;
}
.ct-sidenav {
    width: 343px;
    width: 34.3rem;
    height: 100%;
    position: fixed;
    z-index: 9990;
    top: 0;
    right: -34.3rem;
    background: #191320;
    padding: 75px 0 20px;
    padding: 7.5rem 0 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: right 0.25s ease-in-out;
    transition: right 0.25s ease-in-out;
    color: #b7b6b6;
}
.ct-sidenav .close {
    position: absolute;
    top: 7px;
    top: 0.7rem;
    right: 15px;
    right: 1.5rem;
    text-shadow: none;
    color: #fff;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    font-size: 80px;
    font-size: 8rem;
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    font-weight: lighter;
}
.ct-sidenav-logo {
    max-width: 150px;
    max-width: 15rem;
    position: absolute;
    top: 30px;
    top: 3rem;
    left: 60px;
    left: 6rem;
}
.ct-sidenav-list {
    padding: 50px 0 30px;
    padding: 5rem 0 3rem;
    color: #6e6e6e;
    font-size: 22px;
    font-size: 2.2rem;
}
.ct-sidenav-list > li {
    -webkit-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
}
.ct-sidenav-list > li > a, .ct-sidenav-list > li button {
    font-family:...

JavaScript

$('.sidenav-toggle').on('click', function() {
      var $sidenav, $this;
      $this = $(this);
      $sidenav = $('.ct-sidenav');
      if ($this.hasClass('active')) {
        $this.removeClass('active');
        return $sidenav.removeClass('active');
      } else {
        $this.addClass('active');
        return $sidenav.addClass('active');
      }
    });
    $('#sidenav-toggle').on('click', function() {
      var $sidenav, $this;
      $this = $(this);
      $sidenav = $('.ct-sidenav');
      if ($this.hasClass('open')) {
        $this.removeClass('open');
        return $sidenav.removeClass('open');
      } else {
        $this.addClass('open');
        return $sidenav.addClass('open');
      }
    });
    $('.ct-sidenav').find('button.close').on('click', function() {
      $(this).parent().removeClass('open');
      return $('#sidenav-toggle').removeClass('open');
    });