Вертикальное темное меню на HTML + CSS
Простое и удобное вертикальное меню на чистом CSS, которое выполнено в темном оттенке с красивыми кнопками, что подойдет на тематические сайты. Иногда нам нужно поставить вертикальную навигацию, так, чтоб по своему стили отлично вписывалась в основной дизайн. И это меню станет отличным вариантом, ведь вы можете изменить оттенок цвета, где даже сделать его более ярким, а это добавить градиента. Но главное, что такой формат будет смотреться стильно на любом тематическом сайте.
Но и шрифтовые кнопки, что изначально идут по левую сторону, а уже после них наблюдаем ключевые слова. И здесь веб-разработчик может самостоятельно подобрать тот набор иконок, что соответствует направлению каждой категорий. Если рассматривать эффекты, то здесь они по минимум, а точнее присутствует несколько Это когда вы наводите курсор, то появляется темный оттенок и все знаки становятся в другом оттенке цвета. Где на темном формате можно выстроить просто ошеломительное оформление.
Все проверено, где по умолчанию такой формат идет под установочный процесс.
Установка:
Подключить шрифтовые знаки
Код
Код <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.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;
}
Все переходящее ссылки расположенные рядом с кнопками, что также по основному каркасу были убраны углы, и закругленные на несколько пикселей. Это очень распространенный метод, и здесь больше зависит от того места установки, где вы решите выставить навигацию. Если такой вид не подходит, то все можно исправить в прикрепленном стиле, включая красивое оформление.
Демонстрация
| 
