Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с меню (https://javascript.ru/forum/dom-window/46014-pomogite-s-menyu.html)

AlertMod 25.03.2014 01:10
Помогите с меню
 
Доброго времени суток!
есть такой вот код
function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='block'){
       document.getElementById(id).style.display='none';
       document.getElementById('close').style.display='none';
    }else{
       document.getElementById(id).style.display='block';
       document.getElementById('close').style.display='block';
    }
}


а так же меню

<div class="sidebar">
				<ul>
					<li><a href="/" class="f_item"><span>»</span> Главная</a></li>
					<li><a href="/" class="f_item"><span>»</span> Медицинские услуги</a></li>
					<li><u onclick="openbox('pi'); return false" class="f_item click_menu"><span>»</span> подготовка к исследованиям</u>
						<ul class="open_menu" id="pi">
							<li class="s_item"><span>»</span> <a href="/">Сбор мочи</a></li>
							<li class="s_item"><span>»</span> <a href="/">УЗИ</a></li>
							<li class="s_item"><span>»</span> <a href="/">Исследование на энтеробиоз</a></li>
							<li class="s_item"><span>»</span> <a href="/">Посев мокроты</a></li>
							<li class="s_item"><span>»</span> <a href="/">Холтеровское мониторирование</a>
								<ol>
									<li class="t_item"><span>-</span> <a href="/">Электроэнцефалография (ЭЭГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Реоэнцефалография (РЭГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Реовазография (РВГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Функция внешнего дыхания (ФВД)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Электрокардиография (ЭКГ)</a></li>
								</ol>
							</li>
							<li class="s_item"><span>»</span> <a href="/">Исследование мазка из зева</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к фиброгастроскопии</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к осмотру врачом-проктологом</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к рентгену</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к консультации гинеколога</a></li>
						</ul>
					</li>
					<li><a href="/" class="f_item"><span>»</span> Запись на прием</a></li>
					<li><u onclick="openbox('about'); return false" class="f_item click_menu"><span>»</span> О цкдд малыш</u>
						<ul class="open_menu" id="about">
							<li class="s_item"><span>»</span> <a href="/">Об организации</a></li>
							<li class="s_item"><span>»</span> <a href="/">Наши новости</a></li>
							<li class="s_item"><span>»</span> <a href="/">Контакты</a></li>
						</ul>
					</li>
					<li><a href="/" class="f_item"><span>»</span> Фотогалерея</a></li>
					<li><a href="/" class="f_item"><span>»</span> Вакансии</a></li>
					<li><a href="/" class="f_item"><span>»</span> Прайс</a></li>
					<li><a href="/" class="f_item"><span>»</span> Форум</a></li>
				</ul>
				
				<div id="close" onclick="openbox('pi'); return false"></div>
			</div>

когда нажимаешь на пункт меню подготовка к исследованиям

открывается скрытое меню, а так же разворачивается фиксированный div #close на всю страницу, так чтобы при клике в любое место кроме меню, второе меню скрывалось.
Как мне сделать так что бы можно использовать несколько таких вложенных меню, может на #close повесть через onclick чтобы у класса open_menu менялся display?

рони 25.03.2014 12:54
AlertMod,
так?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    body{
      background-color: #E0FFFF;
      margin: 0px;
      padding: 0px;
    }
  .open_menu {
    display: none;
  }
  .click_menu {
    cursor: pointer;
  }
 #close {
    display: none;
    position: absolute;
    width: 100%; height: 100%;
    top:0px;
    background-color: #000;
    opacity: 0.5;

    }
  </style>
  <script>
       function nextElementSibling(el) {
  do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
  return el;
}
     var obj;
    document.onclick = function (event) {
        var target = (event && event.target) || window.event.srcElement;
        while (target != this) {
            if (target.className.indexOf('click_menu')!=-1) {
                obj && obj != nextElementSibling(target) && (obj.style.display = 'none');
                obj = nextElementSibling(target);
                obj.style.display = obj.style.display != 'block' ? 'block' : 'none';
                return;
            };
               target = target.parentNode;

        };
       target == this && obj && (obj.style.display = 'none')
    };  </script>
</head>
<body>
 <div class="sidebar">
				<ul>
					<li><a href="/" class="f_item"><span>»</span> Главная</a></li>
					<li><a href="/" class="f_item"><span>»</span> Медицинские услуги</a></li>
					<li><u class="f_item click_menu"><span>»</span> подготовка к исследованиям</u>
						<ul class="open_menu" id="pi">
							<li class="s_item"><span>»</span> <a href="/">Сбор мочи</a></li>
							<li class="s_item"><span>»</span> <a href="/">УЗИ</a></li>
							<li class="s_item"><span>»</span> <a href="/">Исследование на энтеробиоз</a></li>
							<li class="s_item"><span>»</span> <a href="/">Посев мокроты</a></li>
							<li class="s_item"><span>»</span> <a href="/">Холтеровское мониторирование</a>
								<ol>
									<li class="t_item"><span>-</span> <a href="/">Электроэнцефалография (ЭЭГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Реоэнцефалография (РЭГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Реовазография (РВГ)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Функция внешнего дыхания (ФВД)</a></li>
									<li class="t_item"><span>-</span> <a href="/">Электрокардиография (ЭКГ)</a></li>
								</ol>
							</li>
							<li class="s_item"><span>»</span> <a href="/">Исследование мазка из зева</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к фиброгастроскопии</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к осмотру врачом-проктологом</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к рентгену</a></li>
							<li class="s_item"><span>»</span> <a href="/">Подготовка к консультации гинеколога</a></li>
						</ul>
					</li>
					<li><a href="/" class="f_item"><span>»</span> Запись на прием</a></li>
					<li><u class="f_item click_menu"><span>»</span> О цкдд малыш</u>
						<ul class="open_menu" id="about">
							<li class="s_item"><span>»</span> <a href="/">Об организации</a></li>
							<li class="s_item"><span>»</span> <a href="/">Наши новости</a></li>
							<li class="s_item"><span>»</span> <a href="/">Контакты</a></li>
						</ul>
					</li>
					<li><a href="/" class="f_item"><span>»</span> Фотогалерея</a></li>
					<li><a href="/" class="f_item"><span>»</span> Вакансии</a></li>
					<li><a href="/" class="f_item"><span>»</span> Прайс</a></li>
					<li><a href="/" class="f_item"><span>»</span> Форум</a></li>
				</ul>
				<div id="close" onclick="openbox('pi'); return false"></div>
			</div>
</body>
</html>

AlertMod 25.03.2014 13:50
Да, почти. только мне нужно чтобы при открытии меню, на весь экран открывался блок #close и в любое место кликнув меню закроется
вот пример

рони 25.03.2014 14:21
AlertMod,
вариант выше добавлен - любой клик вне меню закроет вложенное меню - работает без id="close"

AlertMod 25.03.2014 14:51
рони,
Спасибо большое!

AlertMod 06.04.2014 20:37
А что бы в ie8 работало не подскажите?

рони 06.04.2014 22:07
Цитата:
Сообщение от AlertMod
А что бы в ie8 работало не подскажите?
вариант выше добавлен для ie8...ie7...ie6 :)


Часовой пояс GMT +3, время: 23:29.