Skip to content

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

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

parent dfc3d55a
Hide whitespace changes
Inline Side-by-side
Showing with 358 additions and 119 deletions
src/blocks-demo.html
View file @ 150c09e6
...@@ -320,6 +320,111 @@ ...@@ -320,6 +320,111 @@
</section> </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> <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 @@ ...@@ -2,124 +2,245 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @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 { .main-nav {
// position: relative; position: relative;
// z-index: 1; z-index: 10;
// margin-left: (@grid-gutter-width / -2);
// margin-right: (@grid-gutter-width / -2); // первый уровень
// &__list { &__list {
// padding: 0; margin: 0;
// margin: 0; padding: 0;
// list-style: none; list-style: none;
// @media (min-width: @screen-lg) { @media (max-width: ($menu-desktop-width - 1)) {
// display: flex;
// flex-wrap: wrap; // открытие/закрытие меню только в случае работающего JS
// }
// } .js & {
overflow: hidden;
// &__nested-lvl { max-height: 0;
transition: max-height 0.2s;
// @media (min-width: @screen-lg) { }
// position: absolute; .js .main-nav--open & {
// left: 0; max-height: 100vh;
// top: 100%; transition: max-height 0.6s;
// background-color: @gray-lightest; }
// padding-top: 0.3em; }
// width: auto;
// border: 1px solid @gray-lighter; @media (min-width: $menu-desktop-width) {
// border-top: 0; display: flex;
// box-shadow: @shadow; flex-wrap: wrap;
}
// .main-nav__item:not(:last-child) { }
// border-bottom: 1px solid @gray-lighter;
// } &__item {
// } position: relative;
// .main-nav__list { &--active {}
// display: block; }
// }
&__link {
// .main-nav__link { display: block;
// padding-left: @grid-gutter-width; padding: 0.5em;
// min-width: 15em; text-decoration: none;
// @media (min-width: @screen-lg) { &:hover,
// padding-left: (@grid-gutter-width / 2); &:focus {
// } text-decoration: none;
// } }
}
// // Вложение внутри вложения
// & & {
// @media (min-width: @screen-lg) { // второй уровень
// position: absolute;
// top: 0; &__lvl-2 {
// left: 100%;
// background-color: @gray-lightest; @media (min-width: $menu-desktop-width) {
// width: auto; position: absolute;
// padding-top: 0; top: 100%;
// border-top: 1px solid @gray-lighter; left: 0;
z-index: 1;
// .main-nav__link { opacity: 0;
// padding-left: (@grid-gutter-width / 2); height: 0;
// } overflow: hidden;
// } transition: opacity 0.3s;
// .main-nav__link { .main-nav__item:hover & {
// padding-left: @grid-gutter-width * 1.5; opacity: 1;
// } height: auto;
// } overflow: visible;
// } }
}
// &__item { }
// display: block;
// position: relative; &__list-lvl-2 {
margin: 0;
// &--divider { padding: 0;
list-style: none;
// &:before { }
// content: '';
// position: absolute; &__item-lvl-2 {
// top: -1px; position: relative;
// left: 0;
// right: 0; &--active {}
// border-top: 1px solid @gray-light; }
// }
// } &__link-lvl-2 {
display: block;
// // Сокрытие и показ по наведению padding: 0.5em;
// @media (min-width: @screen-lg) { text-decoration: none;
// & > .main-nav__nested-lvl { @media (max-width: ($menu-desktop-width - 1)) {
// display: none; padding-left: 1.2em;
// } }
// &:hover { &:hover,
&:focus {
// & > .main-nav__nested-lvl { text-decoration: none;
// display: block; }
// } }
// }
// }
// }
// третий уровень
// &__link {
// display: block; &__lvl-3 {
// padding-top: 0.9rem;
// padding-bottom: 0.9rem; @media (min-width: $menu-desktop-width) {
// padding-left: (@grid-gutter-width / 2); position: absolute;
// padding-right: (@grid-gutter-width / 2); z-index: 1;
// color: @gray; top: 0;
// text-decoration: none; left: 100%;
// cursor: pointer; opacity: 0;
height: 0;
// &:hover, overflow: hidden;
// &:focus { transition: opacity 0.3s;
// color: @text-color;
// background-color: @gray-lighter; .main-nav__item-lvl-2:hover & {
// text-decoration: none; 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