Всплывающее окно при клике! Прошу помочь!
Добрый вечер, дорогие форумчане.
Нужна помощь, есть сайт, при наведении на ссылку бокового меню, появляются подкатегории, нужно сделать, чтобы они появлялись при клике. Перекопала весь CSS, но видимо дело в скрипте. Сама с языком мала знакома, может кто поможет. Вот сайт: ССЫЛКА Заранее спасибо! :) |
SnezhanaLast, аккордеон чтоли? На форуме поищи их полно. Или по слову открывашка :)
|
Нет, аккордеон сделать понятно как, как сделать, чтобы в меню окно с подменю всплывало не при наведении, а при клике? При замене в CSS hover на active, результата 0.
|
SnezhanaLast, ссылка не туда ведет.
|
Decode,
Поправила. |
SnezhanaLast, так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
ul {
margin: 0; padding: 0;
list-style: none;
}
.menu {
width: 10%;
font: 1em/1.2 sans-serif;
}
.menu__item {
padding: 10px;
background: #ccc;
position: relative;
margin-bottom: 5px;
cursor: pointer;
}
.menu__item:last-child {
margin-bottom: 0;
}
.submenu {
position: absolute;
top: 0;
left: 110%;
width: 100%;
}
.submenu__item {
background: #bbb;
padding: 10px;
margin-bottom: 5px;
width: 100%;
}
.submenu--hide {
display: none;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu__item">
Item 1
<ul class="submenu submenu--hide">
<li class="submenu__item">Subitem 1</li>
<li class="submenu__item">Subitem 2</li>
<li class="submenu__item">Subitem 3</li>
</ul>
</li>
<li class="menu__item">
Item 2
<ul class="submenu submenu--hide">
<li class="submenu__item">Subitem 1</li>
<li class="submenu__item">Subitem 2</li>
<li class="submenu__item">Subitem 3</li>
</ul>
</li>
<li class="menu__item">
Item 3
<ul class="submenu submenu--hide">
<li class="submenu__item">Subitem 1</li>
<li class="submenu__item">Subitem 2</li>
<li class="submenu__item">Subitem 3</li>
</ul>
</li>
</ul>
<script>
var menu = document.querySelector('.menu'),
subMenu = document.querySelectorAll('.submenu'), current;
menu.onclick = function(e) {
if ( !e.target.classList.contains('menu__item') ) return;
current = e.target.querySelector('.submenu');
[].forEach.call(subMenu, function(item) {
if (item == current) return;
item.classList.add('submenu--hide');
});
current.classList.toggle('submenu--hide');
};
menu.onmousedown = menu.onselectstart = function() {
return false;
};
</script>
</body>
</html>
|
Спасибо, но не совсем поняла, как в случае с моим меню применить.
|
Decode,
У него немного другая структура. :) |
SnezhanaLast, что значит другая структура?
|
Ну судя по объёму текущего скрипта юзеру вряд ли удастся самому поправить
Тут либо к разработчику, либо заказывать новый, ибо разбираться с длиннокодом дольше, чем сваять новый (Тем паче их там два |
| Часовой пояс GMT +3, время: 10:59. |