SnezhanaLast, ну элементам <ul>, которые под-меню, надо добавить данные классы!
|
Decode,
Добавила вручную в HTML, сабменю все равно видно, а стоит убрать мешающий класс display: inline-block, так оно попросту не открывается. |
SnezhanaLast, уберите из CSS:
.page-sidebar-menu.page-sidebar-menu-active-submenu li > .sub-menu {
display: inline-block !important;
}
Вот так должно работать:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.submenu-hide {
display: none;
}
</style>
</head>
<body>
<ul class="page-sidebar-menu">
<li class="sidebar-menu-item">
<a href="#">One</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#">Two</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#">Three</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script>
var menu = document.querySelector('.page-sidebar-menu'),
subMenu = document.querySelectorAll('.sub-menu'), current;
menu.onclick = function(e) {
var target = e.target;
while(target != this) {
if ( target.classList.contains('sub-menu') ) break;
if ( target.classList.contains('sidebar-menu-item') ) {
current = target.querySelector('.sub-menu');
[].forEach.call(subMenu, function(item) {
if (item == current) return;
item.classList.add('submenu-hide');
});
current.classList.toggle('submenu-hide');
break;
}
target = target.parentNode;
}
return false;
};
menu.onmousedown = menu.onselectstart = function() {
return false;
};
</script>
</body>
</html>
И да, добавьте еще класс элементам sidebar-menu-item <li>, которые являются основными пунктами меню. |
Decode,
Удалила, изменила, класс добавила, толку ноль. Скрипт не работает, может конфликтует? Вижу, что по идее работает. Стрелки еще неверно отображаются. Не судьба мне видимо верстку на логику натянуть... |
SnezhanaLast, я сразу не посмотрел, оказывается у вас там 2 элемента с классом page-sidebar-menu.
В скрипте измените первую строку на:
var menu = document.querySelectorAll('.page-sidebar-menu')[1]
|
Decode,
С наступившим новым годом Вас! Изменила, все осталось по прежнему. :( |
SnezhanaLast, спасибо, Вас тоже с Новым годом!
В консоли ошибка, надо запятую поставить после этой строки:
var menu = document.querySelectorAll('.page-sidebar-menu')[1]
|
Decode,
Поставила, все так же.( |
SnezhanaLast, вам надо со стилями разобраться. Если убрать эти два селектора, то работает.
.page-sidebar-menu.page-sidebar-menu-active-submenu li .sub-menu {
display: none;
width: 194px;
z-index: 2000;
position: absolute;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.page-sidebar .page-sidebar-menu .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
list-style: none;
display: none;
padding: 0;
margin: 8px 0 8px 0;
}
|
| Часовой пояс GMT +3, время: 16:46. |