Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Всплывающее окно при клике! Прошу помочь! (https://javascript.ru/forum/dom-window/60247-vsplyvayushhee-okno-pri-klike-proshu-pomoch.html)

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

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

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

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

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

Decode 21.12.2015 17:41
SnezhanaLast, ссылка не туда ведет.

SnezhanaLast 21.12.2015 17:59
Decode,
Поправила.

Decode 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 26.12.2015 21:54
Спасибо, но не совсем поняла, как в случае с моим меню применить.

SnezhanaLast 26.12.2015 22:01
Decode,
У него немного другая структура. :)

Decode 26.12.2015 22:38
SnezhanaLast, что значит другая структура?

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

SnezhanaLast 27.12.2015 00:25
Decode,
Структура:
<div>
      <ul>
         <li>


Новые стили и html меню я и сама написать могу. Дело тут в том, чтобы сохранить имеющееся ("прилипающую стрелку", стиль). Если в CSS hover эффект поменять на active, меню открывается по клику, но тут же секунду в секунду скрывается => дело в JS.

Decode 27.12.2015 01:15
SnezhanaLast, для начала html измените.



Цитата:
Сообщение от SnezhanaLast
Если в CSS hover эффект поменять на active, меню открывается по клику, но тут же секунду в секунду скрывается => дело в JS.
Не надо active, впрочем, как и hover.

SnezhanaLast 28.12.2015 00:11
Decode,
Обновила, посмотрите, с такой проблемой столкнулась.

Decode 28.12.2015 02:52
SnezhanaLast, уберите :active. В таблицу стилей добавьте класс submenu-hide, который будет скрывать под-меню. Вставьте скрипт к себе:
var menu = document.querySelector('.page-sidebar-menu'),
    subMenu = document.querySelectorAll('.sub-menu'), current;

menu.onclick = function(e) {
  if ( !e.target.parentNode != this ) return;

  current = e.target.querySelector('.sub-menu');

  [].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;
};

SnezhanaLast 28.12.2015 10:55
Спасибо Вам большое! Выручили :)

SnezhanaLast 28.12.2015 12:50
Ой. Сделала, а белиберда получилась. :(
В чем косяк?

Decode 28.12.2015 15:35
SnezhanaLast,
Цитата:
Сообщение от Decode
В таблицу стилей добавьте класс submenu-hide, который будет скрывать под-меню.

SnezhanaLast 28.12.2015 15:54
Я добавила.
.submenu-hide {
  display: none;
}

Decode 28.12.2015 16:02
SnezhanaLast, этого мало, надо еще элементам <ul> добавить, которые submenu.
<ul class="sub-menu submenu-hide">

SnezhanaLast 28.12.2015 17:28
Decode,
.submenu-hide {
  display: none;
}
.sub-menu .submenu-hide {
  display: none;
}
.sub-menu .submenu-hide ul {
  display: none;
}


Сделала вот так, но результат тот же самый. :(

Decode 29.12.2015 00:07
SnezhanaLast, ну элементам <ul>, которые под-меню, надо добавить данные классы!

SnezhanaLast 29.12.2015 11:01
Decode,
Добавила вручную в HTML, сабменю все равно видно, а стоит убрать мешающий класс display: inline-block, так оно попросту не открывается.

Decode 29.12.2015 17:18
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>, которые являются основными пунктами меню.

SnezhanaLast 29.12.2015 22:07
Decode,
Удалила, изменила, класс добавила, толку ноль. Скрипт не работает, может конфликтует? Вижу, что по идее работает. Стрелки еще неверно отображаются. Не судьба мне видимо верстку на логику натянуть...

Decode 30.12.2015 01:08
SnezhanaLast, я сразу не посмотрел, оказывается у вас там 2 элемента с классом page-sidebar-menu.

В скрипте измените первую строку на:
var menu = document.querySelectorAll('.page-sidebar-menu')[1]

SnezhanaLast 01.01.2016 18:45
Decode,
С наступившим новым годом Вас!
Изменила, все осталось по прежнему. :(

Decode 02.01.2016 12:30
SnezhanaLast, спасибо, Вас тоже с Новым годом!

В консоли ошибка, надо запятую поставить после этой строки:
var menu = document.querySelectorAll('.page-sidebar-menu')[1]

SnezhanaLast 02.01.2016 17:26
Decode,
Поставила, все так же.(

Decode 03.01.2016 00:04
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, время: 21:54.