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 @@
<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">
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
......@@ -356,26 +356,26 @@
<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">
<div class="main-nav__lvl main-nav__lvl--2">
<ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
Контакты
</a>
</li>
<li class="main-nav__item-lvl-2">
<a href="" class="main-nav__link-lvl-2">
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link 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">
<div class="main-nav__lvl main-nav__lvl--3">
<ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
Вёрстка HTML-CSS
</a>
</li>
<li class="main-nav__item-lvl-3">
<a href="" class="main-nav__link-lvl-3">
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
Стриптиз
</a>
</li>
......@@ -402,44 +402,29 @@
<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;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;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;a href="" class="main-nav__link">Страницы&lt;/a></code>
<code> &lt;div class="main-nav__lvl main-nav__lvl--2"></code>
<code> &lt;ul class="main-nav__list main-nav__list--lvl-2"></code>
<code> &lt;li class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Контакты&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 class="main-nav__item main-nav__item--lvl-2"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-2">Услуги&lt;/a></code>
<code> &lt;div class="main-nav__lvl main-nav__lvl--3"></code>
<code> &lt;ul class="main-nav__list main-nav__list--lvl-3"></code>
<code> &lt;li class="main-nav__item main-nav__item--lvl-3"></code>
<code> &lt;a href="" class="main-nav__link main-nav__link--lvl-3">Вёрстка HTML-CSS&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>
......
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">
<li class="main-nav__item">
<a class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
<li class="main-nav__item main-nav__item--active">
<a href="" class="main-nav__link">
Страницы
</a>
<div class="main-nav__nested-lvl-1">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
<div class="main-nav__lvl main-nav__lvl--2">
<ul class="main-nav__list main-nav__list--lvl-2">
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
Контакты
</a>
</li>
<li class="main-nav__item main-nav__item--lvl-2">
<a href="" class="main-nav__link main-nav__link--lvl-2">
Услуги
</a>
<div class="main-nav__nested-lvl-2">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#typo-p" class="main-nav__link">
<span class="main-nav__link-text">Параграфы и заголовки</span>
<div class="main-nav__lvl main-nav__lvl--3">
<ul class="main-nav__list main-nav__list--lvl-3">
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
Вёрстка HTML-CSS
</a>
</li>
<li class="main-nav__item">
<a href="#typo-lists" class="main-nav__link">
<span class="main-nav__link-text">Списки</span>
<li class="main-nav__item main-nav__item--lvl-3">
<a href="" class="main-nav__link main-nav__link--lvl-3">
Стриптиз
</a>
</li>
</ul>
......@@ -30,12 +36,12 @@
</li>
<li class="main-nav__item">
<a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
Репозиторий
</a>
</li>
<li class="main-nav__item">
<a href="http://nicothin.pro/" class="main-nav__link">
<span class="main-nav__link-text">Сайт автора</span>
Сайт автора
</a>
</li>
</ul>
......
src/blocks/main-nav/main-nav.js
View file @ 635b816f
(function(){
// Добавление/удаление модификаторов при клике на переключение видимости
var toggler = document.getElementById('main-nav-toggler');
if(toggler){
toggler.addEventListener('click', mainNavVisibleToggle);
......@@ -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 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$screen-xs: 0 !default;
$screen-sm: 480px !default;
$screen-md: 768px !default;
......@@ -14,9 +16,14 @@ $toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
.main-nav {
$block-name: &;
position: relative;
z-index: 10;
// первый уровень
&__list {
......@@ -34,7 +41,7 @@ $toggler-part-bg-color: #000 !default;
transition: max-height 0.2s;
}
.js .main-nav--open & {
.js #{$block-name}--open & {
max-height: 100vh;
transition: max-height 0.6s;
}
......@@ -56,112 +63,71 @@ $toggler-part-bg-color: #000 !default;
display: block;
padding: 0.5em;
text-decoration: none;
background-color: #fff;
&:hover,
&:focus {
text-decoration: none;
background-color: $gray-lightest;
}
}
// второй уровень
&--lvl-2 {
&__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;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 1.2em;
}
}
}
&__list-lvl-2 {
margin: 0;
padding: 0;
list-style: none;
}
&--lvl-3 {
&__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;
@media (max-width: ($menu-desktop-width - 1)) {
padding-left: 2.4em;
}
}
}
&__lvl {
&--2 {
// третий уровень
&__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;
@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;
#{$block-name}__item--show-child > &,
#{$block-name}__item: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;
}
&--3 {
&:hover,
&:focus {
text-decoration: none;
@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;
#{$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