Необычное горизонтальное меню-гамбургер на CSS3
Очень даже оригинальное меню в стиле "Гамбургер". По-умолчанию оно является небольшой кнопочкой, после клика по которой раскрывается горизонтальное меню
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
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 |
* body input[type="checkbox"] { display: none; } .menu { display: flex; flex-direction: row; } label { display: flex; flex-direction: row; } .items { height: 64px; z-index: 0; transition: all 0.6s ease; font-size: 18px; font-weight: 600; display: flex; flex-direction: row; justify-content: center; align-items: center; } .items [class^="i-"] { margin: 0 10px; cursor: pointer; transition: all .3s ease; } .items [class^="i-"]:hover { color: white; } .first { transform: translatex(100px); opacity: 0%; } .last { transform: translatex(-100px); opacity: 0%; } #menu-active:checked ~ .first { transform: translatex(0px); opacity: 100%; } #menu-active:checked ~ .last { transform: translatex(0px); opacity: 100%; } .lines { cursor: pointer; z-index: 1; } .lines [class^="line-"] { width: 60px; height: 8px; background-color: #fff; margin: 10px 0; transition: all 0.6s ease; } #menu-active:checked ~ label .line-1 { transform: translatey(18px) rotate(45deg); } #menu-active:checked ~ label .line-2 { transform: scale(0); } #menu-active:checked ~ label .line-3 { transform: translatey(-18px) rotate(-45deg); } |
2#: Следующий HTML код меню можете разметить в нужном участке вашего сайта между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="menu"> <input type="checkbox" name="menu-active" id="menu-active"> <div class="items first"> <div class="i-1">Home</div> <div class="i-2">About</div> </div> <label for="menu-active"> <div class="lines"> <div class="line-1"></div> <div class="line-2"></div> <div class="line-3"></div> </div> </label> <div class="items last"> <div class="i-3">Services</div> <div class="i-4">Contact</div> </div> </div> |
