В данной статье разберём как создать нам меню для сайта с использованием только три вида кода, это .HTML, .CSS и .JS.
Практически на каждом сайте какой какай бы он не был у него всегда должно быть хоть одно меню для навигации пользователь исключением может быть только сайт одностаничник хотя и в них в большинстве случаев используют меню для навигации по странице.
Меню для сайта html
Здесь я на примере этого сайта верхнее меню или как ещё называют в шапке сайта и будем использовать идентификатор «id» и использовать название «header menu».
Код:
<!-- Основное Меню -->
<header id="header">
<!-- Здесь может быть ваш дополнительный код .HTML, логотип, ссылка на главную страницу -->
<div id="header_menu">
<!-- Здесь будет ваш основной код .HTML -->
</div>
</header>Меню для сайта CSS
Код .css мы используем для визуального оформления (внешний вид) верхнего меню делая его красивым и дополняющим ваш сайт.
Код:
/* --- Шапка сайта --- */
#header { margin-bottom: 25px; }
#header, #header_menu { height: 58px; }
.header {
width: 100%; height: 0; z-index: 22;
position: fixed;
left: 0; top: 0;
}
.header .midside { height: 0; }
#header_menu {
position: relative; z-index: 15;
padding: 0 25px;
background-color: #00000099;
border-radius: 0 0 2px 2px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
transition: top 0.5s;
}Меню для сайта JS
Код .js мы будем использовать если нам нужно применить какое-либо действие для меню сайта в моём случае я использую функцию скрытия и раскрытия для удобства его использования.
Код:
/* Когда пользователь прокручивает страницу вниз, скрываем меню.
Когда пользователь прокручивает страницу вверх, показываем меню. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header_menu").style.top = "0";
} else {
document.getElementById("header_menu").style.top = "-55px";
}
prevScrollpos = currentScrollPos;
}Если пользователь прокручиваем страницу в низ тогда меню будет скрываться и освобождать (увеличивать) пользователю сайта видимую часть страницы.
Если пользователь начал прокручивать страницу вверх тогда меню обратно покажется.
На мой взгляд такие действия с верхним меню буду более удобные и правильные с точки зрения удобства (Юзабтлити) использования и взаимодействие с пользователем вашего сайта.
С помощью не хитрых действий мы можем создать красивое горизонтальное меню для сайта использовав только .HTML, .CSS и .JS. код.
Вы можете скачать* html шаблон горизонтального меню сайта для более удобного просмотра.
* Шаблон меню берёт код .HTML, .CSS и .JS с моего сайта и может отображаться некорректно так как со временем дизайн и соответственно сам код может измениться.
Источник: KDV.su Климов Дмитрий
