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

Вертикальное темное меню на HTML + CSS

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

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

Все проверено, где по умолчанию такой формат идет под установочный процесс.

Установка:

Подключить шрифтовые знаки

Код

HTML

Код

<div class="aposnuka-udecisen">
  <div class="acase-recod">
  <div class="alogumen">
  <h3>Меню <i class="fas fa-angle-down amekolas"></i></h3>
  </div>
  <div class="body">
  <ul>
  <li><i class="fas fa-home kaned"></i> Главная</li>
  <li><i class="fas fa-download kaned"></i> Скрипты</li>
  <li><i class="fas fa fa-camera-retro kaned"></i> Шаблоны</li>
  <li><i class="fas fa-tags kaned"></i> Дизайн</li>
  <li><i class="fab fas fa-home kaned"></i> Категория
  <ul>
  <li><i class="fas fa-user-secret kaned"></i> Каталог файлов</li>
  <li><i class="fas fa-window-restore kaned"></i> Раздел сайта</li>
  </ul>
  </li>
  <li><i class="fas fa-graduation-cap kaned"></i> Контакты</li>
  </ul>
  </div>
  </div>
</div>

CSS

Код

.aposnuka-udecisen{
  padding: 50px;
}

.acase-recod {
  width: 294px;
  height: 420px;
  background-color: #1e272b;
  border-radius: 8px 8px;
}

.alogumen {
  border-radius: 8px 8px 0px 0px;
  padding: 6px;
  background-color: #2d414c;
}

h3 {
  color: #f9f1f1;
  font-family: 'Roboto', sans-serif;
  margin-left: 15px;
}

.amekolas{
  font-size: 18px;
  margin-left: 170px;
  color: #2f89fc;
}

.kaned{
  margin-right: 8px;
}

.body li {
  transition: 1s all;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  padding: 14px;
  margin-left: -40px;
  margin-top: 0px;
  color: #f9f7f7;
  list-style: none;
  display: block;
  border-top-right-radius: 8px 8px;
  border-bottom-right-radius: 8px 8px;
}

li:hover {
  transition: 1s all;
  color: #7aaff3;
  background-color: rgb(35 64 82 / 82%);
  border-top-right-radius: 8px 8px;
  border-bottom-right-radius: 8px 8px;
  cursor: pointer;
}

.body > li{
  float: left;
}

.body li ul{
  background: #1E2B32;
  margin-left: 280px;
  margin-top: -38px;
  display: none;
  position: absolute;
  border-top-right-radius: 15px 15px;
  border-bottom-right-radius: 15px 15px;
}

.body li:hover > ul{
  display: block;
  cursor: pointer;
}

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

Демонстрация

14 Августа 2020 Загрузок: 5 Просмотров: 1632 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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