Skip to content

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

Дроп и меню

parent 47921d16
Show whitespace changes
Inline Side-by-side
Showing with 295 additions and 133 deletions
README.md
View file @ d7c82c91
...@@ -31,6 +31,8 @@ ...@@ -31,6 +31,8 @@
</tbody> </tbody>
</table> </table>
Если при вызове `npm start` ничего не происходит, смотрите `./package.json`, он содержит синтаксическую ошибку. [Линтер JSON-а](http://jsonlint.com/)
## Парадигма ## Парадигма
......
package.json
View file @ d7c82c91
...@@ -27,7 +27,9 @@ ...@@ -27,7 +27,9 @@
"btn": [], "btn": [],
"to-top": [], "to-top": [],
"field-text": [], "field-text": [],
"field-actions": [] "field-actions": [],
"dropdown": [],
"menu": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ d7c82c91
...@@ -558,6 +558,150 @@ ...@@ -558,6 +558,150 @@
</section> </section>
<section class="blocks-library__item" id="menu" data-name=".menu">
<h2 class="blocks-library__item-title">Меню</h2>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка</a></li>
<li class="menu__item menu__item--separator"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul>
<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;ul class="menu"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">...&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item menu__item--separator">&lt;a class="menu__link" href="#">...&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">...&lt;/a>&lt;/li></code>
<code>&lt;/ul></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="dropdown" data-name=".dropdown">
<h2 class="blocks-library__item-title">Выпадающий блок</h2>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<div class="dropdown">
<a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul>
</div>
<span class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список
</button>
<span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2">
<span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
<span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
<span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
</span>
</span>
<div class="dropdown">
<a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
<form action="">
<input type="text">
<select>
<option>Название пункта</option>
</select>
<textarea rows="3"></textarea>
<button class="btn">Отправить эту форму</button>
</form>
</div>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх
</button>
<ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<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;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка, после которого следует разделитель&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;span class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список</code>
<code> &lt;/button></code>
<code> &lt;span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2"></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>span&lt;/code>)&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Пункт меню весьма длинный&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Второй пункт&lt;/a>&lt;/span></code>
<code> &lt;/span></code>
<code> &lt;/span></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;div class="dropdown__menu" aria-labelledby="dropdown-demo-3"></code>
<code> &lt;form action=""></code>
<code> &lt;input type="text"></code>
<code> &lt;select></code>
<code> &lt;option>Название пункта&lt;/option></code>
<code> &lt;/select></code>
<code> &lt;textarea rows="3">&lt;/textarea></code>
<code> &lt;button class="btn">Отправить эту форму&lt;/button></code>
<code> &lt;/form></code>
<code> &lt;/div></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх от пр. края</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="field-text" data-name=".field-text"> <section class="blocks-library__item" id="field-text" data-name=".field-text">
<h2 class="blocks-library__item-title">Текстовое поле формы</h2> <h2 class="blocks-library__item-title">Текстовое поле формы</h2>
......
src/blocks/dropdown/dropdown.html
View file @ d7c82c91
<!--DEV <!--DEV
<span role="presentation" class="dropdown" id="test"> <div class="dropdown">
<a id="test_link" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a> <a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu" aria-labelledby="qwer"> <ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="dropdown__menu-separator"><a href="#">Пункт списка, после которого следует разделитель</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li><a href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul> </ul>
</span> </div>
<span role="presentation" class="dropdown" id="test_2"> <span class="dropdown">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список Выпадает список
</button> </button>
<ul class="dropdown__menu" aria-labelledby="dLabel" id="qwer"> <span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
<li><a href="">Пункт меню весьма длинный</a></li> <span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
<li><a href="">Второй пункт</a></li> <span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
</ul> </span>
</span> </span>
<span role="presentation" class="dropdown" id="test_2"> <div class="dropdown">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
Выпадает блок <div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
</button>
<div class="dropdown__menu">
Выпадает <code>div</code> с произвольным контентом. <a href="">Ссылка какая-то</a>. Выпадает <code>div</code> с произвольным контентом. <a href="">Ссылка какая-то</a>.
<hr> <hr>
<form action=""> <form action="">
<input type="text"> <input type="text">
<select name="" id=""> <select>
<option value="">Название пункта</option> <option>Название пункта</option>
</select> </select>
<textarea name="" id="" rows="3"></textarea> <textarea rows="3"></textarea>
<button class="btn">Отправить эту форму</button> <button class="btn">Отправить эту форму</button>
</form> </form>
</div> </div>
</span> </div>
<span role="presentation" class="dropdown" id="test_2"> <div class="dropdown">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение вверх от пр. края Выпадает список вверх
</button> </button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right" aria-labelledby="dLabel" id="qwer"> <ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul> </ul>
</span> </div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
--> -->
src/blocks/dropdown/dropdown.less deleted 100644 → 0
View file @ 47921d16
// Для импорта в диспетчер подключений: @import './src/blocks/dropdown/dropdown.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.dropdown {
position: relative;
display: inline-block;
&--open & {
&__menu {
z-index: @z-index-dropdown;
visibility: visible;
opacity: 1;
width: auto;
}
}
// Быстрое добавление треугольника для всех элементов-переключателей выпадающих блоков
// &__toggler {
// &:after {
// content: '';
// display: inline-block;
// vertical-align: middle;
// margin-left: 0.3em;
// width: 0;
// height: 0;
// border-style: solid;
// border-width: 0.5em 0.3em 0;
// border-color: currentColor transparent transparent transparent;
// }
// }
&__menu {
max-width: 90vw;
width: 1px;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
background-color: #fff;
color: @text-color;
margin: 0;
border: 1px solid @border-color;
border-radius: @border-radius;
opacity: 0;
visibility: hidden;
transition: opacity @transition-time;
&--up {
top: auto;
bottom: 100%;
}
&--right {
left: auto;
right: 0;
}
div& {
min-width: 26rem;
}
ul& {
min-width: 16rem;
list-style: none;
padding: 0.3em 0;
> li > a {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.3em 1em;
color: @text-color;
text-decoration: none;
&:hover,
&:focus {
background-color: @gray-lighter;
}
}
}
}
&__menu-inner {
padding: 1em;
}
&__menu-separator {
&:not(:last-child) {
padding-bottom: 0.3em;
margin-bottom: 0.3em;
border-bottom: 1px solid @border-color;
}
}
}
src/blocks/dropdown/dropdown.scss 0 → 100644
View file @ d7c82c91
// В этом файле должны быть стили только для БЭМ-блока menu, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.dropdown {
position: relative;
display: inline-block;
&__menu {
max-width: 90vw;
width: 1px;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
background-color: #fff;
color: $text-color;
margin: 0;
border: 1px solid $border-color;
border-radius: $border-radius;
opacity: 0;
visibility: hidden;
transition: opacity $transition-time;
&--up {
top: auto;
bottom: 100%;
}
&--right {
left: auto;
right: 0;
}
@at-root div#{&} {
min-width: 26rem;
}
}
&__menu-inner {
padding: 1em;
}
&--open & {
&__menu {
z-index: 1;
visibility: visible;
opacity: 1;
width: auto;
}
}
}
src/blocks/menu/menu.html 0 → 100644
View file @ d7c82c91
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/menu/menu.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include-->
<div class="menu">content</div>
src/blocks/menu/menu.scss 0 → 100644
View file @ d7c82c91
// В этом файле должны быть стили только для БЭМ-блока menu, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
.menu {
min-width: 10em;
margin: 0;
padding: 0.3em 0;
list-style: none;
&__item {
&--separator {
&:not(:last-child) {
padding-bottom: 0.3em;
margin-bottom: 0.3em;
border-bottom: 1px solid $border-color;
}
}
}
&__link {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.3em 1em;
color: $text-color;
text-decoration: none;
&:hover,
&:focus {
background-color: $gray-lightest;
}
}
}
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