<!-- First time in Picked pens -->
<body>
<nav>
<span id='menu-ctn'>
<li class='menu-bars'></li>
</span>
</nav>
<span id='menu-cnt'>
<li class='menu-item'>
<a href='https://www.sololearn.com/Profile/7443355' target='_blank' class='item-link'>Home</a>
</li><hr/>
<li class='menu-item'><a href='https://twitter.com/Rahul__V7?lang=en' target='_blank' class='item-link'>Blog</a></li><hr/>
<li class='menu-item'>Social links<br/>
<a href='https://codepen.io/Rahul_V7/' target='_blank' class='soc-link'>CodePen</a><br/>
<a href='https://stackoverflow.com/users/9272086/rahul?tab=profile' target='_blank' class='soc-link'>Stack Overflow</a><br/>
<a href='https://www.facebook.com/profile.php?id=100013407250899' target='_blank' class='soc-link'>Facebook</a><br/>
<a href='https://plus.google.com/u/0/114676294449878662354' target='_blank' class='soc-link'>Google+</a><br/>
</li>
</span>
</body>
/* VARIABLES */
:root {
--coal: #3A3A3A;
--snow: #ECEFF1;
--apple: #FF4D3A;
}
/* DEFAULT PROPERTIES */
*, *::before, *::after {
box-sizing: border-box;
font: 500 16pt Lato;
color: #7A7A7A;
transition: 0.3s all;
cursor: default;
}
/* CONTAINER PROPERTIES */
body {
margin: 0;
padding: 0;
height: 100vh;
}
nav {
height: 60px;
background: var(--coal);
}
#menu-ctn {
position: relative;
top: 10px;
margin: 0 16px;
height: 40px;
background: var(--apple);
width: 44px;
display: inline-block;
}
a {
cursor: pointer;
}
#menu-cnt {
opacity: 0;
transform: translate(16px, -10px) scale(0.7);
background: #FFF;
padding: 20px;
box-shadow: 1px 2px 1px var(--coal);
visibility: none;
display: inline-block;
}
/* ELEMENT PROPERTIES */
.menu-bars {
height: 4px;
width: 30px;
list-style: none;
background: var(--snow);
margin: 0 7px;
position: relative;
top: 18px;
transition: 0.4s all ease-in;
}
.menu-item, a.item-link {
list-style: none;
text-decoration: none;
z-index: 1;
background: transparent;
width: 100%;
display: inline-block;
}
a.soc-link {
padding: 5px 20px;
display: inline-block;
width: 100%;
text-decoration: none;
}
a.soc-link:nth-of-type(1) {
margin-top: 12px;
}
hr {
border: 0.5px solid var(--coal);
}
.crossed {
background: var(--apple);
}
.dropped {
opacity: 1 !important;
transform: translate(16px, -10px) !important;
visibility: visible !important;
}
.menu-bars::before, .menu-bars::after {
content: '';
position: absolute;
height: 4px;
width: 30px;
list-style: none;
background: var(--snow);
}
.menu-bars::before {
transform: translateY(-10px);
}
.menu-bars::after {
transform: translateY(10px);
}
.crossed::before {
animation: rotate-top-bar 0.4s forwards;
}
.crossed::after {
animation: rotate-bottom-bar 0.4s forwards;
}
.hamburger::before {
animation: rotate-top-bar-2 0.4s reverse;
}
.hamburger::after {
animation: rotate-bottom-bar-2 0.4s reverse;
}
/* EVENT HANDLERS */
.menu-item:hover, a.item-link:hover {
color: var(--coal);
}
a.soc-link:hover {
background: var(--snow);
box-shadow: -4px 0 0 var(--apple);
}
/* ANIMATION KEYFRAMES */
@keyframes rotate-top-bar {
40% {
transform: translateY(0);
}
100% {
transform: translateY(0) rotate(45deg);
}
}
@keyframes rotate-bottom-bar {
40% {
transform: translateY(0);
}
100% {
transform: translateY(0) rotate(-45deg);
}
}
@keyframes rotate-top-bar-2 {
40% {
transform: translateY(0);
}
100% {
transform: translateY(0) rotate(45deg);
}
}
@keyframes rotate-bottom-bar-2 {
40% {
transform: translateY(0);
}
100% {
transform: translateY(0) rotate(-45deg);
}
}
$(() => {
const menu = $('#menu-ctn'), bars = $('.menu-bars'), items = $('.menu-item'), content = $('#menu-cnt');
let firstClick = true, menuClosed = true;
let handleMenu = event => {
if(!firstClick) {
bars.toggleClass('crossed hamburger');
} else {
bars.addClass('crossed');
firstClick = false;
}
menuClosed = !menuClosed;
content.toggleClass('dropped');
event.stopPropagation();
};
menu.on('click', event => {
handleMenu(event);
});
$('body').not('#menu-cnt, #menu-ctn').on('click', event => {
if(!menuClosed) handleMenu(event);
});
$('#menu-cnt, #menu-ctn').on('click', event => event.stopPropagation());
});
External CSS
This Pen doesn't use any external CSS resources.