Вариант 1:
|
1 2 3 4 5 |
<div id="nav-icon1"> <span></span> <span></span> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#nav-icon1 { width: 60px; height: 45px; position: relative; margin: 30px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon1 span { display: block; position: absolute; height: 9px; width: 100%; background: #337AB7; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon1 span:nth-child(1) { top: 0px; } #nav-icon1 span:nth-child(2) { top: 18px; } #nav-icon1 span:nth-child(3) { top: 36px; } #nav-icon1.open span:nth-child(1) { top: 18px; transform: rotate(135deg); } #nav-icon1.open span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon1.open span:nth-child(3) { top: 18px; transform: rotate(-135deg); } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon1').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 2:
|
1 2 3 4 5 6 7 8 |
<div id="nav-icon2"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
#nav-icon2 { width: 60px; height: 45px; position: relative; margin: 30px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon2 span { display: block; position: absolute; height: 9px; width: 50%; background: #337AB7; opacity: 1; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon2 span:nth-child(even) { left: 50%; border-radius: 0 9px 9px 0; } #nav-icon2 span:nth-child(odd) { left:0px; border-radius: 9px 0 0 9px; } #nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) { top: 0px; } #nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) { top: 18px; } #nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) { top: 36px; } #nav-icon2.open span:nth-child(1), #nav-icon2.open span:nth-child(6) { transform: rotate(45deg); } #nav-icon2.open span:nth-child(2), #nav-icon2.open span:nth-child(5) { transform: rotate(-45deg); } #nav-icon2.open span:nth-child(1) { left: 5px; top: 7px; } #nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 7px; } #nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0; } #nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0; } #nav-icon2.open span:nth-child(5) { left: 5px; top: 29px; } #nav-icon2.open span:nth-child(6) { left: calc(50% - 5px); top: 29px; } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon2').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 3:
|
1 2 3 4 5 6 |
<div id="nav-icon3"> <span></span> <span></span> <span></span> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#nav-icon3 { width: 60px; height: 45px; position: relative; margin: 30px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 9px; width: 100%; background: #337AB7; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 18px; } #nav-icon3 span:nth-child(4) { top: 36px; } #nav-icon3.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon3').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 4:
|
1 2 3 4 5 |
<div id="nav-icon4"> <span></span> <span></span> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#nav-icon4 { width: 60px; height: 45px; position: relative; margin: 30px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon4 span { display: block; position: absolute; height: 9px; width: 100%; background: #337AB7; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon4 span:nth-child(1) { top: 0px; transform-origin: left center; } #nav-icon4 span:nth-child(2) { top: 18px; transform-origin: left center; } #nav-icon4 span:nth-child(3) { top: 36px; transform-origin: left center; } #nav-icon4.open span:nth-child(1) { transform: rotate(45deg); top: -3px; left: 8px; } #nav-icon4.open span:nth-child(2) { width: 0%; opacity: 0; } #nav-icon4.open span:nth-child(3) { transform: rotate(-45deg); top: 39px; left: 8px; } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon4').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 5:
|
1 2 3 |
<div id="nav-icon5"> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#nav-icon5 { margin: 30px auto; width: 60px; height: 45px; position: relative; transition-duration: 1s; cursor: pointer; } #nav-icon5 span { height: 9px; width: 60px; background-color: #337AB7; border-radius: 20px; position: absolute; transition-duration: .25s; top: 18px; } #nav-icon5 span:before { left: 0; position: absolute; top: -18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; } #nav-icon5 span:after { left: 0; position: absolute; top: 18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; } #nav-icon5.open { transform: rotateZ(450deg); } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon5').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 6:
|
1 2 3 |
<div id="nav-icon6"> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
#nav-icon6 { width: 60px; height: 45px; position: relative; transition-duration: 1s; margin: 48px auto 12px auto; cursor: pointer; } #nav-icon6 span { height: 9px; width: 60px; background-color: #337AB7; border-radius: 20px; position: absolute; transition-duration: .25s; transition-delay: .25s; } #nav-icon6 span:before { left: 0; position: absolute; top: -18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; transition: transform .25s, top .25s .25s; } #nav-icon6 span:after { left: 0; position: absolute; top: 18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; transition: transform .25s, top .25s .25s; } #nav-icon6.open span { transition-duration: 0.1s; transition-delay: .25s; background: transparent; } #nav-icon6.open span:before { transition: top .25s, transform .25s .25s; top: 0px; transform: rotateZ(-45deg); } #nav-icon6.open span:after { transition: top 0.4s, transform .25s .25s; top: 0px; transform: rotateZ(45deg); } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon6').click(function(){ $(this).toggleClass('open'); }); }); |
Вариант 7:
|
1 2 3 |
<div id="nav-icon7"> <span></span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
#nav-icon7 { width: 60px; height: 45px; position: relative; transition-duration: 1s; margin: 48px auto 12px auto; cursor: pointer; } #nav-icon7 span { height: 9px; width: 60px; background-color: #337AB7; border-radius: 20px; position: absolute; transition-duration: .25s; } #nav-icon7 span:before { left: 0; position: absolute; top: -18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; } #nav-icon7 span:after { left: 0; position: absolute; top: 18px; height: 9px; width: 60px; background-color: #337AB7; content: ""; border-radius: 20px; transition-duration: .25s; } #nav-icon7.open span { background: transparent; } #nav-icon7.open span:before { transition: transform .25s; transform: rotateZ(45deg); top: 0; } #nav-icon7.open span:after { transition: transform .25s; transform: rotateZ(-405deg); top: 0; } |
|
1 2 3 4 5 |
$(function() { $('#nav-icon7').click(function(){ $(this).toggleClass('open'); }); }); |
Что надо дописать в джиквери, что бы крестик обратно превращался в бургер при клике на слое с классом .overlay и при нажатии кнопки ESC на клаве?
Убрать open у бургера(крестика)
А как это использовать на сайте?
По клику заменяется иконка, и нужно добавить что то еще, область например.
И по этому же клику ее открывать и закрывать.
Напишите в ВК мне, я расскажу подробнее