|
// HTML |
|
|
|
<div class="toggle-mnu"> |
|
<div class="sandwich"> |
|
<div class="sw-topper"></div> |
|
<div class="sw-bottom"></div> |
|
<div class="sw-footer"></div> |
|
</div> |
|
</div> |
|
<nav class="top-mnu animated fadeInUp"> |
|
<ul> |
|
<li><a href="#about" class="animated fadeInUp">Обо мне</a></li> |
|
<li><a href="#resume" class="animated fadeInUp">Резюме</a></li> |
|
<li><a href="#portfolio" class="animated fadeInUp">Портфолио</a></li> |
|
<li><a href="#contacts" class="animated fadeInUp">Контакты</a></li> |
|
</ul> |
|
</nav> |
|
|
|
|
|
// CSS |
|
|
|
.toggle-mnu |
|
border: none |
|
cursor: pointer |
|
height: rem(60) |
|
float: right |
|
position: fixed |
|
right: rem(28) |
|
top: rem(28) |
|
width: rem(60) |
|
z-index: 3 |
|
|
|
$width: rem(34) |
|
$height: rem(3) |
|
.sandwich |
|
width: $width |
|
height: $width |
|
position: absolute |
|
top:12px |
|
bottom: 0 |
|
left: 0 |
|
right: 0 |
|
margin: auto |
|
z-index: 200 |
|
.sw-topper |
|
position: relative |
|
top: 0 |
|
width: $width |
|
height: $height |
|
background: rgb(255, 255, 255) |
|
border: none |
|
border-radius: 4px 4px 4px 4px |
|
transition: transform 0.5s, top 0.2s |
|
|
|
.sw-bottom |
|
position: relative |
|
width: $width |
|
height: $height |
|
top: $height * 2.4 |
|
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: $width |
|
height: $height |
|
top: $height * 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: 10px |
|
transform: rotate(-45deg) |
|
.sw-bottom |
|
top: 6px |
|
transform: rotate(45deg) |
|
.sw-footer |
|
opacity: 0 |
|
top: 0 |
|
transform: rotate(180deg) |
|
|
|
.top-mnu |
|
position: fixed |
|
width: 100% |
|
height: 100% |
|
background-color: rgba(0,0,0,.9) |
|
z-index: 2 |
|
right: 0 |
|
top: 0 |
|
display: none |
|
|
|
ul, li |
|
list-style-type: none |
|
padding: 0 |
|
margin: 0 |
|
|
|
ul |
|
margin-top: rem(180) |
|
text-align: center |
|
li |
|
&:nth-child(1) a |
|
+animation-delay(.7s) |
|
&:nth-child(2) a |
|
+animation-delay(.9s) |
|
&:nth-child(3) a |
|
+animation-delay(1.1s) |
|
&:nth-child(4) a |
|
+animation-delay(1.3s) |
|
a |
|
color: #fff |
|
display: block |
|
letter-spacing: rem(4) |
|
padding: rem(20) 0 |
|
position: relative |
|
text-transform: uppercase |
|
+transition(all .4s ease) |
|
&:hover |
|
background-color: rgba(255,255,255,.05) |
|
|
|
// Javascript |
|
|
|
$(".toggle-mnu").click(function () { |
|
$(".sandwich").toggleClass("active"); |
|
}); |
|
|
|
$(".toggle-mnu").click(function () { |
|
$('.top-mnu').fadeToggle(600); |
|
}); |
|
|
|
$('.top-mnu li a').click(function () { |
|
$('.top-mnu').fadeOut(600); |
|
$(".sandwich").toggleClass("active"); |
|
}); |
