Skip to content

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

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

parent 398ea1d9
Hide 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 @@ ...@@ -5,4 +5,5 @@
.logo { .logo {
display: block; display: block;
white-space: nowrap;
} }
src/blocks/main-nav/main-nav.less
View file @ 2026162a
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
.main-nav { .main-nav {
position: relative;
z-index: 1;
margin-left: (@grid-gutter-width / -2); margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2); margin-right: (@grid-gutter-width / -2);
...@@ -16,18 +18,71 @@ ...@@ -16,18 +18,71 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
}
&__nested-lvl {
@media (min-width: @screen-lg) {
position: absolute;
left: 0;
top: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
}
.main-nav__list {
display: block;
}
&--level-2 { .main-nav__link {
display: none; padding-left: @grid-gutter-width;
min-width: 12em;
@media (min-width: @screen-lg) { @media (min-width: @screen-lg) {
display: none; 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 { &__item {
display: block; display: block;
position: relative;
// Сокрытие и показ по наведению
@media (min-width: @screen-lg) {
& > .main-nav__nested-lvl {
display: none;
}
&:hover {
& > .main-nav__nested-lvl {
display: block;
}
}
}
} }
&__link { &__link {
...@@ -38,6 +93,7 @@ ...@@ -38,6 +93,7 @@
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
color: @gray; color: @gray;
text-decoration: none; text-decoration: none;
cursor: pointer;
&:hover, &:focus { &:hover, &:focus {
color: @text-color; color: @text-color;
......
src/blocks/navbar/navbar.html
View file @ 2026162a
<!--DEV <!--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 @@ ...@@ -4,8 +4,6 @@
.navbar { .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: @gray-lightest; background-color: @gray-lightest;
&__inner { &__inner {
...@@ -48,78 +46,10 @@ ...@@ -48,78 +46,10 @@
} }
&__toggler { &__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) { @media (min-width: @screen-lg) {
display: none; 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 { &__slidable-content {
...@@ -146,12 +76,20 @@ ...@@ -146,12 +76,20 @@
&__nav { &__nav {
margin-bottom: 1rem; margin-bottom: 1rem;
}
&__form { @media (min-width: @screen-lg) {
.fields-group {
margin-bottom: 0; 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 @@ ...@@ -24,8 +24,8 @@
<div class="navbar__inner"> <div class="navbar__inner">
<div class="navbar__left"> <div class="navbar__left">
<a href="/" class="logo navbar__logo">NTH start project</a> <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"> <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="navbar__toggler-icon"></span> <span class="toggler-burger__icon"></span>
</a> </a>
</div> </div>
<div class="navbar__right"> <div class="navbar__right">
...@@ -33,31 +33,52 @@ ...@@ -33,31 +33,52 @@
<nav class="main-nav navbar__nav"> <nav class="main-nav navbar__nav">
<ul class="main-nav__list"> <ul class="main-nav__list">
<li class="main-nav__item"> <li class="main-nav__item">
<a href="" class="main-nav__link"> <a href="" class="main-nav__link" >
<span class="main-nav__link-text">Библиотека</span> <span class="main-nav__link-text">Библиотека</span>
</a> </a>
<ul class="main-nav__list main-nav__list--level-2"> <div class="main-nav__nested-lvl">
<li class="main-nav__item"> <ul class="main-nav__list">
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Типографика</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Типографика</span>
</li> </a>
<li class="main-nav__item"> <div class="main-nav__nested-lvl">
<a href="" class="main-nav__link"> <ul class="main-nav__list">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span> <li class="main-nav__item">
</a> <a href="" class="main-nav__link">
</li> <span class="main-nav__link-text">Текст, теги</span>
<li class="main-nav__item"> </a>
<a href="" class="main-nav__link"> </li>
<span class="main-nav__link-text">Блочные цитаты по правому краю</span> <li class="main-nav__item">
</a> <a href="" class="main-nav__link">
</li> <span class="main-nav__link-text">Заголовки и параграфы</span>
<li class="main-nav__item"> </a>
<a href="" class="main-nav__link"> </li>
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span> <li class="main-nav__item">
</a> <a href="" class="main-nav__link">
</li> <span class="main-nav__link-text">Списки и параграфы</span>
</ul> </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>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
</ul>
</div>
</li> </li>
<li class="main-nav__item"> <li class="main-nav__item">
<a href="" class="main-nav__link"> <a href="" class="main-nav__link">
...@@ -71,15 +92,6 @@ ...@@ -71,15 +92,6 @@
</li> </li>
</ul> </ul>
</nav> </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> </div>
</div> </div>
......
src/less/style.less
View file @ 2026162a
// ВНИМАНИЕ! В этом файле нельзя использовать блочные комментарии (/* ... */), только строчные! (//) // ВНИМАНИЕ! В этом файле нельзя использовать блочные комментарии (/* ... */), только строчные! (//)
// В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно быть по принципу // В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно
// БЭМ-блок = отдельный файл! // быть по принципу БЭМ-блок = отдельный файл!
@import './src/less/variables.less'; @import './src/less/variables.less';
@import './src/less/mixins/mixins.less'; @import './src/less/mixins/mixins.less';
...@@ -68,3 +68,4 @@ ...@@ -68,3 +68,4 @@
@import './src/blocks/loader/loader.less'; @import './src/blocks/loader/loader.less';
@import './src/blocks/code/code.less'; @import './src/blocks/code/code.less';
@import './src/blocks/collapse/collapse.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