Skip to content

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

Допилил блок главного меню и бургера

parent 48cac3f8
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 69 deletions
gulpfile.js
View file @ b96b583c
......@@ -29,6 +29,7 @@ const newer = require('gulp-newer');
let projectConfig = require('./projectConfig.json');
let dirs = projectConfig.dirs;
let lists = getFilesList(projectConfig);
let mainMenu = projectConfig.menu;
// console.log(lists);
// Получение адреса репозитория
......@@ -395,6 +396,7 @@ gulp.task('html', function() {
gulp.task('pug', function() {
const pug = require('gulp-pug');
const htmlbeautify = require('gulp-html-beautify');
const mainMenu = require(dirs.srcPath + dirs.blocksDirName + '/main-nav/main-nav.json');
console.log('---------- сборка Pug');
return gulp.src([
dirs.srcPath + '/*.pug',
......@@ -402,7 +404,8 @@ gulp.task('pug', function() {
.pipe(plumber())
.pipe(pug({
data: {
repoUrl: repoUrl,
repoUrl: repoUrl, // передаем pug-у адрес репозитория проекта
mainMenu: mainMenu, // передаем pug-у объект с меню сайта
},
filters: {
// фильтр, выводящий содержимое pug-файла в виде форматированного текста
......
projectConfig.json
View file @ b96b583c
......@@ -96,4 +96,4 @@
"buildPath": "./build/",
"blocksDirName": "blocks"
}
}
\ No newline at end of file
}
src/blocks-library.pug
View file @ b96b583c
......@@ -130,11 +130,11 @@ block content
+block-lib-code('burger-code', true)
include:show-code() blocks/burger/burger.pug
+block-lib('main-nav', 'Главная навигация TODO', false)
p По получению ссылками фокуса на их родителей с #[code .main-nav__item] добавляется модификатор #[code .main-nav__item--show-child], что позволяет работать со вложенными меню с клавиатуры (предусмотрено 3 уровня).
p TODO: доделать
+block-lib('main-nav', 'Главная навигация', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/main-nav/readme.md
+main-nav('1')
+block-lib-code()
code <div>
include:show-code() blocks/main-nav/main-nav.pug
......
src/blocks/burger/burger.pug
View file @ b96b583c
......@@ -15,4 +15,4 @@ mixin burger(label, targetId, className)
- if (typeof(className) !== 'undefined' && className !== '') attributes['data-target-class-toggle'] = className
button.burger(aria-label=label)&attributes(attributes)
span
span= label
src/blocks/burger/burger.scss
View file @ b96b583c
......@@ -21,12 +21,14 @@ $toggler-part-bg-color: #000 !default;
cursor: pointer;
> span {
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
height: $toggler-part-height;
font-size: 0;
color: transparent;
background: $toggler-part-bg-color;
position: relative;
transition: background $transition-time $transition-time;
&:before,
......
src/blocks/main-nav/main-nav.html deleted 100644 → 0
View file @ 48cac3f8
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/main-nav/main-nav.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<nav id="main-nav" class="main-nav" role="navigation">
<button id="main-nav-toggler" class="main-nav__toggler burger"><span></span></button>
<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__sublist-wrapper main-nav__sublist-wrapper--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__sublist-wrapper main-nav__sublist-wrapper--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 main-nav__item--lvl-3">
<a href="" class="main-nav__link 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>
-->
src/blocks/main-nav/main-nav.json 0 → 100644
View file @ b96b583c
{
"menu": [
{
"id": "1",
"name": "Главная страница",
"url": "/"
},
{
"id": "2",
"name": "Страницы",
"url": "",
"childs": [
{
"id": "21",
"name": "О компании",
"url": "/about"
},
{
"id": "22",
"name": "Услуги",
"url": "/services",
"childs": [
{
"id": "221",
"name": "Вёрстка",
"url": "/serve"
},
{
"id": "221",
"name": "Стриптиз",
"url": "/strip"
}
]
}
]
},
{
"id": "3",
"name": "Репозиторий",
"url": "https://github.com/nicothin/NTH-start-project"
},
{
"id": "4",
"name": "Контакты автора",
"url": "http://nicothin.pro/"
}
]
}
src/blocks/main-nav/main-nav.pug 0 → 100644
View file @ b96b583c
//- Все примеси в этом файле должны начинаться c имени блока (main-nav)
mixin main-nav(selectedID)
//- Принимает:
//- selectedID {string} - id пункта меню, указанное в main-nav.json
//- Вызов:
//- +main-nav('1')
nav.main-nav#nav
+burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")
ul.main-nav__list
each menuItem in mainMenu.menu
li(class= selectedID == menuItem.id ? 'main-nav__item main-nav__item--active' : 'main-nav__item')
a.main-nav__link(href=menuItem.url)= menuItem.name
if (typeof(menuItem.childs) !== 'undefined' && menuItem.childs)
.main-nav__sublist-wrapper.main-nav__sublist-wrapper--lvl-2
ul.main-nav__list.main-nav__list--lvl-2
each menuItem2 in menuItem.childs
li.main-nav__item.main-nav__item--lvl-2
a.main-nav__link.main-nav__link--lvl-2(href=menuItem2.url)= menuItem2.name
if (typeof(menuItem2.childs) !== 'undefined' && menuItem2.childs)
.main-nav__sublist-wrapper.main-nav__sublist-wrapper--lvl-3
ul.main-nav__list.main-nav__list--lvl-3
each menuItem3 in menuItem2.childs
li.main-nav__item.main-nav__item--lvl-3
a.main-nav__link.main-nav__link--lvl-3(href=menuItem3.url)= menuItem3.name
src/blocks/main-nav/readme.md 0 → 100644
View file @ b96b583c
По получению ссылками фокуса на их родителей с `.main-nav__item` добавляется модификатор `.main-nav__item--show-child`, что позволяет работать со вложенными меню с клавиатуры (предусмотрено 3 уровня).
На малых ширинах преобразуется в мобильный вид, скрывается/показывается по клику на бургер, если JS включен (на `html` есть класс `js`).
src/pug/mixins.pug
View file @ b96b583c
......@@ -2,3 +2,4 @@
include ../blocks/close/close.pug
include ../blocks/burger/burger.pug
include ../blocks/main-nav/main-nav.pug
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