ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выпадающее меню на кнопках в HTML + CSS

Выпадающее меню на кнопках в HTML + CSS

Выпадающее меню на кнопках в HTML + CSS
Пример раскрывающееся навигаций на CSS, которое создана из шрифтовых кнопок, где при наведении клика с одного элемента происходит раскрытие меню. Это новый стиль навигаций, который можно установить в любом мести на сайте, так как всегда не хватает место, то здесь всего нужно для одной небольшой кнопки. Которая по дизайну смотрится ярко, так как у нее выставлен обвод в несколько пикселей, где добавлены тени, что четко подчеркивает кнопку.

Это безусловно оригинальный эффект, который задействован работать при наведении, на чистом CSS. Где по умолчанию раскрытие происходит в низ, чтоб понять основу работы навигаций, то здесь создана demo страница, которая расположена ниже, что переходим и смотрим функционал этого элемента. Так как такой формат можно задействовать не только в навигации, а также в разных функциях, которые работают при клике курсора по самому основанию.

1. Это все действия при проверке материала, где видим при открытии сайта или станицы блога.

Вертикальное выпадающее меню

2. По шрифтовой иконки можно понять, что эта навигационная панель, где остается навести клик.

Выпадающее меню на чистом CSS

Установка:

Для начало нам нужно подключить шрифтовые иконки в HEAD на странице.

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML

Код
<nav>
<div class="kompaktnaya-menyu">
<a class="navigation" href="#"><i class="fas fa-home"></i></a>
<a class="navigation" href="#"><i class="far fa-folder-open"></i></a>
<a class="navigation" href="#"><i class="fas fa-laptop-code"></i></a>
<a class="navigation" href="#"><i class="fas fa-shield-alt"></i></a>
<a class="navigation" href="#"><i class="fas fa-keyboard"></i></a>
<a class="navigation" href="#"><i class="fas fa-user-secret"></i></a>  
</div>
  </nav>

CSS

Код
.kompaktnaya-menyu {
  background: #11429c;
  border: 2px solid #f7eeee;
  width: 50px;
  max-height: 50px;
  border-radius: 50px;
  transition: all 1s;
  box-shadow: inset 0 0 30px #2f2e2e;
  cursor: pointer;
  overflow: hidden;
  transition: max-height 1.5s;
  transition-timing-function: linear;
  box-shadow: 0px 0px 6px 1px rgba(35, 35, 35, 0.54), 0px 0px 10px 10px rgba(31, 31, 31, 0);
}

.kompaktnaya-menyu:hover{
  max-height: 512px;
  border-radius:100px;
  transition:max-height 1.5s;
  transition-timing-function: linear;
}

.navigation {
  display: block;
  text-align: center;
  padding: 12px;
  color: #fbf4f4;
  font-size: 22px;
}

.navigation:hover {
  transition: color 0.2s;
  color: #c4c6ca;
}

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

PS - при создание мне пришлось поставить классы, так, чтоб не было не каких конфликтов на ресурсе. Если нужен изначальный код со стилистикой, то его можно скачать или также он предоставлен на демонстраций, только без оформление по дизайну.

Демонстрация
2020-03-01 Загрузок: 1 Просмотров: 295 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar