<section>
<nav>
<a class="navicon-button larr">
<div class="navicon"></div>
</a>
<a class="navicon-button rarr">
<div class="navicon"></div>
</a>
<a class="navicon-button uarr">
<div class="navicon"></div>
</a>
<a class="navicon-button x">
<div class="navicon"></div>
</a>
<a class="navicon-button plus">
<div class="navicon"></div>
</a>
<a class="navicon-button">
<div class="navicon"></div>
</a>
</nav>
<h1>Click the icons!</h1>
<!-- =========== -->
<!-- Delete this script tag if copying this code -->
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIL27N&placement=bennettfeelycom" id="_carbonads_js"></script>
<!-- =========== -->
</section>
// Change to watch in slow motion
$duration: .5s;
$size : 100%;
$toggled-size : .75;
$bg : #274380;
$nav-bg : #000;
$content-bg : #FFF;
.navicon-button {
display: inline-block;
position: relative;
padding: 2.0625rem 1.5rem;
transition: $duration/2;
cursor: pointer;
user-select: none;
opacity: .8;
.navicon:before, .navicon:after {
transition: $duration/2;
}
&:hover {
transition: $duration;
opacity: 1;
.navicon:before, .navicon:after {
transition: $duration/2;
}
.navicon:before { top: .825rem; }
.navicon:after { top: -.825rem; }
}
}
.navicon {
position: relative;
width: 2.5em;
height: .3125rem;
background: $content-bg;
transition: $duration;
border-radius: 2.5rem;
&:before, &:after {
display: block;
content: "";
height: .3125rem;
width: 2.5rem;
background: $content-bg;
position: absolute;
z-index: -1;
transition: $duration $duration/2;
border-radius: 1rem;
}
&:before { top: .625rem; }
&:after { top: -.625rem; }
}
.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
top: 0 !important;
}
.open .navicon:before,
.open .navicon:after {
transition: $duration;
}
/* Minus */
.open { transform: scale($toggled-size); }
/* Arrows */
.open.larr .navicon,
.open.rarr .navicon,
.open.uarr .navicon {
&:before, &:after {
width: 1.5rem;
}
&:before { transform: rotate(35deg); transform-origin: left top; }
&:after { transform: rotate(-35deg); transform-origin: left bottom; }
}
.open.uarr { transform: scale($toggled-size) rotate(90deg); }
/* Arrows */
.open.rarr .navicon {
&:before { transform: translate3d(1em,0,0) rotate(-35deg); transform-origin: right top; }
&:after { transform: translate3d(1em,0,0) rotate(35deg); transform-origin: right bottom; }
}
/* × and + */
.open.plus,
.open.x {
.navicon {
background: transparent;
&:before { transform: rotate(-45deg); }
&:after { transform: rotate(45deg); }
}
}
.open.plus {
transform: scale($toggled-size) rotate(45deg)
}
/* Base ================== */
* { box-sizing: border-box; }
html { font-size: $size; }
html, body, section { position: relative; height: 100%; }
body {
font-family: sans-serif;
background: $bg;
padding: 1.5rem 1.5rem 0;
backface-visibility: hidden;
}
section {
max-width: 40rem;
margin: 0 auto;
border-radius: .5rem .5rem 0 0;
background: $content-bg;
overflow: hidden;
/* Smoother animations */
& *,
& *:before,
& *:after {
transform: translate3d(0,0,0);
}
}
nav {
display: flex;
justify-content: space-between;
height: 4.5rem;
background: $nav-bg;
text-align: right;
border-radius: .5rem .5rem 0 0;
padding: 0 1rem;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
h1 {
text-align: right;
padding: 1.5rem;
opacity: .5;
transition: $duration*2;
pointer-events: none;
&.fade {
opacity: 0;
}
}
// Delete this code
//
#carbonads {
--width: 180px;
--font-size: 14px;
}
#carbonads {
display: block;
overflow: hidden;
max-width: var(--width);
font-size: var(--font-size);
margin: 0 2em;
background: rgba($bg, .1);
padding: .5em;
border-radius: 1rem;
&:hover {
color: dodgerblue;
}
}
#carbonads a {
color: inherit;
text-decoration: none;
}
.carbon-img img {
display: block;
margin: 1rem auto;
width: 100%;
height: auto;
background: white;
border-radius: 5px;
}
.carbon-text {
display: block;
padding: 0 1rem;
}
.carbon-poweredby {
display: block;
padding: 1rem 1rem .5rem;
font-size: smaller;
opacity: .5;
}
View Compiled
$("a").click(function(){
$(this).toggleClass("open");
$("h1").addClass("fade");
});
This Pen doesn't use any external CSS resources.