Выпадающее меню.
Доброго дня всем.
Сразу оговорюсь я пока только учус, знаю немного, тренируюсь с тем что знаю. Имею такую вот конструкцию: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 5px;
margin: 5px 0 0 0;
}
ul li {
display: inline-block;
*display: inline;
zoom:1;
vertical-align: top;
border: 1px dotted silver;
}
ul li ul li {
display: block;
}
ul li ul li ul {
background: #FFFF99;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var menu = {
menuElement: null,
start: function(){
menu.menuElement = document.getElementById('menu');
menu.turn(menu.menuElement);
},
turn: function(obj){
var nodeElement = obj.children
if(nodeElement){
for(var i=0;i<nodeElement.length;i++){
var nodeElementName = nodeElement[i].nodeName;
/*alert('nodeElementName:'+nodeElementName);*/
if(nodeElementName == 'A' && menu.nextElementSibling(nodeElement[i])){
var element = menu.nextElementSibling(nodeElement[i]);
element.style.display = 'none';
}
menu.turn(nodeElement[i]);
}
}
},
nextElementSibling: function(obj){
for(var nextNode = obj.nextSibling;nextNode!=null;nextNode = nextNode.nextSibling){
if(nextNode.nodeType == 1 && nextNode.nodeName == 'UL'){
return nextNode;
}
menu.nextElementSibling(nextNode);
}
},
expande: function(obj){
var nodeElement = obj.children;
if(nodeElement){
for(var i=0;i<nodeElement.length;i++){
if (nodeElement[i].nodeName == 'A') {
obj = nodeElement[i];
break;
}
}
}
var element = menu.nextElementSibling(obj);
if(element){
element.style.display = 'block';
}
}
}
/*]]>*/
</script>
</head>
<body onload="menu.start()">
<div id="menu">
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1</a>
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.1</a>
<ul>
<li>
<a href="#">Link 1.1.1</a>
</li>
</ul>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.2</a>
<ul>
<li>
<a href="#">Link 1.2.1</a>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.2.2</a>
<ul>
<li>
<a href="#">Link 1.2.2.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 2</a>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 3</a>
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 3.1</a>
<ul>
<li>
<a href="#">Link 3.1.1</a>
</li>
</ul>
</li>
<li>
<a href="#">Link 3.2</a>
</li>
<li>
<a href="#">Link 3.3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Все вроде работает так как задумывалось, но: 1.При наведении на Link 1.1.1 и попытке перейти на link 1.2 все благополучно сворачивается, возможно стоит поставить setTimeout но хотелось бы узнать решение получше. 2.Беспокоит рекурсивный обход метода nextElementSibling, заканчивает рекурсию только после полного обхода, а не после возврата ноды, непонятно почему. Буду благодарен за разъяснения, ну и общие замечания/советы как упростить или сделать гибче/ошибки на которые укажете. |
надо было кнопочку приделать для запуска кода....
А вообще, бегло посмотрев, вижу что нигде нет setTimeout или setInterval, значит меню не анимированное, тем более значит что его можно сделать на чистом css, я в какой то теме показывал примерный вариант.. http://javascript.ru/forum/jquery/12...html#post99703 |
poorking
Спасибо за проявленный интерес. Цитата:
Анимацию планировал добавить немного позже, отработав простейший гибкий механизм, вот по нему у меня и вопросы, правильно ли построен подход к решению данной задачи ? стоит ли учесть какие то моменты непредусмотренные мной ? на каких моментах моей реализации стоит заострить внимание и почему ? итд. |
Как правильно.. Лично я считаю что любые двигающиеся и дергающиеся штуки на сайтах это зло, а тем более изначально скрытые как выпадающие менюшки. Ну а по сабжу, если уж делать на js, то я бы написал какое нибудь API которое и создает менюшку, а то вы ее разверстали, а потом скриптом подобрали. Чтобы был механизм, создающий меню. Например чтобы было как то так
document.body.appendChild(
MyMenyCreator(
[
{
title: "Главная",
url: "http://"
},
{
title: "Блог",
url: "http://"
},
{
title: "Портфолио",
url: "http://"
sub:[
{
title: "Верстка",
url: "http://"
},
{
title: "Скрипты",
url: "http://"
},
{
title: "Фотошоп",
url: "http://"
},
]
},
{
title: "Обо мне",
url: "http://"
}
]
)
)
Я бы сделал так, то есть функция ест параметры а возвращает готовый узел, естественно она также должна принимать стили, обработчики и прочее, все что вам нужно. Или по-другому можно спроектировать интерфейс. Например можно сделать MyMenuCreator синглтоном с методами, настраивающими менюшку, и методом, отдающим ее готовенькую. Вариантов много, фантазируйте :) Я считаю что скрипт должен быть такой, чтобы его можно было легко применить, а также при желании расширить новыми функциями, возможностями, не обязательно через API, но хотя бы, добавив, скажем в какой нибудь приватный набор какой нибудь новый элемент. Или через прототип удобно расширять. Ну это все чисто мое мнение и я говорю как бы старался сделать я) А у вас как то смешано все и вовсе не гибко, например обработчики через аттрибуты назначены, то есть мне чтобы применить ваш скрипт, нужно переверстать свою менюшку. Можно еще например попробовать такой вариант, скрипт принимает узел ul, и по определенным правилам, придуманными вами его сворачивает, например если в li вложен ul, то сделать тот ul выпадающим и т.п. Так что вот пара советов, раз вы хотите разработать гибкий интерфейс (но допускайте что я вам тут мог наврать :) ) |
Согласен с poorking
Анимированным меню не место на серьёзных сайтах. Максимум, что можно позволить - изменение цвета фона (текста) при наведении курсора мышки. Ещё один аргумент против аним. меню: Если вы например перешли по ссылке Link 3.1.1 то на вновь открывшейся странице вы должны показать, что находитесь в этом секторе меню! Как быть?! Строить развёрнутое меню? Это легче сделать на серверной стороне сгенерировав готовую статику... Несмотря на это - успехов в программировании! |
poorking, Спасибо, будем думать.
|
| Часовой пояс GMT +3, время: 18:21. |