CSS Меню №15 - пример кода

Демо

3,42 КБ
HTML, CSS
Меню
вертикальное
Лицензия MIT

Код
Редактор

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" />
<nav class="vert-nav">
    <ul>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon">
                    <i class="icon-mobile-phone icon-2x"></i>
                </div>
                <a href="#"><span>О нас</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon">
                    <i class="icon-lightbulb icon-2x"></i>
                </div>
                <a href="#"><span>Идеи</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon">
                    <i class="icon-wrench icon-2x"></i>
                </div>
                <a href="#"><span>Сервис</span></a>
            </div>
        </li>
        <li class="var_nav">
            <div class="link_bg"></div>
            <div class="link_title">
                <div class="icon">
                    <i class="icon-briefcase icon-2x"></i>
                </div>
                <a href="#"><span>Маркетинг</span></a>
            </div>
        </li>
    </ul>
</nav>

CSS

.vert-nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.vert-nav .var_nav {
    position: relative;
    background: #ccc;
    width: 300px;
    height: 70px;
    margin-bottom: 5px;
}
.vert-nav .link_bg {
    width: 70px;
    height: 70px;
    position: absolute;
    background: #e01b6a;
    color: #fff;
    z-index: 2;
}
.vert-nav .link_bg i {
    position: relative;
}
.vert-nav .link_title {
    position: absolute;
    width: 100%;
    z-index: 3;
    color: #fff;
}
.vert-nav .link_title:hover .icon {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.vert-nav .var_nav:hover .link_bg {
    width: 100%;
    background: #e01b6a;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.vert-nav .var_nav:hover a {
    font-weight: bold;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.vert-nav .icon {
    position: relative;
    width: 70px;
    height: 70px;
    text-align: center;
    color: #fff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    float: left;
    transition: all 0.5s ease-in-out;
    float: left;
}
.vert-nav .icon i {
    top: 22px;
    position: relative;
}
.vert-nav a {
    display: block;
    position: absolute;
    float: left;
    font-family: arial;
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: 70px;
    text-align: center;
}
.vert-nav span {
    margin-top: 25px;
    display: block;
}

HTML
CSS

Сегодня мы погружаемся в код, который полностью посвящен созданию стильного и интерактивного вертикального меню с использованием HTML и CSS, настоящей жемчужины для тех, кто хочет добавить изюминку на свой веб-сайт. Сначала HTML задает структуру нашего меню, используя элемент <nav> для обертывания неупорядоченного списка <ul>, где каждый элемент списка <li> представляет отдельный пункт меню. Каждый пункт имеет свой значок и текст, делая его визуально привлекательным и удобным для пользователя.

Теперь давайте поговорим о стиле с CSS, настоящей магии за кулисами. CSS нацеливается на вертикальное меню с классами вроде .vert-nav для применения крутого стиля. Это гарантирует, что наше меню выглядит хорошо и удобно в взаимодействии. Например, для каждого пункта меню устанавливается фиксированная ширина, но добавляется интересный поворот: при наведении курсора на элемент его цвет фона изменяется и расширяется, заполняя всю ширину, благодаря плавным эффектам перехода. Это не только привлекает внимание, но и дает визуальный сигнал пользователю о его текущем выборе.

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