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

Демо

5,06 КБ
HTML, CSS
Меню
вертикальное, скользящее
Лицензия MIT

Код
Редактор

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" />
<link href="https://use.fontawesome.com/931d0381fb.css" media="all" rel="stylesheet" />
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<div class="vertical-menu mdl-tabs mdl-js-tabs">
    <nav class="menu">
        <div class="mdl-tabs__tab-bar">
            <a href="#" class="vertical-menu-header">
                <span class="mdl-chip__contact mdl-color--blue-grey-50 mdl-color-text--blue-grey-500"><i class="fa fa-users" aria-hidden="true"></i> </span> ЗАГОЛОВОК МЕНЮ <i class="fa fa-angle-right fa-fw" aria-hidden="true"></i>
            </a>
            <div class="vertical-scroll">
                <a href="#starks-panel" class="mdl-tabs__tab is-active"><span class="mdl-chip__contact">С</span> Старки</a>
                <a href="#lannisters-panel" class="mdl-tabs__tab"><span class="mdl-chip__contact">Л</span> Ланнистеры</a>
                <a href="#targaryens-panel" class="mdl-tabs__tab"><span class="mdl-chip__contact">Т</span> Таргариены</a>
            </div>
        </div>
    </nav>
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <div class="mdl-tabs__panel is-active" id="starks-panel">
                <ul>
                    <li>Эдвард</li>
                    <li>Кателин</li>
                    <li>Робб</li>
                    <li>Санса</li>
                    <li>Брендон</li>
                    <li>Арья</li>
                    <li>Рикон</li>
                </ul>
            </div>
            <div class="mdl-tabs__panel" id="lannisters-panel">
                <ul>
                    <li>Тайвин</li>
                    <li>Серсея</li>
                    <li>Джеми</li>
                    <li>Тарион</li>
                </ul>
            </div>
            <div class="mdl-tabs__panel" id="targaryens-panel">
                <ul>
                    <li>Висерис</li>
                    <li>Дайнерис</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.mdl-cell--12-col {
    background: gainsboro;
}
.vertical-menu .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    height: 100%;
    border-bottom: none;
}

.vertical-menu .menu a.vertical-menu-header {
    border-left: 4px solid transparent;
    padding: 10px 24px 10px 10px;
    text-transform: capitalize;
    width: 240px;
    text-align: left;
    color: #455a64;
    text-decoration: none;
    letter-spacing: 2px;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab {
    border-left: 4px solid transparent;
    padding: 0 24px 0 10px;
    text-transform: capitalize;
    width: 240px;
    text-align: left;
    color: #455a64;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab .mdl-chip__contact {
    background-color: #607d8b;
    color: #cfd8dc;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover {
    color: rgba(0, 0, 0, 0.87);
    border-left: 4px solid transparent;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab:hover .mdl-chip__contact {
    color: #fff;
    background-color: #546e7a;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active {
    color: rgba(0, 0, 0, 0.97);
    border-left: 4px solid #ff6e40;
}

.vertical-menu .mdl-tabs__tab-bar .mdl-tabs__tab.is-active .mdl-chip__contact {
    color: #fff;
}

.vertical-menu.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    display: none;
}

.menu:hover,
nav.menu.expanded {
    width: 240px;
    overflow: hidden;
}

nav.menu {
    background: #eceff1;
    border-right: 1px solid #cfd8dc;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 58px;
    overflow: hidden;
    -webkit-transition: width 0.06s linear;
    -webkit-transition: width 0.09s linear;
    -o-transition: width 0.09s linear;
    -moz-transition: width 0.09s linear;
    transition: width 0.09s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    z-index: 1000;
}

nav.menu .mdl-tabs__tab-bar a {
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.no-touch .scrollable.hover {
    overflow-y: hidden;
}

.no-touch .scrollable.hover:hover {
    overflow-y: auto;
    overflow: visible;
}

a:hover,
a:focus {
    text-decoration: none;
}

nav.patient-menu {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.mdl-grid {
    margin-left: 60px;
}

HTML
CSS

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

Путешествие начинается с элегантного вертикального меню, созданного с использованием HTML и CSS, оживляющего скользящий, интерактивный опыт. Оно разработано с использованием современного фреймворка Material Design Lite (MDL), обеспечивая привлекательный визуально и отзывчивый макет. Меню снабжено иконками и названиями, приглашающими к дальнейшему изучению. При выборе оно изящно скользит, чтобы раскрыть членов каждой семьи, перечисленных в их собственных уникальных панелях. Эти панели являются частью большой сетки, что обеспечивает аккуратную организацию и доступность контента.

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

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