Меню
Что нового?

меню на JavaScript

Ekaterina

Новичок
меню на JavaScript

Есть такая структура. Необходимо написать меню на js, с использованием jquery: каждому пункту горизонтального меню первого уровня соответствует выпадающее горизонтальное меню, а каждому пункту горизонтального меню(второй уровень вложенности) соответствует выпадающее вертикальное меню(3- ий уровень). Правильно ли я понимаю, что для этого надо переделать эту структуру с использование вложенных списков?

<!-- MENU -->
<div id="menu-container ">
<table id="dark">
<tr>
<td class="left">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
<td class="container">
<table class="menu">
<tr>
<td class="left"></td>
<td class="items">
<a class="item" href="">Пункт меню 1</a> //первый уровень , горизонтальное меню
<img src="img/x.gif">
<a class="item" href="">Пункт меню 2</a>
<img src="img/x.gif">
<a class="item" href="" id="selected">Пункт меню 3 </a>
<img src="img/x.gif">
<a class="item" href="">Пункт меню 4</a>
</td>
<td class="right"></td>
</tr>
</table>
</td>
<td class="right">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
</tr>
</table>
<table id="light"> // горизонтальное меню второго уровня
<tr>
<td class="left">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
<td class="container">
<table class="menu">
<tr>
<td class="left"></td>
<td class="items">
<a class="item" href="">Пункт меню</a>
<img src="img/x.gif">
<a class="item" href="">Пункт меню в две строкивфаыва</a>
<img src="img/x.gif">
<a class="item" href="" id="selected">Пункт меню в две строки fdsgsdfgs sdfg sdf g</a>
<img src="img/x.gif">
<a class="item" href="">Пункт меню в две строки</a>
</td>
<td class="right"></td>
</tr>
</table>
</td>
<td class="right">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
</tr>
</table>
</div>

<!-- CONTENT -->

<div id="contenter">

<!-- dropdown menu - меню третьего уровня -->
<div id="sub-menu">
<a href="">Пункт менюхи1</a>
<div><img src="img/x.gif" hspace="0" vspace="0"></div>
<a href="">Пункт менюхи2 sdf sdf sdf sdf sdf sdf sdf sdf sdf </a>
<div><img src="img/x.gif" hspace="0" vspace="0"></div>
<a href="">Пункт менюхи3</a>
</div>
<!-- end of dropdown menu -->

-~{}~ 03.09.08 18:11:

Хотелось бы знать можно ли обработать эту конструкцию с помощью следующего скрипта: (просто до сих пор мне встречались реализации меню в виде списка):

<script type="text/javascript" src="jss/jquery-1.2.6.min.js"></script>

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("div#menu-container table#dark td.container table.menu td.items a.item").hover(
function() {
<!--$(this).addClass("active");-->
$(this).find("div#menu-container table#light td.container table.menu td.items a.item").slideDown();
},
function() {
<!--$(this).removeClass("active");-->
$(this).find('td.items').slideUp('fast');
}
);
});

</script>

Этот скрипт не работает, что я делаю не так.
 

Ekaterina

Новичок
Извините за повтор, то есть, если мы хотим сделать меню, то всегда используем списки и больше никак? просто я не слишком разбираюсь в js и должна написать скрипт для меню из вышеприведенной структуры. Структуру делал другой человек и переделка лишняя работа для него.
 

-SkyNet-

Новичок
Для наглядности, добавим еще одну таблицу с меню 2го уровня, и присвоим обеим класс level2 и раздадим id "light1" и "light2" чтобы отличать, проставим href="1","2",.... чтобы сопоставить их с соответствующими меню 2го уровня

<!-- MENU -->
<div id="menu-container">
<table border=1 id="dark">
<tr>
<td class="left">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
<td class="container">
<table class="menu">
<tr>
<td class="left"></td>
<td class="items">
<a class="item" href="1">Пункт меню 1</a> //первый уровень , горизонтальное меню
<img src="img/x.gif">
<a class="item" href="2">Пункт меню 2</a>
<img src="img/x.gif">
<a class="item" href="3" id="selected">Пункт меню 3 </a>
<img src="img/x.gif">
<a class="item" href="4">Пункт меню 4</a>
</td>
<td class="right"></td>
</tr>
</table>
</td>
<td class="right">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
</tr>
</table>горизонтальное меню второго уровня<br>
<table border=1 id="light1" class="level2">
<tr>
<td class="left">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
<td class="container">
<table class="menu">
<tr>
<td class="left"></td>
<td class="items">
<a class="item" href="#">Пункт меню</a>
<img src="img/x.gif">
<a class="item" href="#">Пункт меню в две строкивфаыва</a>
<img src="img/x.gif">
<a class="item" href="#" id="selected">Пункт меню в две строки fdsgsdfgs sdfg sdf g</a>
<img src="img/x.gif">
<a class="item" href="#">Пункт меню в две строки</a>
</td>
<td class="right"></td>
</tr>
</table>
</td>
<td class="right">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
</tr>
</table>

<table border=1 id="light2" class="level2">
<tr>
<td class="left">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
<td class="container">
<table class="menu">
<tr>
<td class="left"></td>
<td class="items">
<a class="item" href="#">Пункт меню2222</a>
<img src="img/x.gif">
<a class="item" href="#">Пункт меню 2222ва</a>
<img src="img/x.gif">
<a class="item" href="#" id="selected">Пункт меню в две строки fdsg222</a>
<img src="img/x.gif">
<a class="item" href="#">Пункт меню в две ст2222</a>
</td>
<td class="right"></td>
</tr>
</table>
</td>
<td class="right">
<img src="img/x.gif" hspace="0" vspace="0">
</td>
</tr>
</table>
</div>

<script type="text/javascript" src="jss/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){

$(".level2").hide();//скрываем все меню 2го уровня

var menuover=false;//переменная, true если указатель над элементами меню

$(document.body).click(function(){//по клику, если указатель не над эл-тами меню, закрывает 2й уровень
if(!menuover) $(".level2").hide();
});

$("#dark, .level2, #sub-menu").bind("mouseout",function()
menuover=false;//если не над меню, закрывать можно
}).bind("mouseover",function() {//если над меню, закрывать нельзя
menuover=true;
})

$("#dark .item").bind("mouseover",function() {//при наведении на 1й уровень закрываем все вторые
menuover=true;//закрывать меню при клике нельзя
$(".level2").hide();
$("#light"+$(this).attr("href")).show();//и показываем соответствующее меню 2го уровня
});


});

</script>
 
Войдите или зарегистрируйтесь для ответа.
Сверху