Skip to content

K
kpp
Commit 864d3ce3 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Начал работу над главной навигацией

parent 323c773d
Show whitespace changes
Inline Side-by-side
Showing with 169 additions and 135 deletions
package.json
View file @ 864d3ce3
......@@ -12,11 +12,12 @@
"blocks": {
"page-header": [],
"page-footer": [],
"is-mobile": [],
"main-nav": [],
"sprite-svg": [],
"sprite-png": [
"__demo"
],
"is-mobile": [],
"logo": [],
"code": [],
"thumb": []
......
src/blocks/main-nav/main-nav.html
View file @ 864d3ce3
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/main-nav/main-nav.html')
-->
<div class="main-nav">content</div>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
</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>
</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>
</a>
</li>
<li class="main-nav__item">
<a href="#typo-lists" class="main-nav__link">
<span class="main-nav__link-text">Списки</span>
</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">
<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>
</nav>
src/blocks/main-nav/main-nav.less deleted 100644 → 0
View file @ 323c773d
// Для импорта в диспетчер подключений: @import './src/blocks/main-nav/main-nav.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.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;
}
}
}
src/blocks/main-nav/main-nav.scss 0 → 100644
View file @ 864d3ce3
// В этом файле должны быть стили только для БЭМ-блока main-nav, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.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;
// }
// }
}
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