Меню №20
- 5,06 КБ
- HTML, CSS
- Меню
- вертикальное, скользящее
- Лицензия MIT
<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>
.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, оживляющего скользящий, интерактивный опыт. Оно разработано с использованием современного фреймворка Material Design Lite (MDL), обеспечивая привлекательный визуально и отзывчивый макет. Меню снабжено иконками и названиями, приглашающими к дальнейшему изучению. При выборе оно изящно скользит, чтобы раскрыть членов каждой семьи, перечисленных в их собственных уникальных панелях. Эти панели являются частью большой сетки, что обеспечивает аккуратную организацию и доступность контента.
Волшебство CSS за этим меню гарантирует, что это не просто список, а гладкий, скользящий портал. Стили диктуют, как каждый элемент ведет себя и выглядит, от цветовых схем, напоминающих дома, до эффектов перехода, которые заставляют меню скользить открытым и закрытым. Это сочетание эстетики и функциональности, с ноткой настройки, позволяющей наслаждаться бесперебойным пользовательским опытом на любом устройстве.
Это меню — не просто навигационный инструмент; это элемент повествования. С каждым кликом вы не просто перемещаетесь по ссылкам; вы входите в истории и наследия этих знаковых семейств, все это время наслаждаясь беспрепятственным и увлекательным онлайн-опытом.