Если на сайте немного разделов, и меню состоит не из сотни пунктов, то его десктопную и мобильную версию можно разделить. А далее остается только спраятать одно или другое меню на разных размерах экрана.
Пример:
Для более наглядного примера, я добавил мобильник и изменил прокрутку. В CSS и JS коде этого нет.
Оригинальный вид страницы с меню можно посмотреть по ссылке
Похожий пример, но с анимацией и без использования подразделов, можно посмотреть в теме: Фиксированное гамбургер-меню.
HTML:
Т.к. иконка-гамбургер и само меню имеют фиксированное позиционирование, HTML-код можно разместить на странице в любом удобном месте.
|
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 |
<div class="mobile-menu"> <div class="menu-bar"> <span></span> </div> <div class="menu"> <ul> <li><a href="#url">Главная</a></li> <li class="has-children"> <a href="#url">О компании</a> <ul> <li><a href="#url">Новости</a></li> <li><a href="#url">Вакансии</a></li> <li><a href="#url">Реквизиты</a></li> </ul> </li> <li><a href="#url">Фотогалерея</a></li> <li class="has-children"> <a href="#url">Услуги</a> <ul> <li><a href="#url">Покупка</a></li> <li><a href="#url">Продажа</a></li> <li><a href="#url">Обмен</a></li> </ul> </li> <li><a href="#url">Контакты</a></li> </ul> </div> </div> |
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
.menu-bar { transition: all 0.3s ease-in-out; transition-delay: 0.2s; background-color: #337AB7; border-radius: 50%; border: 4px solid #BFE2FF; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3); position: fixed; bottom: 10px; right: 10px; width: 50px; height: 50px; z-index: 9999999; box-sizing: content-box; } .menu-bar span { transition: all 0.3s ease-in-out; background-color: #fff; display: inline-block; height: 3px; position: absolute; top: 50%; left: 10px; width: 22px; } .menu-bar span:before, .menu-bar span:after { transition: all 0.3s ease-in-out; background-color: #fff; content: ''; display: block; height: 3px; position: absolute; width: 30px; } .menu-bar span:before { top: -8px; } .menu-bar span:after { top: 8px; } .triggered .menu-bar span { width: 0; } .triggered .menu-bar span:before { transform: rotate(45deg); top: 0; } .triggered .menu-bar span:after { transform: rotate(-45deg); top: 0; } .menu { transition: all 0.3s ease-in-out; background-color: #0b4f8a; height: 100vh; opacity: 0; padding: 15px; position: fixed; top: 0; left: 0; transform: translateY(-100%); width: 100vw; z-index: 9999998; overflow-y: auto; } .menu ul { transition: all 0.3s ease-in-out; list-style: none; margin: 0; padding: 0; } .menu ul li { transition: all 0.3s ease-in-out; } .menu ul li a { color: #fff; display: inline-block; font-family: Verdana, sans-serif; font-size: 20px; padding: 8px 15px; position: relative; text-decoration: none; outline: none; } .menu ul li span { display: inline-block; height: 24px; top: 5px; position: relative; width: 24px; } .menu ul li span:before, .menu ul li span:after { background-color: #BFE2FF; content: ''; display: block; height: 3px; position: absolute; width: 15px; } .menu ul li span:before { top: 50%; transform: translateY(-50%); } .menu ul li span:after { transition: all 0.15s ease-in-out; top: 50%; transform: translateY(-50%) rotate(90deg); } .menu ul li span.subtriggered:after { transform: translateY(-50%) rotate(0); } .menu ul li ul li a { padding: 8px 30px; font-size: 18px; color: #BFE2FF; } .triggered .menu { opacity: 1; transform: translateY(0); } .menu ul ul { display: none; } .menu ul .subtriggered + ul { display: block; } |
JS:
|
1 2 3 4 5 6 7 8 9 |
(function($){ $('.menu-bar').on('click', function() { $('.mobile-menu').toggleClass('triggered'); }); $('.has-children > a').after('<span></span>'); $('.has-children span').on('click', function() { $(this).toggleClass('subtriggered'); }); })(jQuery); |
Как указать путь на js файл
На какой? на jquery?
Все получилось у меня в конструкторе надо указывать путь к JS. script src="путь" script
Здравствуйте!
Подскажите, пожалуйста, как можно сделать так, чтобы после нажатия на пункт меню, оно закрывалось и был виден контент сайта? Иначе приходится жать на кнопку с крестиком, а это не всем будет удобно, полагаю.
Если меню по якорям, например для лендинга, то да.
Меняем:
[code]$('.menu-bar').on('click', function() {[/code]
на
[code]$('.menu-bar, .menu a').on('click', function() {[/code]
Спасибо! Всё отлично работает!
Доброго времени суток, уважаемый админ, могли бы подсказать возможно ли как то сделать, внутри самого значка где три полосочки написать слово меню . Пробовал так:
[code] <div class="menu-bar">
<span></span>
Меню
</div>[/code]
Не красиво как то получается, может что то можете подсказать? За ранее благодарен буду за ваш ответ.
Меняем [b]menu-bar span[/b] на:
[code].menu-bar span {
position: absolute;
top: 50%;
left: 10px;
}[/code]
Добавляем:
[code].menu-bar b {
transition: all 0.3s ease-in-out;
display: inline-block;
position: absolute;
top: calc(50% - 6px);
left: 10px;
color: #FFF;
font-size: 10px;
font-weight: bold;
font-family: Tahoma, sans-serif;
}
.triggered .menu-bar b {
opacity: 0;
}[/code]
А HTML кнопки такой:
[code]<div class="menu-bar">
<span></span>
<b>меню</b>
</div>[/code]
Спасибо большое, все отлично!
Здравствуйте!
Подскажите, куда вставлять код JS ?!
В function.php - выдает ошибку.
А зачем вы его в [i]function.php[/i] вставляете?
Там [b]PHP [/b]коды от темы (если я правильно понял, что речь идет о WordPress).
[b]JS [/b]можно вставить в любой файл ---.js этой же темы (ниже библиотеки jQuery) или отдельным файлом или например в подвал темы в теге script
Красивый ответ)