Наведение меню с помощью CSS — пошаговое руководство


Содержание
  1. HTML
  2. CSS
  3. Видеоурок:

HTML

В HTML у нас есть элемент div с классом «menu_item», который представляет собой один пункт меню.

Внутри «menu_item» первым элементом является элемент span с заголовком. Сейчас я размещу только один пункт меню: «Магазин», позже я добавлю другие.

Под заголовком у нас есть элемент div с классом «submenu». Здесь размещаются подменю, которые не будут видны до наведения курсора.

Внутри «submenu» мы разместим все наши подменю как элементы span.

Это должно выглядеть примерно так:

<div class="menu_item">
    <span>Shop</span> <!--  title  -->

    <div class="submenu"> <!--  submenus  -->
        <span>Shirts</span>
        <span>Shoes</span>
        <span>Bags</span>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

CSS

Класс «menu_item» будет использоваться только для выравнивания.

.menu_item {
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Все элементы span внутри элемента с классом «menu_item» будут иметь 1px прозрачную границу, потому что мы будем окрашивать ее позже при наведении, и мы не хотим, чтобы наша высота менялась.

Мы просто добавим переход, указатель, отступы (5px сверху и снизу, 0 слева и справа) и выровняем текст по центру.

.menu_item span {
    border: 1px solid transparent;
    transition: .3s;
    padding: 5px 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
Вход в полноэкранный режим Выход из полноэкранного режима

При наведении, используя селектор ‘>’, мы выберем прямой дочерний элемент, который является заголовком, и выделим цветом верхнюю и нижнюю границы, как уже упоминалось ранее.

Конечно, мы добавим свойство transition, чтобы граница плавно меняла свой цвет.

.menu_item:hover > span {
    border-color: #000 transparent;
    transition: .3s;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Мы уменьшим шрифт всех пунктов подменю и выровняем их по столбцам.

Установим ширину в 0, а затем вернем ее к 80px при наведении, так что у нас будет красивый эффект появления.

Также скроем все, что переполняется.

И, конечно же, переход, чтобы эффект появления, упомянутый ранее, был плавным.

.submenu {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    width: 0px;
    overflow: hidden;
    transition: .3s;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь просто при наведении установите ширину обратно на 80px и добавьте переход.

.menu_item:hover .submenu {
    width: 80px;
    transition: .3s;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь установим свойство курсора на указатель для пунктов подменю.

.submenu:hover {
    cursor: pointer;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Добавим верхнюю и нижнюю отступы для каждого подменю и выровняем текст по центру.

.submenu span {
    padding: 5px 0;
    text-align: center;
}
Вход в полноэкранный режим Выход из полноэкранного режима

При наведении просто измените цвет фона. Я установлю прозрачный черный.

.submenu span:hover {
    background-color: rgba(0, 0, 0, .1);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все.

Теперь мы можем добавить больше элементов в наше меню.

Для пунктов меню, имеющих подменю, просто скопируйте и вставьте тот же html-код.

Для пунктов меню, не имеющих подменю, просто добавьте новый элемент menu_item с заголовком и без элемента подменю.

<!--  New menu item without submenus  -->
<div class="menu_item">
  <span>Home</span> <!--  title  -->
</div>

<div class="menu_item">
  <span>Shop</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Shirts</span>
    <span>Shoes</span>
    <span>Bags</span>
  </div>
</div>

<!--  New menu item with submenus  -->
<div class="menu_item">
  <span>Settings</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Account</span>
    <span>Password</span>
    <span>Security</span>
  </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Видеоурок:

Весь код с видеоуроком вы можете найти здесь.

Спасибо, что прочитали ❤️

Оцените статью
devanswers.ru
Добавить комментарий