Форум

SnezhanaLast · #1 (**permalink**) 19.12.2015, 02:49

Добрый вечер, дорогие форумчане.
Нужна помощь, есть сайт, при наведении на ссылку бокового меню, появляются подкатегории, нужно сделать, чтобы они появлялись при клике. Перекопала весь CSS, но видимо дело в скрипте. Сама с языком мала знакома, может кто поможет.

Вот сайт: ССЫЛКА

Заранее спасибо! :)

Decode · #2 (**permalink**) 19.12.2015, 02:55

SnezhanaLast, аккордеон чтоли? На форуме поищи их полно. Или по слову открывашка

SnezhanaLast · #3 (**permalink**) 21.12.2015, 16:25

Нет, аккордеон сделать понятно как, как сделать, чтобы в меню окно с подменю всплывало не при наведении, а при клике? При замене в CSS hover на active, результата 0.

Decode · #4 (**permalink**) 21.12.2015, 17:41

SnezhanaLast, ссылка не туда ведет.

SnezhanaLast · #5 (**permalink**) 21.12.2015, 17:59

Decode,
Поправила.

Decode · #6 (**permalink**) 22.12.2015, 01:57

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>

SnezhanaLast · #7 (**permalink**) 26.12.2015, 21:54

Спасибо, но не совсем поняла, как в случае с моим меню применить.

SnezhanaLast · #8 (**permalink**) 26.12.2015, 22:01

Decode,
У него немного другая структура.

Decode · #9 (**permalink**) 26.12.2015, 22:38

SnezhanaLast, что значит другая структура?

Deff · #10 (**permalink**) 26.12.2015, 23:17

Ну судя по объёму текущего скрипта юзеру вряд ли удастся самому поправить
Тут либо к разработчику, либо заказывать новый, ибо разбираться с длиннокодом дольше, чем сваять новый (Тем паче их там два

Форум

Справочник

Discord чат

Курсы javascript