Skip to content

K
kpp
Commit 635b816f authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Прокачал main-menu для работы с клавиатуры

parent 0dd10e46
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 147 deletions
src/blocks-demo.html
View file @ 635b816f
...@@ -347,7 +347,7 @@ ...@@ -347,7 +347,7 @@
<h2 class="blocks-library__item-title">Главная навигация</h2> <h2 class="blocks-library__item-title">Главная навигация</h2>
<p>Демонстрационный контент блока:</p> <p>По получению ссылками фокуса на их родителей с <code>.main-nav__item</code> добавляется модификатор <code>.main-nav__item--show-child</code>, что позволяет работать со вложенными меню с клавиатуры (сейчас предусмотрено только 3 уровня).</p>
<nav id="main-nav" class="main-nav"> <nav id="main-nav" class="main-nav">
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div> <div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
...@@ -356,26 +356,26 @@ ...@@ -356,26 +356,26 @@
<a href="" class="main-nav__link"> <a href="" class="main-nav__link">
Страницы Страницы
</a> </a>
<div class="main-nav__lvl-2"> <div class="main-nav__lvl main-nav__lvl--2">
<ul class="main-nav__list-lvl-2"> <ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item-lvl-2"> <li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link-lvl-2"> <a href="" class="main-nav__link main-nav__link--lvl-2">
Контакты Контакты
</a> </a>
</li> </li>
<li class="main-nav__item-lvl-2"> <li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link-lvl-2"> <a href="" class="main-nav__link main-nav__link--lvl-2">
Услуги Услуги
</a> </a>
<div class="main-nav__lvl-3"> <div class="main-nav__lvl main-nav__lvl--3">
<ul class="main-nav__list-lvl-3"> <ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item-lvl-3"> <li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link-lvl-3"> <a href="" class="main-nav__link main-nav__link--lvl-3">
Вёрстка HTML-CSS Вёрстка HTML-CSS
</a> </a>
</li> </li>
<li class="main-nav__item-lvl-3"> <li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link-lvl-3"> <a href="" class="main-nav__link main-nav__link--lvl-3">
Стриптиз Стриптиз
</a> </a>
</li> </li>
...@@ -402,44 +402,29 @@ ...@@ -402,44 +402,29 @@
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <pre class="code">
<code>&lt;nav id="main-nav" class="main-nav"></code> <code>&lt;nav class="main-nav"></code>
<code> &lt;div id="main-nav-toggler" class="main-nav__toggler burger">&lt;span>&lt;/span>&lt;/div></code> <code> &lt;div id="main-nav-toggler" class="main-nav__toggler burger">&lt;span>&lt;/span>&lt;/div></code>
<code> &lt;ul class="main-nav__list"></code> <code> &lt;ul class="main-nav__list"></code>
<code> &lt;li class="main-nav__item main-nav__item--active"></code> <code> &lt;li class="main-nav__item main-nav__item--active"></code>
<code> &lt;a href="" class="main-nav__link"></code> <code> &lt;a href="" class="main-nav__link">Страницы&lt;/a></code>
<code> Страницы</code> <code> &lt;div class="main-nav__lvl main-nav__lvl--2"></code>
<code> &lt;/a></code> <code> &lt;ul class="main-nav__list main-nav__list--lvl-2"></code>
<code> &lt;div class="main-nav__lvl-2"></code> <code> &lt;li class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;ul class="main-nav__list-lvl-2"></code> <code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Контакты&lt;/a></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></code>
<code> &lt;li class="main-nav__item-lvl-2"></code> <code> &lt;li class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;a href="" class="main-nav__link-lvl-2"></code> <code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Услуги&lt;/a></code>
<code> Услуги</code> <code> &lt;div class="main-nav__lvl main-nav__lvl--3"></code>
<code> &lt;/a></code> <code> &lt;ul class="main-nav__list main-nav__list--lvl-3"></code>
<code> &lt;div class="main-nav__lvl-3"></code> <code> &lt;li class="main-nav__item main-nav__item--lvl-3"></code>
<code> &lt;ul class="main-nav__list-lvl-3"></code> <code> &lt;a href="" class="main-nav__link main-nav__link--lvl-3">Вёрстка HTML-CSS&lt;/a></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> &lt;/li></code>
<code> ...</code>
<code> &lt;/ul></code> <code> &lt;/ul></code>
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;/li></code> <code> &lt;/li></code>
<code> &lt;/ul></code> <code> &lt;/ul></code>
<code> &lt;/div></code> <code> &lt;/div></code>
<code> &lt;/li></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;/ul></code>
<code>&lt;/nav></code> <code>&lt;/nav></code>
</pre> </pre>
......
src/blocks/main-nav/main-nav.html
View file @ 635b816f
<nav class="main-nav"> <nav id="main-nav" class="main-nav">
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
<ul class="main-nav__list"> <ul class="main-nav__list">
<li class="main-nav__item"> <li class="main-nav__item main-nav__item--active">
<a class="main-nav__link"> <a href="" class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span> Страницы
</a> </a>
<div class="main-nav__nested-lvl-1"> <div class="main-nav__lvl main-nav__lvl--2">
<ul class="main-nav__list"> <ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item"> <li class="main-nav__item main-nav__item--lvl-2">
<a href="#typo" class="main-nav__link"> <a href="" class="main-nav__link main-nav__link--lvl-2">
<span class="main-nav__link-text">Типографика</span> Контакты
</a>
</li>
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
Услуги
</a> </a>
<div class="main-nav__nested-lvl-2"> <div class="main-nav__lvl main-nav__lvl--3">
<ul class="main-nav__list"> <ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item"> <li class="main-nav__item main-nav__item--lvl-3">
<a href="#typo-p" class="main-nav__link"> <a href="" class="main-nav__link main-nav__link--lvl-3">
<span class="main-nav__link-text">Параграфы и заголовки</span> Вёрстка HTML-CSS
</a> </a>
</li> </li>
<li class="main-nav__item"> <li class="main-nav__item main-nav__item--lvl-3">
<a href="#typo-lists" class="main-nav__link"> <a href="" class="main-nav__link main-nav__link--lvl-3">
<span class="main-nav__link-text">Списки</span> Стриптиз
</a> </a>
</li> </li>
</ul> </ul>
...@@ -30,12 +36,12 @@ ...@@ -30,12 +36,12 @@
</li> </li>
<li class="main-nav__item"> <li class="main-nav__item">
<a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link"> <a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span> Репозиторий
</a> </a>
</li> </li>
<li class="main-nav__item"> <li class="main-nav__item">
<a href="http://nicothin.pro/" class="main-nav__link"> <a href="http://nicothin.pro/" class="main-nav__link">
<span class="main-nav__link-text">Сайт автора</span> Сайт автора
</a> </a>
</li> </li>
</ul> </ul>
......
src/blocks/main-nav/main-nav.js
View file @ 635b816f
(function(){ (function(){
// Добавление/удаление модификаторов при клике на переключение видимости
var toggler = document.getElementById('main-nav-toggler'); var toggler = document.getElementById('main-nav-toggler');
if(toggler){ if(toggler){
toggler.addEventListener('click', mainNavVisibleToggle); toggler.addEventListener('click', mainNavVisibleToggle);
...@@ -12,4 +12,64 @@ ...@@ -12,4 +12,64 @@
} }
} }
// Добавление/удаление модификаторов при фокусировке на ссылочном элементе
var linkClassName = 'main-nav__link';
var linkClassNameShowChild = 'main-nav__item--show-child';
var findLinkClassName = new RegExp(linkClassName);
// Слежение за всплывшим событием focus
document.addEventListener('focus', function(event) {
// Если событие всплыло от одной из ссылок гл. меню
if (findLinkClassName.test(event.target.className)) {
// Добавим классы, показывающие списки вложенных уровней, на всех родителей
event.target.parents('.main-nav__item').forEach(function(item){
item.classList.add(linkClassNameShowChild);
});
}
}, true);
// Слежение за всплывшим событием blur
document.addEventListener('blur', function(event) {
// Если событие всплыло от одной из ссылок гл. меню
if (findLinkClassName.test(event.target.className)) {
// Уберем все классы, показывающие списки 2+ уровней
// event.target.closest('.main-nav').querySelectorAll('.'+linkClassNameShowChild).forEach(function(item){
document.querySelectorAll('.'+linkClassNameShowChild).forEach(function(item){
item.classList.remove(linkClassNameShowChild);
});
}
}, true);
// Добавление метода .parents()
Element.prototype.parents = function(selector) {
var elements = [];
var elem = this;
var ishaveselector = selector !== undefined;
while ((elem = elem.parentElement) !== null) {
if (elem.nodeType !== Node.ELEMENT_NODE) {
continue;
}
if (!ishaveselector || elem.matches(selector)) {
elements.push(elem);
}
}
return elements;
};
// Добавление метода .closest() (полифил, собственно)
// (function(e){
// e.closest = e.closest || function(css){
// var node = this;
// while (node) {
// if (node.matches(css)) return node;
// else node = node.parentElement;
// }
// return null;
// }
// })(Element.prototype);
}()); }());
src/blocks/main-nav/main-nav.scss
View file @ 635b816f
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы. // Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$screen-xs: 0 !default; $screen-xs: 0 !default;
$screen-sm: 480px !default; $screen-sm: 480px !default;
$screen-md: 768px !default; $screen-md: 768px !default;
...@@ -14,9 +16,14 @@ $toggler-part-height: 3px !default; ...@@ -14,9 +16,14 @@ $toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default; $toggler-part-bg-color: #000 !default;
.main-nav { .main-nav {
$block-name: &;
position: relative; position: relative;
z-index: 10; z-index: 10;
// первый уровень // первый уровень
&__list { &__list {
...@@ -34,7 +41,7 @@ $toggler-part-bg-color: #000 !default; ...@@ -34,7 +41,7 @@ $toggler-part-bg-color: #000 !default;
transition: max-height 0.2s; transition: max-height 0.2s;
} }
.js .main-nav--open & { .js #{$block-name}--open & {
max-height: 100vh; max-height: 100vh;
transition: max-height 0.6s; transition: max-height 0.6s;
} }
...@@ -56,112 +63,71 @@ $toggler-part-bg-color: #000 !default; ...@@ -56,112 +63,71 @@ $toggler-part-bg-color: #000 !default;
display: block; display: block;
padding: 0.5em; padding: 0.5em;
text-decoration: none; text-decoration: none;
background-color: #fff;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: $gray-lightest;
} }
}
// второй уровень &--lvl-2 {
&__lvl-2 { @media (max-width: ($menu-desktop-width - 1)) {
padding-left: 1.2em;
@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 { &--lvl-3 {
margin: 0;
padding: 0;
list-style: none;
}
&__item-lvl-2 { @media (max-width: ($menu-desktop-width - 1)) {
position: relative; padding-left: 2.4em;
}
&--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 {
&--2 {
// третий уровень @media (min-width: $menu-desktop-width) {
position: absolute;
&__lvl-3 { top: 100%;
left: 0;
@media (min-width: $menu-desktop-width) { z-index: 1;
position: absolute; opacity: 0;
z-index: 1; height: 0;
top: 0; overflow: hidden;
left: 100%; transition: opacity 0.3s;
opacity: 0;
height: 0; #{$block-name}__item--show-child > &,
overflow: hidden; #{$block-name}__item:hover & {
transition: opacity 0.3s; opacity: 1;
height: auto;
.main-nav__item-lvl-2:hover & { overflow: visible;
opacity: 1; }
height: auto;
overflow: visible;
} }
} }
}
&__list-lvl-3 {
margin: 0;
padding: 0;
list-style: none;
}
&__item-lvl-3 {
position: relative;
&--active {} &--3 {
}
&__link-lvl-3 {
display: block;
padding: 0.5em;
text-decoration: none;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 2.4em;
}
&:hover, @media (min-width: $menu-desktop-width) {
&:focus { position: absolute;
text-decoration: none; z-index: 1;
top: 0;
left: 100%;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s;
#{$block-name}__item--show-child > &,
#{$block-name}__item--lvl-2:hover & {
opacity: 1;
height: auto;
overflow: visible;
}
}
} }
} }
......
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