<div class="header">
  <div class="left-head">
 <div class="logo">
      <img src="http://cdns2.freepik.com/media/img/logo.png">
    </div>
    <a href="#" class="toggle-nav">|||</a>
  </div>
  <div class="right-head">
   
  </div>
</div>
<div class="nice-nav">
  <div class="user-info clear">
    <img src="http://rubix305.sketchpixy.com/imgs/avatars/avatar0.png">
    <div class="user-name ">
      <h5>Jone Doe</h5>
      <span>Front-end Designer</span>
    </div>
  </div>
  <div class="clear"></div>
  <ul>
    <li class="child-menu">
      <a href="#"><span>Dashboard</span> <span class="fa fa-angle-right toggle-right"></span>
      </a>
      <ul class="child-menu-ul">
        <li>
          <a href="#">My Profile</a>
        </li>
        <li>
          <a href="#">My Profile</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>

    <li class="child-menu">
      <a href="#"><span>Setting</span> <span class="fa fa-angle-right toggle-right"></span>
      </a>
      <ul class="child-menu-ul">
        <li>
          <a href="#">Account</a>
        </li>
        <li>
          <a href="#">Profile</a>
        </li>
        <li>
          <a href="#">Event</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
  </ul>
</div>
<div class="body-part"></div>
body {
  font: 14px/18px 'Montserrat', sans-serif;
}

a {
  text-decoration: none;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*common*/

.pad-15 {
  padding: 15px;
}

.clear {
  clear: both; 
}
.clear:after, .clear:before{ 
    content: " ";
   display: table;
}
.header {
  min-height: 55px;
  background: #273135;
  border-bottom: 1px solid #273135;
}

a.toggle-nav {
    top: 12px;
    right: 15px;
    position: absolute;
    color: #fff;
    line-height: 25px;
    font-size: 22px;
    background: #DE5939;
    padding: 3px 5px;
    border-radius: 1px;
    transform: rotate(90deg);
}

.header > .left-head {
  width: 250px;
  display: block;
  background:#20282B;
  position:relative;
}
.header > .left-head .logo img{
  max-width:150px;
  width:100%;
}
.header > .left-head .logo{
  padding:10px 0px 10px 15px;
 }
.nice-nav {
  width: 250px;
  background: #DE5939;
  height: 100%;
  transition:all 0.4s ease-in-out 0s;
  float:left;
}
.nice-nav.open {
    margin-left: -250px;
    display: block;
}
.nice-nav > .user-info {
    padding: 10px 15px;
    color: #fff;
    border-bottom: 1px solid #ddd;
    min-height: 41px;
}
 .nice-nav .user-info .user-name,
.nice-nav .user-info img{float:left;}


.nice-nav> .user-info > .user-name {
  padding: 0px 10px;
}

.user-info > .user-name h5 {
  text-transform: uppercase;
  font-size: 16px;
}

.user-info > .user-name span {
  font-size: 80%;
  color: #555;
  font-style: italic;
}


.nice-nav li.child-menu span.toggle-right {
  text-align: right;
  float: right;
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 15px;
  top: 0;
  background: #DE5939;
  bottom: 0;
}

.nice-nav ul li a {
  padding: 12px;
  background: #FA7252;
  border-bottom: 1px solid #ddd;
  display: block;
  color: #fff;
  position: relative;
}

.nice-nav ul li.child-menu ul {
  background: #aaa;
  display: none;
}

.nice-nav ul li.child-menu ul li a {
  background: #273135;
  padding: 10px 20px;
}
/*note*/
/*Logo Form Freepic*/
 
 $(document).ready(function() {
   //menu left toggle

   $('.toggle-nav').click(function() {
     // alert('done');
     $this = $(this);
     $nav = $('.nice-nav');
     //$nav.fadeToggle("fast", function() {
      //  $nav.slideLeft('250');
   //  });
     
     $nav.toggleClass('open');

   });
   $('.body-part').click(function(){
     $nav.addClass('open');
   });
   //  $nav.addClass('open');

   //drop down menu
   $submenu = $('.child-menu-ul');
   $('.child-menu .toggle-right').on('click', function(e) {
     e.preventDefault();
     $this = $(this);
     $parent = $this.parent().next();
     // $parent.addClass('active');
     $tar = $('.child-menu-ul');
     if (!$parent.hasClass('active')) {
       $tar.removeClass('active').slideUp('fast');
       $parent.addClass('active').slideDown('fast');

     } else {
       $parent.removeClass('active').slideUp('fast');
     }

   });

 });

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js