Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выпадающее меню на JS (подкатегории) (https://javascript.ru/forum/events/10993-vypadayushhee-menyu-na-js-podkategorii.html)

Trueplayer 31.07.2010 22:50

Выпадающее меню на JS (подкатегории)
 
Здравствуйте, помогите пожалуйста сделать следующую вещь: есть главное меню (оно как бы статично). У каждого пункта меню есть подпункты. Хотелось бы, чтобы при нажатии на один из таких пунктов появлялись подпункты (выпадали вниз). Не обязательно как "слайд" - можно просто. Кроме того, нужно, чтобы при нажатии на другой пункт меню подпункты этого пункта опять скрывались. То есть в какой-то момент времени только у одного пункта меню могут быть видны подпункты.
Заранее спасибо за помощь!

Octane 31.07.2010 22:56

Какие у вас вопросы/сложности возникли при реализации данного меню? На чем застряли? Что подсказать/объяснить? Или чем помочь, сделать меню за вас? Так это работа и за нее платят деньги. Для заказа скриптов есть специальный раздел форума работа, не забудьте указать сумму и схему оплаты.

Trueplayer 01.08.2010 01:16

Сложности, как я уже сказал, с тем, что я не знаю синтаксис JavaScript (если такой существует, конечно), который обеспечит вставку элементов на страницу (а не перепишет ее, как document.write()).
Чтобы было проще: это тоже меню, как и на ozon.ru, только с перезагрузкой страницы я могу сделать, а мне хотелось бы "клиентски".
P. S. Не знаю, как на Озоне, но у меня все пункты и подпункты подгружаются через PHP, из базы данных, точнее - это я тоже все могу
сделать... Мне было только пару строчек синтаксиса, который вставляет подпункты "клиентски". Если это будет проще реализовать (я опять-
таки об этом судить не могу, потому что не знаю синтаксис), то можно добавлять эти подпункты как таблицу.

Gvozd 01.08.2010 01:29

http://javascript.ru/tutorial/dom
http://innerhtml.ru/

rgwergwegwerg 17.09.2014 16:57

function show(obj) {
  var element= document.getElementById(obj);
  
    if(element.style.display == 'none')
      element.style.display = 'block';
    else
      element.style.display = 'none';
return
}

var  TreeMenu= {
	    TMroot:	[['Строительство домов', 'TreeMenu.ТMsub0'],
			 ['Ремонт квартир', 'TreeMenu.ТMsub1'],	
			 ['Ремонт машин', 'null', ''],
			 ['Ремонт бытовой техники', 'null', ''],
			 ['Ремонт электронники', 'null', ''],
			 ['IT и интернет', 'TreeMenu.ТMsub2']],
			 
	    ТMsub0:	[['Плотник', 'TreeMenu.ТMsub00', ''],
			 ['Каменщик', 'TreeMenu.ТMsub01', ''],
			 ['Земельные работы', 'TreeMenu.ТMsub02', '']],

	    ТMsub00:	[['master 0', 'null', '0']],

	    ТMsub01:	[['master 1', 'null', '1'],
			 ['master 2', 'null', '2']],

	    ТMsub02:	[['master 3', 'null', '3'],
			 ['master 4', 'null', '3'],
			 ['master 5', 'null', '3']],
	    
	    ТMsub1:	[['Сантехник', 'TreeMenu.ТMsub10'],
			 ['Отделочные работы', 'TreeMenu.ТMsub11']],

	    ТMsub10:	[['master 6', 'null', '3']],

	    ТMsub11:	[['master 7', 'null', '3'],
			 ['master 8', 'null', '3']],

	    ТMsub2:	[['Разработка сайтов', 'TreeMenu.ТMsub20']],
	    
	    ТMsub20:	[['Ученик Мастера Фу', 'null', '3']],
	    
	    TMmaster:	[[0, 54, 'Иван Иванович Иванов', '<BR>длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [1, 51, 'Петрович', '<BR> описанме Петровича длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [2, 51, 'Ух-бригада', '<BR> описанме ух-бригады длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [3, 51, 'пустышка', '<BR> задолбался я все это писать...  длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека']],

	    ТMdiv:	null,
	    ТMdepth:	0 };

TreeMenu.prinKey= function(){
  var tbl_tag= document.createElement("TABLE"), row, cell, i= 0,
      button1, button2;
  const COL= 3;
      tbl_tag.className= 'Title'
      row=  tbl_tag.insertRow(-1);
      for(;i< COL; i++)
	cell= row.insertCell(-1);
      
      row=  tbl_tag.insertRow(-1);
      cell= row.insertCell(-1);
      cell= row.insertCell(-1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'свернуть всё';
	cell.appendChild(button1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'по рейтенгу';
	cell.appendChild(button1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'по алфавиту';
	cell.appendChild(button1);
      cell= row.insertCell(-1);
            
      row=  tbl_tag.insertRow(-1);
      for(i= 0; i< COL; i++)
	cell= row.insertCell(-1);
 
      TreeMenu.ТMdiv.appendChild(tbl_tag);
return
}

TreeMenu.init= function(id_name){ 
    TreeMenu.ТMdiv= document.getElementById(id_name);
    TreeMenu.prinKey();
return
}

TreeMenu.printItem= function(master_id){
    const ID= 0, SCR= 1, SHRT= 2, LNG= 3;
 
    for(var i= 0; i< TreeMenu.TMmaster.length; i++)
      if(TreeMenu.TMmaster[i][ID]== master_id){
	master= TreeMenu.TMmaster[i];
	break;
      }
    
    MainBlock.print(master[SHRT], master[LNG]);   
}

TreeMenu.showItem= function(ev){
    var i= 0, span_s= [];

    ev.stopPropagation? ev.stopPropagation(): ev.cancelBubble= true;  
    for(; i< this.childNodes.length; i++)
      if(this.childNodes[i].tagName== 'SPAN')
	 span_s.push(this.childNodes[i]);
    if(span_s.length)
      for(i= 0; i< span_s.length; i++)
	if(span_s[i].style.display== 'none')
	  span_s[i].style.display= 'block';
	else
	  span_s[i].style.display= 'none';
    else
      if(this.id)
	TreeMenu.printItem(this.id);
      else
	alert('нет подкатегорий');
    span_s= [];
return
}

TreeMenu.print= function(){
const ITEM= 0, NXT= 1, MST= 2;

function print_span(str, parent){
    var span_tag= document.createElement("SPAN"), i= 0;

    span_tag.innerHTML= str;
    span_tag.onclick= TreeMenu.showItem;
    span_tag.className= 'TMlevel'+ TreeMenu.ТMdepth;
    if(TreeMenu.ТMdepth)
      span_tag.style.display= 'none';
    parent.appendChild(span_tag);
return span_tag
}
 
function print_item(item, parent){
    var link_nxt= eval(item[NXT])

    parent= print_span(item[ITEM], parent);
    if(link_nxt){
	TreeMenu.ТMdepth++;
	start_print_item(link_nxt, parent);
	TreeMenu.ТMdepth--;
    }else
	parent.id= item[MST];
return
}

function start_print_item(item, parent){
    for(var i= 0; i< item.length; i++)
	print_item(item[i], parent);
return
}

start_print_item(TreeMenu.TMroot, TreeMenu.ТMdiv);
TreeMenu.ТMdepth= 0;

return
}

TreeMenu.init('menu');
TreeMenu.print();


стили при это такие:

.TMlevel0 { cursor: pointer;
display: block; }

.TMlevel1 { padding-left: 5%;
display: block; }

.TMlevel2 { padding-left: 15%;
display: block;
font-style: italic;
font-weight: bold;}

kostyanet 18.09.2014 21:29

Этих менюх как грязи в сети. Но, я как-то нарисовал такой вот вариант, никуда он не пошел, пока что, остался в черновиках, а смысл там такой, типа, чтобы в меню были и пункты по наводке и по щелчку. Типа прописал в дата- тег какой нужен пункт - скрипт такой и сделает.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul.nav_menu {
	background-color:brown;
	height: 25px;
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

	.nav_menu li {
		list-style: none;
		float: left;
		border-left:1px solid rgb(230,180,180);
		line-height: 25px;
		height:25px;
		font-weight: bold;
		display:block;
		padding: 0 10px;
		color:white;
	}
	
	.nav_menu li:hover  {
		background: rgb(200,200,200);
		color: black;
	}
	
	/*
	* hidden list
	*/
	.nav_menu  li ul {
		display: none;
		position: absolute;
		padding: 0;
		margin-left:-10px;
		background: rgb(230,230,230);
		color:black;
	}

	.nav_menu li ul li {
		float: none;
	}

	.nav_menu li ul li a {
		text-decoration: none;
		color: black;
	}
	
	.nav_menu li a {
		text-decoration: none;
		color: inherit;
	}

	.nav_menu li a:hover {
		color: inherit;
	}
</style>
</head>
<body>
<ul id="nav_menu" class="nav_menu">
	<li data-menu="orders">
		<a href="#">Parent 1</a>
		<ul data-event="click">
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
		</ul>
	</li>
	<li data-menu="profiles">
		<a href="#">Parent 2</a>
		<ul data-event="click">
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
			<li><a href="#">Parent 2 &raquo; Child 2</a></li>
		</ul>
	</li>
	<li data-menu="pubs">
		<a href="#">Parent 3</a>
		<ul data-event="mouseover, mouseout">
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
			<li><a href="#">Parent 3 &raquo; Child 3</a></li>
		</ul>
	</li>
</ul>
<script>
function TopMenu(){

	var items={};
	var last_index = null;
	
	var handle = {
	
		'click':function(){
			handle.off();
			if(this.dataset.menu==last_index)
				last_index = null;
			else
				handle.on(this);
		},
		
		'mouseover':function() {
			handle.off(this);
		},
		
		'mouseout':function() {
			handle.off(null);
		},
		
		'on':function(elem){
			last_index=elem.dataset.menu;
			items[last_index].style.display="block";
//			items[last_index].parentNode.classList.add('nav_menu_active');
		},
		
		'off':function(elem){
			if(last_index) {
				items[last_index].style.display="none";
//				items[last_index].parentNode.classList.remove('nav_menu_active');
			}
			if(elem)
				this.on(elem);
		}

	};


	
	try {
	
		var top_menu = document.getElementById('nav_menu').querySelectorAll('[data-menu]');
		for(var i=0; i<top_menu.length; i++) {
			var sub_menu = top_menu[i].querySelector('[data-event]');
			var events = sub_menu.dataset.event.split(',');
			for(var j=0; j<events.length; j++) {
				var e=events[j].trim();
				top_menu[i].addEventListener(e, handle[e], false);
			}
			items[top_menu[i].dataset.menu]=sub_menu;
		}

	}
	catch(e){
		console.log(e);
		return false;
	}


}

window.addEventListener('load', TopMenu, false);
</script>
</body>
</html>


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