Skip to content

K
kpp
Commit 2026162a authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Навигация: вложения. Гамбергер в компонент

parent 398ea1d9
Show whitespace changes
Inline Side-by-side
Showing with 277 additions and 116 deletions
src/blocks/logo/logo.less
View file @ 2026162a
......@@ -5,4 +5,5 @@
.logo {
display: block;
white-space: nowrap;
}
src/blocks/main-nav/main-nav.less
View file @ 2026162a
......@@ -4,6 +4,8 @@
.main-nav {
position: relative;
z-index: 1;
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
......@@ -16,18 +18,71 @@
display: flex;
flex-wrap: wrap;
}
}
&--level-2 {
display: none;
&__nested-lvl {
@media (min-width: @screen-lg) {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
}
.main-nav__list {
display: block;
}
.main-nav__link {
padding-left: @grid-gutter-width;
min-width: 12em;
@media (min-width: @screen-lg) {
padding-left: (@grid-gutter-width / 2);
}
}
// Вложение внутри вложения
& & {
@media (min-width: @screen-lg) {
position: absolute;
top: 0;
left: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
.main-nav__link {
padding-left: (@grid-gutter-width / 2);
}
}
.main-nav__link {
padding-left: @grid-gutter-width * 1.5;
}
}
}
&__item {
display: block;
position: relative;
// Сокрытие и показ по наведению
@media (min-width: @screen-lg) {
& > .main-nav__nested-lvl {
display: none;
}
&:hover {
& > .main-nav__nested-lvl {
display: block;
}
}
}
}
&__link {
......@@ -38,6 +93,7 @@
padding-right: (@grid-gutter-width / 2);
color: @gray;
text-decoration: none;
cursor: pointer;
&:hover, &:focus {
color: @text-color;
......
src/blocks/navbar/navbar.html
View file @ 2026162a
<!--DEV
Нужно убрать пробел между @-ами:
<div class="navbar">
<div class="navbar__inner">
@ @include('blocks/navbar/navbar.html')
<div class="navbar__left">
<a href="/" class="logo navbar__logo">NTH start project</a>
<a class="toggler-burger navbar__toggler" href="#main-nav-wrapper" data-toggle="collapse" data-toggle-this-class="toggler-burger--open" aria-controls="main-nav-wrapper" aria-expanded="false">
<span class="toggler-burger__icon"></span>
</a>
</div>
<div class="navbar__right">
<div class="navbar__slidable-content" id="main-nav-wrapper">
<nav class="main-nav navbar__nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link" >
<span class="main-nav__link-text">Библиотека</span>
</a>
<div class="main-nav__lvl-2-wrapper">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Контакты</span>
</a>
</li>
</ul>
</nav>
<div class="navbar__text">
<p>Внимание! Работа этого компонента зависит от наличия в сборке jQuery</p>
</div>
<form class="navbar__form">
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="search" placeholder="input[type=search]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Найти</button>
</div>
</form>
</div>
</div>
</div>
</div>
-->
<div class="navbar">content</div>
src/blocks/navbar/navbar.less
View file @ 2026162a
......@@ -4,8 +4,6 @@
.navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: @gray-lightest;
&__inner {
......@@ -48,78 +46,10 @@
}
&__toggler {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 4rem;
height: 4rem;
padding: 0.5rem;
user-select: none;
cursor: pointer;
color: @text-color;
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius;
@media (min-width: @screen-lg) {
display: none;
}
&--open {
.navbar__toggler-icon {
transition: background 0.2s 0;
background: transparent;
&:before,
&:after {
transition: top 0.2s, transform 0.2s 0.2s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
}
&__toggler-icon {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: relative;
transition: background 0.2s 0.2s;
&:before,
&:after {
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: absolute;
left: 0;
content: '';
transform-origin: 50% 50%;
transition: top 0.2s 0.2s, transform 0.2s;
}
&:before {
top: 1rem;
}
&:after {
top: -1rem;
}
}
&__slidable-content {
......@@ -146,12 +76,20 @@
&__nav {
margin-bottom: 1rem;
}
&__form {
.fields-group {
@media (min-width: @screen-lg) {
margin-bottom: 0;
}
}
// Для текстового блока, если он тут есть
// &__text {}
// Для формы, если она тут есть
// &__form {
// .fields-group {
// margin-bottom: 0;
// }
// }
}
src/blocks/toggler-burger/toggler-burger.html 0 → 100644
View file @ 2026162a
<!--DEV
<a class="toggler-burger" href="#">
<span class="toggler-burger__icon"></span>
</a>
<a class="toggler-burger toggler-burger--open" href="#">
<span class="toggler-burger__icon"></span>
</a>
-->
\ No newline at end of file
src/blocks/toggler-burger/toggler-burger.less 0 → 100644
View file @ 2026162a
// Для импорта в диспетчер подключений: @import './src/blocks/toggler-burger/toggler-burger.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.toggler-burger {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 4rem;
height: 4rem;
padding: 0.5rem;
user-select: none;
cursor: pointer;
color: @text-color;
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius;
&--open {
.toggler-burger__icon {
transition: background 0.2s 0;
background: transparent;
&:before,
&:after {
transition: top 0.2s, transform 0.2s 0.2s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
&__icon {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 0.3rem;
background: @text-color;
border-radius: 0.2rem;
position: relative;
transition: background 0.2s 0.2s;
&:before,
&:after {
width: 100%;
height: 0.3rem;
background: @text-color;
border-radius: 0.2rem;
position: absolute;
left: 0;
content: '';
transform-origin: 50% 50%;
transition: top 0.2s 0.2s, transform 0.2s;
}
&:before {
top: 1rem;
}
&:after {
top: -1rem;
}
}
}
src/blocks_library.html
View file @ 2026162a
......@@ -24,8 +24,8 @@
<div class="navbar__inner">
<div class="navbar__left">
<a href="/" class="logo navbar__logo">NTH start project</a>
<a class="navbar__toggler" href="#main-nav-wrapper" data-toggle="collapse" data-toggle-this-class="navbar__toggler--open" aria-controls="main-nav-wrapper" aria-expanded="false">
<span class="navbar__toggler-icon"></span>
<a class="toggler-burger navbar__toggler" href="#main-nav-wrapper" data-toggle="collapse" data-toggle-this-class="toggler-burger--open" aria-controls="main-nav-wrapper" aria-expanded="false">
<span class="toggler-burger__icon"></span>
</a>
</div>
<div class="navbar__right">
......@@ -33,14 +33,34 @@
<nav class="main-nav navbar__nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<a href="" class="main-nav__link" >
<span class="main-nav__link-text">Библиотека</span>
</a>
<ul class="main-nav__list main-nav__list--level-2">
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Текст, теги</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Заголовки и параграфы</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Списки и параграфы</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
......@@ -58,6 +78,7 @@
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
......@@ -71,15 +92,6 @@
</li>
</ul>
</nav>
<p>Внимание! Работа этого компонента зависит от наличия в сборке jQuery</p>
<form class="navbar__form">
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="search" placeholder="input[type=search]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Найти</button>
</div>
</form>
</div>
</div>
</div>
......
src/less/style.less
View file @ 2026162a
// ВНИМАНИЕ! В этом файле нельзя использовать блочные комментарии (/* ... */), только строчные! (//)
// В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно быть по принципу
// БЭМ-блок = отдельный файл!
// В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно
// быть по принципу БЭМ-блок = отдельный файл!
@import './src/less/variables.less';
@import './src/less/mixins/mixins.less';
......@@ -68,3 +68,4 @@
@import './src/blocks/loader/loader.less';
@import './src/blocks/code/code.less';
@import './src/blocks/collapse/collapse.less';
@import './src/blocks/toggler-burger/toggler-burger.less';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment