Toggle Menu
Toggle menu with animated navigation menu icon created by Vladislav Kirbaba
<a href="#nowhere" class="navicon"></a> | |
<div class="toggle"> | |
<h1>Toggle Menu</h1> | |
<h3>Created by Vladislav Kirbaba</h3> | |
<ul class="toggle__menu"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Contacts</a></li> | |
<li><a href="#"><span>..and more</span></a></li> | |
</ul> | |
<ul class="social"> | |
<li><a href="https://github.com/Kirbaba"><i class="fa fa-github"></i></a></li> | |
<li><a href="https://twitter.com/VladKirbaba"><i class="fa fa-twitter"></i></a></li> | |
<li> <a href="https://www.facebook.com/VladislavKirbaba"><i class="fa fa-facebook"></i></a></li> | |
<li><a href="https://vk.com/vladislavkirbaba"> <i class="fa fa-vk"></i></a></li> | |
</ul> | |
<small>Inspired by Bruno Cartaxeiro's http://codepen.io/BRN/pen/tjwzl</small> | |
</div> |
$('.navicon').on('click', function (e) { | |
e.preventDefault(); | |
$(this).toggleClass('navicon--active'); | |
$('.toggle').toggleClass('toggle--active'); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,700,500,300); | |
body { | |
background-image: url('https://static.pexels.com/photos/7026/fre-sonneveld.jpg'); | |
background-position: 50%; | |
background-repeat: no-repeat; | |
font-family: 'Raleway', sans-serif; | |
} | |
h1 { | |
font-weight: 300; | |
text-transform: uppercase; | |
font-size: 40px; | |
text-align: center; | |
} | |
h3 { | |
text-align: center; | |
font-weight: 900; | |
font-size: 15px; | |
//text-transform: uppercase; | |
margin: 15px; | |
} | |
small { | |
font-size: 12px; | |
text-transform: lowercase; | |
font-weight: 300; | |
text-align: center; | |
display: block; | |
} | |
.navicon { | |
width: 100%; | |
background: transparent; | |
margin: 80px auto 40px; | |
position: relative; | |
height: 30px; | |
width: 50px; | |
display: block; | |
z-index: 99; | |
transition: linear 0.5s all; | |
&:before, | |
&:after { | |
background: #fff; | |
backface-visibility: hidden; | |
content: ""; | |
height: 3px; | |
left: 0; | |
transition: 0.8s ease; | |
width: 45px; | |
} | |
&:before { | |
box-shadow: #fff 0 14px 0 0; | |
position: absolute; | |
top: 0; | |
} | |
&:after { | |
position: absolute; | |
top: 28px; | |
} | |
&--active { | |
margin-top: 20px; | |
transition: linear 0.5s all; | |
&:before { | |
box-shadow: transparent 0 0 0 0; | |
top: 15px; | |
transform: rotate(225deg); | |
} | |
&:after { | |
top: 15px; | |
transform: rotate(315deg); | |
} | |
} | |
} | |
.toggle { | |
display: block; | |
margin: 20px auto; | |
width: 30%; | |
background-color: rgba(255, 255, 255, .8); | |
padding: 15px; | |
display: block; | |
opacity: 0; | |
transition: ease-in 0.5s all; | |
transform: translateY(-200%); | |
min-width: 320px; | |
&--active { | |
display: block; | |
opacity: 1; | |
transition: ease-in 0.5s all; | |
transform: translateY(0); | |
} | |
&__menu { | |
margin-bottom: 25px; | |
li { | |
width: 25%; | |
display: block; | |
margin: 10px auto; | |
a { | |
text-decoration: none; | |
color: #000; | |
display: block; | |
text-align: center; | |
font-size: 17px; | |
text-transform: uppercase; | |
border-bottom: 2px solid transparent; | |
transition: linear 0.5s all; | |
font-weight: 500; | |
padding: 5px 0; | |
span { | |
text-transform: lowercase; | |
} | |
&:hover { | |
color: #db5523; | |
border-bottom: 2px solid #db5523; | |
transition: linear 0.5s all; | |
transform: scale(1.15); | |
font-weight: 700; | |
} | |
} | |
} | |
} | |
} | |
.social { | |
display: block; | |
width: 70%; | |
margin: 25px auto; | |
text-align: center; | |
font-size: 0; | |
li { | |
display: inline-block; | |
width: 25%; | |
text-align: center; | |
a { | |
text-align: center; | |
color: #000; | |
font-size: 25px; | |
transition: linear 0.5s all; | |
&:hover { | |
color: #db5523; | |
transition: linear 0.5s all; | |
} | |
} | |
} | |
} |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |