Виджет последних записей с меню

by Denis Tverdokhlebov

HTML

<div class="frame">
  <div class="panel">
    <div class="header flex">
			<div class="menu-icon">
				<div class="dash-top"></div>
				<div class="dash-bottom"></div>
				<div class="circle circle-1"></div>
			</div>
			<span class="title">Notifications</span>
		</div>
		
		<div class="notifications clearfix">
			<div class="line"></div>
			<div class="notification">
				<div class="circle"></div>
				<span class="time">9:24 AM</span>
				<p><b>John Walker</b> posted a photo on your wall.</p>
			</div>
			<div class="notification">
				<div class="circle"></div>
				<span class="time">8:19 AM</span>
				<p><b>Alice Parker</b> commented your last post.</p>
			</div>
			<div class="notification">
				<div class="circle"></div>
				<span class="time">Yesterday</span>
				<p><b>Luke Wayne</b> followed you.</p>
			</div>
		</div>
  </div>
	
	<div class="menu">
		<ul>
			<li class="hvr-underline-from-left"><span class="fa fa-dashboard"></span>Dashboard</li>
			<li class="hvr-underline-from-left"><span class="fa fa-user"></span>Profile</li>
			<li class="hvr-underline-from-left"><span class="fa fa-bell"></span>Notifications</li>
			<li class="hvr-underline-from-left"><span class="fa fa-comments"></span>Messages</li>
			<li class="hvr-underline-from-left"><span class="fa fa-gear"></span>Settings</li>
		</ul>
	</div>
	
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans|Montserrat+Alternates");
body {
  background: #643a7a;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.6);
  background: #d8c9cf;
  color: #666;
  font-family: 'montserrat alternates', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.panel {
  position: absolute;
  z-index: 2;
  height: 300px;
  width: 300px;
  top: 50px;
  left: 50px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0.5rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.4);
  transition: all .5s ease-in-out;
}

.panel.show-menu {
  -webkit-transform: translate3d(150px, 0, 0);
          transform: translate3d(150px, 0, 0);
}

.panel .header {
  height: 60px;
  width: 100%;
  background: #643a7a;
  font-family: 'josefin sans', serif;
}

.panel .header .menu-icon {
  position: absolute;
  width: 29px;
  height: 15px;
  top: 23px;
  left: 20px;
  cursor: pointer;
}
.panel .header .menu-icon:hover .dash-top {
  -webkit-transform: translate(0.6rem);
          transform: translate(0.6rem);
  transition: .5s;
}
.panel .header .menu-icon:hover .circle-1 {
  -webkit-transform: translate(-1.6rem);
          transform: translate(-1.6rem);
  transition: .5s;
}

.panel .header .menu-icon .dash-top, .panel .header .menu-icon .dash-bottom {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 1px;
  transition: all .2s ease-in-out;
}

.panel .header .menu-icon .dash-bottom {
  width: 29px;
  top: auto;
  bottom: 0;
}

.panel .header .menu-icon .circle {
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 4px;
  top: -2px;
  right: 0;
  background: #fff;
  transition: all .2s ease-in-out;
}

.slide {
  -webkit-transform: translate(-1.6rem);
      ...

JavaScript

// jQuery v3.3.1 is supported
$('.menu-icon').click( function() {
    $('.panel').toggleClass('show-menu');
    $('.menu').toggleClass('active');
	$('.circle-1').toggleClass('slide');
	$('.dash-top').toggleClass('slide-top');
});