|
HTML |
|
<span class="sandwich"> |
|
<span class="sw-topper"></span> |
|
<span class="sw-bottom"></span> |
|
<span class="sw-footer"></span> |
|
</span> |
|
CSS-SASS |
|
.toggle_mnu |
|
width: 60px |
|
height: 60px |
|
position: fixed |
|
z-index: 100 |
|
border: none |
|
right: 20px |
|
top: 20px |
|
span |
|
display: block |
|
|
|
|
|
$w: 28px |
|
$h: 3px |
|
|
|
.sandwich |
|
width: $w |
|
height: $w |
|
position: absolute |
|
top: 8px |
|
bottom: 0 |
|
left: 0 |
|
right: 0 |
|
margin: auto |
|
z-index: 200 |
|
|
|
.sw-topper |
|
position: relative |
|
top: 0 |
|
width: $w |
|
height: $h |
|
background: rgb(255, 255, 255) |
|
border: none |
|
border-radius: 4px 4px 4px 4px |
|
transition: transform 0.5s, top 0.2s |
|
display: block |
|
|
|
//transition-delay: 0.2s, 0s |
|
|
|
|
|
svg |
|
path |
|
fill: #e0e0e0 |
|
|
|
.sw-bottom |
|
position: relative |
|
width: $w |
|
height: $h |
|
top: $h * 2.2 |
|
background: rgb(255, 255, 255) |
|
border: none |
|
border-radius: 4px 4px 4px 4px |
|
transition: transform 0.5s, top 0.2s |
|
transition-delay: 0.2s, 0s |
|
.sw-footer |
|
position: relative |
|
width: $w |
|
height: $h |
|
top: $h * 4.5 |
|
background: rgb(255, 255, 255) |
|
border: none |
|
border-radius: 4px 4px 4px 4px |
|
transition: all 0.5s |
|
transition-delay: 0.1s |
|
.sandwich.active |
|
.sw-topper |
|
top: 9px |
|
transform: rotate(-45deg) |
|
.sw-bottom |
|
top: 6px |
|
transform: rotate(45deg) |
|
.sw-footer |
|
opacity: 0 |
|
top: 0 |
|
transform: rotate(180deg) |
|
|
|
|
|
JS |
|
$(".toggle_mnu").click(function() { |
|
$(".sandwich").toggleClass("active"); |
|
}); |
|
|
|
$(".top_mnu ul a").click(function() { |
|
$(".top_mnu").fadeOut(600); |
|
$(".sandwich").toggleClass("active"); |
|
$(".top_text").css("opacity", "1"); |
|
}).append("<span>"); |
|
|
|
$(".toggle_mnu").click(function() { |
|
if ($(".top_mnu").is(":visible")) { |
|
$(".top_text").css("opacity", "1"); |
|
$(".top_mnu").fadeOut(600); |
|
$(".top_mnu li a").removeClass("fadeInUp animated"); |
|
} else { |
|
$(".top_text").css("opacity", ".1"); |
|
$(".top_mnu").fadeIn(600); |
|
$(".top_mnu li a").addClass("fadeInUp animated"); |
|
}; |
|
}); |