Код представляет собой реализацию фиксированного мню на веб-странице с использованием HTML, CSS и jQuery. Фиксированное меню прилипает к верхней части экрана при прокрутке вниз, что обеспечивает удобную навигацию для пользователей.
Вот пошаговая инструкция по применению этого кода:
Содержание статьи [Показать]
1. Вставка HTML-разметки:
Вставьте следующий код в раздел <body> вашей HTML-страницы:
<div id="header">
<div id="navigation">
<ul id="menu">
<li><a href="">Сумки</a></li>
<li><a href="">Обувь</a></li>
<li><a href="">Шарфы</a></li>
<li><a href="">Одежда</a></li>
<li><a href="">Аксессуары</a></li>
</ul>
</div>
</div>2. Добавление стилей с использованием CSS:
В вашем файле стилей (например, в раздел <style> вашего HTML-документа или в отдельном CSS-файле) вставьте следующий код:
#header {
height: 180px;
}
#navigation {
background: #EF0505;
height: 40px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
font-size: 16px;
line-height: 40px;
position: relative;
top: 140px;
}
#navigation.fixed {
position: fixed;
top: 0;
width: 100%;
background: rgba(239, 5, 5, 0.95);
}
#navigation ul {
width: 1180px;
padding-left: 0;
margin: 0 auto;
display: block;
}
#menu li {
float: left;
list-style: none;
padding: 0 25px;
border-right: 1px solid #D60000;
}
#menu a {
color: #fff;
text-decoration: none;
font-family: Verdana;
}
#menu>li a:hover {
color: #656565;
transition: color 0.5s ease;
}
3. Добавление кода jQuery:
Поместите следующий код перед закрывающим тегом </body> вашего HTML-документа:
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
jQuery(function ($) {
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
$('#navigation').addClass('fixed');
} else if ($(this).scrollTop() < 140) {
$('#navigation').removeClass('fixed');
}
});
});
</script>4. Подключение jQuery:
Обратите внимание, что для корректной работы кода необходимо подключить библиотеку jQuery. В данном примере подключается jQuery версии 3.6.4 с использованием CDN. Убедитесь, что ваша страница имеет доступ к интернету для загрузки библиотеки.
Теперь ваша веб-страница должна фиксировать меню при прокрутке вниз после 140 пикселей. Адаптируйте код согласно вашим потребностям и стилям дизайна.
