Commit 5ce6499d authored by Nikolay Gromov's avatar Nikolay Gromov

dropdown fix

parent 6888801e
...@@ -14,7 +14,19 @@ ...@@ -14,7 +14,19 @@
} }
} }
&__toggler {} // &__toggler {
// &:after {
// content: '';
// display: inline-block;
// vertical-align: middle;
// margin-left: .3em;
// width: 0;
// height: 0;
// border-style: solid;
// border-width: 0.5em 0.3em 0;
// border-color: currentColor transparent transparent transparent;
// }
// }
&__menu { &__menu {
position: absolute; position: absolute;
......
...@@ -719,14 +719,14 @@ ...@@ -719,14 +719,14 @@
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список Выпадает список
</button> </button>
<ul class="dropdown__menu" aria-labelledby="dLabel" id="qwer"> <ul class="dropdown__menu" id="qwer">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li> <li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li> <li><a href="">Второй пункт</a></li>
</ul> </ul>
</span> </span>
<span role="presentation" class="dropdown" id="test_2"> <span role="presentation" 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" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает блок Выпадает блок
</button> </button>
<div class="dropdown__menu"> <div class="dropdown__menu">
...@@ -742,11 +742,31 @@ ...@@ -742,11 +742,31 @@
</form> </form>
</div> </div>
</span> </span>
<span role="presentation" class="dropdown" id="test_2"> <span role="presentation" 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" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение вверх
</button>
<ul class="dropdown__menu dropdown__menu--up">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" 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 dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li> <li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li> <li><a href="">Второй пункт</a></li>
......
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