<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu">
<ul>
<li><a>About Us</a></li>
<li><a>Our Work</a></li>
<li><a>Web Store</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="page">
<h1>Menu Hover Effect</h1>
<p>The Hover effect for the menu is different for Mobile and Desktop. Adjut the screen size to see the difference! The break point is 720px.</p>
<p>Lorem ipsum dolor sit amet, felis eros elementum phasellus pede integer, in amet a netus ac, integer eu, magna ut nunc. Aenean iaculis sed vestibulum, mauris a fermentum quis id sodales. Nascetur viverra. Vitae nibh hendrerit. Eget erat, eget ipsum lectus in elementum vestibulum per, massa mauris vitae accumsan. Arcu elit gravida suspendisse, arcu eget posuere suspendisse. Interdum nec torquent metus accumsan wisi velit, fusce auctor hendrerit consectetuer, donec duis. Placerat vulputate enim vivamus et, et mauris lorem quis faucibus risus et. Laoreet arcu aliquam at, neque amet lectus et orci, in ultrices ac non in posuere libero, felis vulputate.</p>
<p>Lorem ipsum dolor sit amet, felis eros elementum phasellus pede integer, in amet a netus ac, integer eu, magna ut nunc. Aenean iaculis sed vestibulum, mauris a fermentum quis id sodales. Nascetur viverra. Vitae nibh hendrerit. Eget erat, eget ipsum lectus in elementum vestibulum per, massa mauris vitae accumsan. Arcu elit gravida suspendisse, arcu eget posuere suspendisse. Interdum nec torquent metus accumsan wisi velit, fusce auctor hendrerit consectetuer, donec duis. Placerat vulputate enim vivamus et, et mauris lorem quis faucibus risus et. Laoreet arcu aliquam at, neque amet lectus et orci, in ultrices ac non in posuere libero, felis vulputate.</p>
<p>Lorem ipsum dolor sit amet, felis eros elementum phasellus pede integer, in amet a netus ac, integer eu, magna ut nunc. Aenean iaculis sed vestibulum, mauris a fermentum quis id sodales. Nascetur viverra. Vitae nibh hendrerit. Eget erat, eget ipsum lectus in elementum vestibulum per, massa mauris vitae accumsan. Arcu elit gravida suspendisse, arcu eget posuere suspendisse. Interdum nec torquent metus accumsan wisi velit, fusce auctor hendrerit consectetuer, donec duis. Placerat vulputate enim vivamus et, et mauris lorem quis faucibus risus et. Laoreet arcu aliquam at, neque amet lectus et orci, in ultrices ac non in posuere libero, felis vulputate.</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Anton|Josefin+Sans');
::-webkit-scrollbar{
width:10px;
height:10px;
background-color: rgba(255,255,255,10);
border-top: 1px solid #000;
}
::-webkit-scrollbar-thumb{
background-color: #1a1a1a;
height:5px;
}
* {
box-sizing: border-box;
}
html, body {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background: #000;
}
.page {
width: 720px;
float: left;
position: relative;
left: 50%;
margin-left: -360px;
padding: 10px;
h1, p {
float: left;
width: 100%;
color: #fff;
font-family: 'Josefin Sans', sans-serif;
}
h1 {
text-transform: uppercase;
margin-top: 115px;
text-align: center;
letter-spacing: 10px;
}
p {
line-height: 20pt;
font-size: 14pt;
font-weight: 100;
text-align: justify;
}
}
.menu {
opacity: 0;
pointer-events: none;
background: #fff;
width: 80%;
float: left;
height: 100%;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
border-left: 15px solid #333;
transition: all 1s ease;
-webkit-transition: all 1s ease;
&.open {
opacity: 1;
pointer-events: all;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
}
ul {
float: right;
list-style: none;
position: fixed;
color: #000;
right: 70px;
font-size: 40pt;
top: 50%;
margin-top: -190px;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
li {
float: left;
clear: both;
width: 100%;
margin: 20px 0px 20px 0px;
text-align: right;
position: relative;
letter-spacing: 20px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
cursor: pointer;
&:hover {
letter-spacing: 2px;
padding-right: 20px;
color: #31f4d6;
&:after {
border: 8px solid #f431d6;
}
&:before {
// -webkit-transform:rotate(-45deg) translate(0px, 0px);
opacity: 1;
-webkit-animation: hoverRotate .5s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: .1s;
-webkit-transform: rotate(45deg) translate(-0px, 0px);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
}
&:after {
content: '';
float: left;
position: absolute;
width: 40px;
border-radius: 500px;
height: 40px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
border: 8px solid #000;
right: -50px;
z-index: -1;
top: -7px;
}
&:before {
content: '';
float: left;
position: absolute;
width: 70px;
height: 10px;
background: #f4e931;
right: -57px;
top: 17px;
-webkit-transform: rotate(-45deg) translate(-60px, 0px);
opacity: 0;
// transform:rotate(-45deg);
z-index: 10000;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
}
}
.burger {
width: 50px;
float: left;
position: fixed;
right: 30px;
z-index: 10000;
top: 20px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
cursor: pointer;
span {
width: 100%;
float: left;
height: 7px;
background: #fff;
margin-top: 10px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
&:hover {
span {
background: #31f4d6 !important;
}
}
&.open {
span {
background: #000;
&:nth-child(1) {
-webkit-transform: rotate(45deg) translate(10px, 10px);
}
&:nth-child(2) {
-webkit-transform: rotate(-45deg) translate(0px, -5px);
}
&:nth-child(3) {
opacity: 0;
}
}
}
}
@-webkit-keyframes hoverRotate {
0% {
-webkit-transform: rotate(-45deg) translate(-60px, 0px);
}
50% {
-webkit-transform: rotate(-45deg) translate(-0px, 0px);
}
100% {
-webkit-transform: rotate(45deg) translate(-0px, 0px);
}
}
@media screen and (max-width: 750px) {
.page {
width: 100%;
left: 0%;
padding: 20px;
margin-left: -0px;
}
.menu{
width:100%;
border:0;
}
ul {
right: 10px;
li {
font-size: 18pt;
&:after {
width: 100%;
border-radius: 0px;
height: 3px;
position:absolute;
background: #f4e931;
border: 0px;
top:40%;
}
&:before {
display: none;
}
&:hover{
&:after{
border:0px;
opacity:0;
}
}
}
}
}
View Compiled
$('.burger').click(function(){
$(this).toggleClass('open');
$('.menu').toggleClass('open');
});
This Pen doesn't use any external CSS resources.