Skip to content

K
kpp
Commit 150c09e6 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Улучшил и задокументировал .main-nav

parent dfc3d55a
Show whitespace changes
Inline Side-by-side
Showing with 358 additions and 119 deletions
src/blocks-demo.html
View file @ 150c09e6
......@@ -320,6 +320,111 @@
</section>
<section class="blocks-library__item" id="main-nav-block" data-name=".main-nav">
<h2 class="blocks-library__item-title">Главная навигация</h2>
<p>Демонстрационный контент блока:</p>
<nav id="main-nav" class="main-nav">
<div id="main-nav-toggler" class="main-nav__toggler"><span></span></div>
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a href="" class="main-nav__link">
Страницы
</a>
<div class="main-nav__lvl-2">
<ul class="main-nav__list-lvl-2">
<li class="main-nav__item-lvl-2">
<a href="" class="main-nav__link-lvl-2">
Контакты
</a>
</li>
<li class="main-nav__item-lvl-2">
<a href="" class="main-nav__link-lvl-2">
Услуги
</a>
<div class="main-nav__lvl-3">
<ul class="main-nav__list-lvl-3">
<li class="main-nav__item-lvl-3">
<a href="" class="main-nav__link-lvl-3">
Вёрстка HTML-CSS
</a>
</li>
<li class="main-nav__item-lvl-3">
<a href="" class="main-nav__link-lvl-3">
Стриптиз
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
Репозиторий
</a>
</li>
<li class="main-nav__item">
<a href="http://nicothin.pro/" class="main-nav__link">
Сайт автора
</a>
</li>
</ul>
</nav>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;nav id="main-nav" class="main-nav"></code>
<code> &lt;div id="main-nav-toggler" class="main-nav__toggler">&lt;span>&lt;/span>&lt;/div></code>
<code> &lt;ul class="main-nav__list"></code>
<code> &lt;li class="main-nav__item main-nav__item--active"></code>
<code> &lt;a href="" class="main-nav__link"></code>
<code> Страницы</code>
<code> &lt;/a></code>
<code> &lt;div class="main-nav__lvl-2"></code>
<code> &lt;ul class="main-nav__list-lvl-2"></code>
<code> &lt;li class="main-nav__item-lvl-2"></code>
<code> &lt;a href="" class="main-nav__link-lvl-2"></code>
<code> Контакты</code>
<code> &lt;/a></code>
<code> &lt;/li></code>
<code> &lt;li class="main-nav__item-lvl-2"></code>
<code> &lt;a href="" class="main-nav__link-lvl-2"></code>
<code> Услуги</code>
<code> &lt;/a></code>
<code> &lt;div class="main-nav__lvl-3"></code>
<code> &lt;ul class="main-nav__list-lvl-3"></code>
<code> &lt;li class="main-nav__item-lvl-3"></code>
<code> &lt;a href="" class="main-nav__link-lvl-3"></code>
<code> Вёрстка HTML-CSS</code>
<code> &lt;/a></code>
<code> &lt;/li></code>
<code> ...</code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> &lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> &lt;/li></code>
<code> &lt;li class="main-nav__item"></code>
<code> &lt;a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link"></code>
<code> Репозиторий</code>
<code> &lt;/a></code>
<code> &lt;/li></code>
<code> ...</code>
<code> &lt;/ul></code>
<code>&lt;/nav></code>
</pre>
</div>
</div>
</section>
<p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
......
src/blocks/main-nav/main-nav.js 0 → 100644
View file @ 150c09e6
(function(){
var toggler = document.getElementById('main-nav-toggler');
toggler.addEventListener('click', mainNavVisibleToggle);
function mainNavVisibleToggle(e) {
e.preventDefault();
toggler.classList.toggle('main-nav__toggler--close');
document.getElementById('main-nav').classList.toggle('main-nav--open');
}
}());
src/blocks/main-nav/main-nav.scss
View file @ 150c09e6
......@@ -2,124 +2,245 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
// специфические для этого блока переменные:
$menu-desktop-width: $screen-xl !default;
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
.main-nav {
// position: relative;
// z-index: 1;
// margin-left: (@grid-gutter-width / -2);
// margin-right: (@grid-gutter-width / -2);
// &__list {
// padding: 0;
// margin: 0;
// list-style: none;
// @media (min-width: @screen-lg) {
// display: flex;
// 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;
// border: 1px solid @gray-lighter;
// border-top: 0;
// box-shadow: @shadow;
// .main-nav__item:not(:last-child) {
// border-bottom: 1px solid @gray-lighter;
// }
// }
// .main-nav__list {
// display: block;
// }
// .main-nav__link {
// padding-left: @grid-gutter-width;
// min-width: 15em;
// @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;
// width: auto;
// padding-top: 0;
// border-top: 1px solid @gray-lighter;
// .main-nav__link {
// padding-left: (@grid-gutter-width / 2);
// }
// }
// .main-nav__link {
// padding-left: @grid-gutter-width * 1.5;
// }
// }
// }
// &__item {
// display: block;
// position: relative;
// &--divider {
// &:before {
// content: '';
// position: absolute;
// top: -1px;
// left: 0;
// right: 0;
// border-top: 1px solid @gray-light;
// }
// }
// // Сокрытие и показ по наведению
// @media (min-width: @screen-lg) {
// & > .main-nav__nested-lvl {
// display: none;
// }
// &:hover {
// & > .main-nav__nested-lvl {
// display: block;
// }
// }
// }
// }
// &__link {
// display: block;
// padding-top: 0.9rem;
// padding-bottom: 0.9rem;
// padding-left: (@grid-gutter-width / 2);
// padding-right: (@grid-gutter-width / 2);
// color: @gray;
// text-decoration: none;
// cursor: pointer;
// &:hover,
// &:focus {
// color: @text-color;
// background-color: @gray-lighter;
// text-decoration: none;
// }
// }
position: relative;
z-index: 10;
// первый уровень
&__list {
margin: 0;
padding: 0;
list-style: none;
@media (max-width: ($menu-desktop-width - 1)) {
// открытие/закрытие меню только в случае работающего JS
.js & {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s;
}
.js .main-nav--open & {
max-height: 100vh;
transition: max-height 0.6s;
}
}
@media (min-width: $menu-desktop-width) {
display: flex;
flex-wrap: wrap;
}
}
&__item {
position: relative;
&--active {}
}
&__link {
display: block;
padding: 0.5em;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
}
}
// второй уровень
&__lvl-2 {
@media (min-width: $menu-desktop-width) {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s;
.main-nav__item:hover & {
opacity: 1;
height: auto;
overflow: visible;
}
}
}
&__list-lvl-2 {
margin: 0;
padding: 0;
list-style: none;
}
&__item-lvl-2 {
position: relative;
&--active {}
}
&__link-lvl-2 {
display: block;
padding: 0.5em;
text-decoration: none;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 1.2em;
}
&:hover,
&:focus {
text-decoration: none;
}
}
// третий уровень
&__lvl-3 {
@media (min-width: $menu-desktop-width) {
position: absolute;
z-index: 1;
top: 0;
left: 100%;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s;
.main-nav__item-lvl-2:hover & {
opacity: 1;
height: auto;
overflow: visible;
}
}
}
&__list-lvl-3 {
margin: 0;
padding: 0;
list-style: none;
}
&__item-lvl-3 {
position: relative;
&--active {}
}
&__link-lvl-3 {
display: block;
padding: 0.5em;
text-decoration: none;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 2.4em;
}
&:hover,
&:focus {
text-decoration: none;
}
}
// переключатель
&__toggler {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
cursor: pointer;
.no-js & {
display: none;
}
@media (min-width: $menu-desktop-width) {
display: none;
}
> span {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
position: relative;
transition: background 0.3s 0.3s;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
}
&:before {
top: -10px;
}
&:after {
top: 10px;
}
}
&--close {
> span {
transition: background 0.2s 0s;
background: transparent;
&:before,
&:after {
transition: top 0.3s, transform 0.3s 0.3s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
}
}
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