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

Демо

2,50 КБ
HTML, CSS, JS
Меню
вертикальное, выпадающее, скользящее
Лицензия MIT

Код
Редактор

HTML

<nav class="vert-nav" role="navigation">
    <ul class="topmenu">
        <li><a href="#0">Главная</a></li>
        <li>
            <a href="#0">О нас</a>
            <ul class="submenu">
                <li><a href="#0">История</a></li>
                <li><a href="#0">Команда</a></li>
                <li><a href="#0">Ценности</a></li>
            </ul>
        </li>
        <li>
            <a href="#0">Проекты</a>
            <ul class="submenu">
                <li><a href="#0">Сайты</a></li>
                <li><a href="#0">Аутсорс</a></li>
                <li><a href="#0">Плагины</a></li>
            </ul>
        </li>
        <li><a href="#0">Связь</a></li>
    </ul>
</nav>

CSS

.vert-nav a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.vert-nav a {
    color: #3d9970;
    text-decoration: none;
    margin-bottom: 1em;
}
.vert-nav a:hover {
    color: #ff851b;
}
.vert-nav {
    width: 33%;
}

.vert-nav ul {
    list-style: none;
    padding: 0;
}
.vert-nav .topmenu li.openmenu > a {
    background: #50a37e;
}
.vert-nav .topmenu li.openmenu .sf {
    -webkit-transform: rotate(180deg);
}
.vert-nav .topmenu li {
    position: relative;
}
.vert-nav .topmenu li .sf {
    position: absolute;
    z-index: 9;
    top: 1em;
    right: 1em;
    color: #378a65;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-backface-visibility: hidden;
}
.vert-nav .topmenu li:last-child a {
    border-bottom: 0.2em solid #398e68;
}
.vert-nav .topmenu li a {
    margin: 0;
    padding: 1em;
    display: block;
    width: 100%;
    background: #3d9970;
    color: #fff;
    border-bottom: 0.1em solid #398e68;
}
.vert-nav .topmenu li a:hover {
    background: #50a37e;
}
.vert-nav .submenu {
    display: none;
}
.vert-nav .submenu li:last-child a {
    border-width: 0.1em;
}
.vert-nav .submenu li a {
    padding-left: 2.6em;
    background: #3b946d;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.vert-nav .submenu li a:hover {
    background: #3c976f;
}

$(".vert-nav .topmenu a").click(function () {
    var $menu = $(this).next(".submenu");
    $menu.slideToggle("slow");
    $menu.parent().toggleClass("openmenu");
});

HTML
CSS
JS

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

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

Структура тоже довольно умна. Она использует сочетание элементов <nav> и <ul> для создания иерархии — основных пунктов меню и их выпадающих (подменю) элементов, все аккуратно организованные в вертикальном порядке. Эффект скользящего меню, при котором подменю появляется с плавной анимацией, не просто для красоты; это помогает пользователям навигировать по опциям, не перегружая их слишком большим количеством информации сразу. Это сочетание эстетики и функциональности, обеспечивающее дружелюбность и стильность сайта.