Выпадающее меню на JS (подкатегории)
Здравствуйте, помогите пожалуйста сделать следующую вещь: есть главное меню (оно как бы статично). У каждого пункта меню есть подпункты. Хотелось бы, чтобы при нажатии на один из таких пунктов появлялись подпункты (выпадали вниз). Не обязательно как "слайд" - можно просто. Кроме того, нужно, чтобы при нажатии на другой пункт меню подпункты этого пункта опять скрывались. То есть в какой-то момент времени только у одного пункта меню могут быть видны подпункты.
Заранее спасибо за помощь! |
Какие у вас вопросы/сложности возникли при реализации данного меню? На чем застряли? Что подсказать/объяснить? Или чем помочь, сделать меню за вас? Так это работа и за нее платят деньги. Для заказа скриптов есть специальный раздел форума работа, не забудьте указать сумму и схему оплаты.
|
Сложности, как я уже сказал, с тем, что я не знаю синтаксис JavaScript (если такой существует, конечно), который обеспечит вставку элементов на страницу (а не перепишет ее, как document.write()).
Чтобы было проще: это тоже меню, как и на ozon.ru, только с перезагрузкой страницы я могу сделать, а мне хотелось бы "клиентски". P. S. Не знаю, как на Озоне, но у меня все пункты и подпункты подгружаются через PHP, из базы данных, точнее - это я тоже все могу сделать... Мне было только пару строчек синтаксиса, который вставляет подпункты "клиентски". Если это будет проще реализовать (я опять- таки об этом судить не могу, потому что не знаю синтаксис), то можно добавлять эти подпункты как таблицу. |
|
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;} |
Этих менюх как грязи в сети. Но, я как-то нарисовал такой вот вариант, никуда он не пошел, пока что, остался в черновиках, а смысл там такой, типа, чтобы в меню были и пункты по наводке и по щелчку. Типа прописал в дата- тег какой нужен пункт - скрипт такой и сделает.
<!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 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
</ul>
</li>
<li data-menu="profiles">
<a href="#">Parent 2</a>
<ul data-event="click">
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » 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 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » 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, время: 16:23. |