<img id="calloumi" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68705/calloumilogo.svg" alt="" />
<section id="p_1">
<div id="p_case-1">
<div id="p_screen-1">
<ul id="menu-1">
<li class="m_1-item">Home</li>
<li class="m_1-item">About</li>
<li class="m_1-item">News</li>
<li class="m_1-item">Store</li>
<li class="m_1-item">Contact</li>
</ul>
<div id="m_button-1">
<span class="line-1 top-1"></span>
<span class="line-1"></span>
<span class="line-1 bottom-1"></span>
</div>
</div>
</div>
<article id="info-1">
<h1>Menu One</h1>
<p>Nothing too flashy but kinda sharp.</p>
</article>
</section>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
* {
box-sizing: border-box
}
body {
margin: 0;
}
#p_1 {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/68705/IMG_0107.JPG);
background-size: cover;
width: 100%;
height: 830px;
float: left;
font-family: 'Montserrat';
padding: 6%;
}
#p_case-1 {
float: left;
background: #121212;
width: 300px;
padding: 60px 16px;
border-radius: 20px;
border: 3px solid #ccc;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.6);
}
#p_screen-1 {
width: 260px;
height: 420px;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
background: #eee;
margin: 0 auto;
cursor: pointer;
}
#menu-1 {
background: #2B3C6D;
float: left;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
height: 420px;
margin: 0;
padding: 80px 0 0 0;
overflow: hidden;
width: 0;
transition: width 0.3s ease;
}
.m_1-item {
list-style-type: none;
padding: 16px 40px;
font-size: 20px;
border-top: 1px solid #516190;
color: #fff;
}
.menu-footer {
width: 200px;
}
#m_button-1 {
width: 60px;
cursor: pointer;
padding: 4px;
margin: 16px;
float: left;
position: absolute;
}
.line-1 {
width: 60px;
height: 10px;
border-radius: 5px;
background-color: #444;
margin-bottom: 6px;
display: block;
transition: 0.3s ease;
}
.tilt-top {
transform: rotate(-45deg);
width: 40px;
margin-left: -5px;
margin-bottom: 1px;
margin-top: 5px;
}
.tilt-bottom {
transform: rotate(45deg);
width: 40px;
margin-left: -5px;
margin-top: -5px;
}
.show-menu-1 {
width: 200px !important;
}
.change-1 {
background: #fff;
}
#info-1 {
float: left;
color: #2B3C6D;
font-size: 20px;
width: 50%;
padding: 6%;
border-radius: 10px;
}
#info-1 h1 {
border-bottom: 4px solid;
font-size: 40px;
}
#calloumi {
position: fixed;
width: 160px;
right: 0;
margin: 20px;
}
$('#m_button-1').click(function() {
$('.top-1').toggleClass('tilt-top');
$('.bottom-1').toggleClass('tilt-bottom');
$('#menu-1').toggleClass('show-menu-1');
$('.line-1').toggleClass('change-1');
})
This Pen doesn't use any external CSS resources.