Выпадающее меню при наведении

Post 1

Очень часто в целях улучшения функциональности и визуальной привлекательности сайта используют скрытое меню навигации, которое появляется при наведении на определенный элемент. Наличие такой функции свидетельствует о "продвинутом" уровне сайта, поэтому важно уметь осуществить такой функционал. Давайте тогда приступим к работы.

В качестве основы возьмём достаточно стандартное меню сайта:

<ul class="head-nav">
    <li><a href="#">home</a></li>
    <li><a href="#" class="nav-show">shop</a>
        <ul class="nav-hidden">
            <li><a href="#">spring</a></li>
            <li><a href="#">summer</a></li>
            <li><a href="#">autumn</a></li>
            <li><a href="#">winter</a></li>
        </ul>
    </li>
    <li><a href="#">sale</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact us</a></li>
</ul>

В меню shop будет находиться ещё одно подменю, которое будет появляться при наведение на элемент shop.  Далее напишем пару строк стилей для реализации нашего меню:

.head-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head-nav li {
    list-style: none;
    position: relative;
}
.head-nav li a {
    color: #555;
    text-transform: capitalize;
    text-decoration: none;
    font-family: Arial,sans-serif;
    font-size: 1.5em;
}
.nav-hidden {
    display: none;
    padding-left: 0;
    position: absolute;
    top: 40px;
    left: 0;
}
    

Разберемся по порядку:

1. Маркированному списку ul с классом  .head-nav придаём один из способов выравнивания по горизонтали и вертикали.

2. Тегам li присваиваем  position: relativeдля фиксирования подменю к своему родителю.

3. Ссылки а стилизируем по своему желанию.

4. Подменю ul с классом  .nav-hidden определяем  display: none для скрытия,  position: absolute потребуется для фиксации к определенной точке.

Все готово к работе с java-script.  Для упрощения работы с ним будем использовать старый добрый JQuery. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Теперь переходим к самому скрипту:

$('ul.head-nav li').hover(function () {
    $('ul', this).stop().fadeIn();
}, function () {
    $('ul', this).stop().fadeOut();
});

$('ul', this) устанавливает, что при наведении на элемент li функция обработает ul, если найдет в дочерних элементах li.


На этом всё. Всего хорошего!

test test test Вернуться

Категории

+380500000000