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

Демо

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

Код
Редактор

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
<nav id="vertical-menu">
    <ul class="main-menu">
        <li class="active">
            <a href="#"><i class="fa fa-envelope"></i>Ссылка 1</a>
        </li>
        <li class="contain-submenu">
            <a href="#"><i class="fa fa-desktop"></i>Ссылка 2 </a>
            <ul class="submenu-1">
                <li><a href="#">Подменю ссылка 1</a></li>
                <li class="contain-submenu">
                    <a href="#">Подменю ссылка 2</a>
                    <ul class="submenu-2">
                        <li><a href="#">Подменю ссылка 2.1</a></li>
                        <li><a href="#">Подменю ссылка 2.2</a></li>
                        <li><a href="#">Подменю ссылка 2.3</a></li>
                        <li><a href="#">Подменю ссылка 2.4</a></li>
                        <li><a href="#">Подменю ссылка 2.5</a></li>
                    </ul>
                </li>
                <li><a href="#">Подменю ссылка 3</a></li>
                <li><a href="#">Подменю ссылка 4</a></li>
                <li><a href="#">Подменю ссылка 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-cog"></i>Ссылка 3</a>
        </li>
        <li class="contain-submenu">
            <a href="#"><i class="fa fa-book"></i>Ссылка 4</a>
            <ul class="submenu-1">
                <li><a href="#">Подменю ссылка 1</a></li>
                <li><a href="#">Подменю ссылка 2</a></li>
                <li class="contain-submenu">
                    <a href="#">Подменю ссылка 3</a>
                    <ul class="submenu-2">
                        <li><a href="#">Подменю ссылка 3.1</a></li>
                        <li class="contain-submenu">
                            <a href="#">Подменю ссылка 3.2</a>
                            <ul class="submenu-3">
                                <li><a href="#">Подменю ссылка 3.2.1</a></li>
                                <li><a href="#">Подменю ссылка 3.2.2</a></li>
                                <li><a href="#">Подменю ссылка 3.2.3</a></li>
                                <li><a href="#">Подменю ссылка 3.2.4</a></li>
                                <li><a href="#">Подменю ссылка 3.2.5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Подменю ссылка 3.3</a></li>
                        <li><a href="#">Подменю ссылка 3.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Подменю ссылка 4</a></li>
                <li><a href="#">Подменю ссылка 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-graduation-cap"></i>Ссылка 5</a>
        </li>
        <li>
            <a href="#"><i class="fa fa-search"></i>Ссылка 6</a>
        </li>
    </ul>
</nav>

CSS

ul,
li,
nav,
a {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    font-family: helvetica;
}
#vertical-menu {
    margin-top: 20px;
    display: inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    background: #f62459;
    margin-left: 20px;
}
.main-menu {
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.main-menu li {
    position: relative;
    height: 50px;
    -webkit-box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
    -moz-box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
    box-shadow: 0 -1px 0 0 #444, 0 -2px 0 0 #222;
}
.main-menu > li > a > i {
    color: #db0a5b;
    width: 2em;
    height: 100%;
    line-height: 50px;
    text-align: left;
}
.main-menu > li:first-child,
.submenu-1 > li:first-child,
.submenu-2 > li:first-child,
.submenu-3 > li:first-child {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.main-menu > li:first-child > a,
.submenu-1 > li:first-child > a,
.submenu-2 > li:first-child > a,
.submenu-3 > li:first-child > a {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
.main-menu > li:last-child > a,
.submenu-1 > li:last-child > a,
.submenu-2 > li:last-child > a,
.submenu-3 > li:last-child > a {
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

.main-menu > li > a,
.submenu-1 > li > a,
.submenu-2 > li > a,
.submenu-3 > li > a {
    color: #d2527f;
    background: #2a2a2a;
    line-height: 50px;
    display: block;
    padding: 0 1em;
}

.submenu-1,
.submenu-2,
.submenu-3 {
    position: absolute;
    white-space: nowrap;
    top: -9999px;
}
.contain-submenu > a:first-child::after {
    content: " \f054";
    padding-left: 1em;
    font-family: "FontAwesome";
}
/* revealing submenus */
.main-menu > li:hover .submenu-1,
.submenu-1 > li:hover .submenu-2,
.submenu-2 > li:hover .submenu-3 {
    top: 0;
    left: 100%;
    -webkit-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    -o-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    -moz-transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
    transition: top 0.5s cubic-bezier(0.38, 0.82, 0.79, 0.93);
}

.main-menu > li:hover > a {
    color: #22af70;
}
.submenu-1 li:hover > a {
    color: #22a7f0;
}
.submenu-2 li:hover > a {
    color: #f6db7f;
}
.submenu-3 li:hover > a {
    color: #f2784b;
}

HTML
CSS

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

В сердце нашего навигационного меню начинается с HTML, кирпичей и раствора нашего цифрового магазина. У нас есть список внутри списка, структурированный как семейное древо, где каждая ветвь ведет к разным разделам сайта. Представьте каждый элемент списка как указатель, направляющий нас к разным аттракционам: электронная почта, настольные компьютеры, настройки, книги и др., каждый представлен иконическими символами благодаря FontAwesome — набору инструментов, предоставляющему нам четкие, масштабируемые иконки.

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

И тогда, волшебство — CSS переходы. Это не просто статичные указатели; они интерактивны, раскрывая скрытые пути (подменю) при приближении. Эффект перехода делает это открытие плавным, как отодвигание занавеса, чтобы показать ранее скрытую аллею, усиливая радость от исследования.

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