Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2011, 19:27
Интересующийся
Отправить личное сообщение для Scrum Посмотреть профиль Найти все сообщения от Scrum
 
Регистрация: 27.04.2011
Сообщений: 13

Выпадающее меню.
Доброго дня всем.
Сразу оговорюсь я пока только учус, знаю немного, тренируюсь с тем что знаю.
Имею такую вот конструкцию:
<!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, заканчивает рекурсию только после полного обхода, а не после возврата ноды, непонятно почему.

Буду благодарен за разъяснения, ну и общие замечания/советы как упростить или сделать гибче/ошибки на которые укажете.

Последний раз редактировалось Scrum, 28.04.2011 в 22:58.
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2011, 09:02
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

надо было кнопочку приделать для запуска кода....
А вообще, бегло посмотрев, вижу что нигде нет setTimeout или setInterval, значит меню не анимированное, тем более значит что его можно сделать на чистом css, я в какой то теме показывал примерный вариант.. Горизонтальное выпадающее меню на jQuery
__________________
readOnly
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2011, 22:50
Интересующийся
Отправить личное сообщение для Scrum Посмотреть профиль Найти все сообщения от Scrum
 
Регистрация: 27.04.2011
Сообщений: 13

poorking
Спасибо за проявленный интерес.

Цитата:
тем более значит что его можно сделать на чистом css
Тренируюсь именно с JavaScript.
Анимацию планировал добавить немного позже, отработав простейший гибкий механизм, вот по нему у меня и вопросы, правильно ли построен подход к решению данной задачи ? стоит ли учесть какие то моменты непредусмотренные мной ? на каких моментах моей реализации стоит заострить внимание и почему ? итд.

Последний раз редактировалось Scrum, 28.04.2011 в 22:55.
Ответить с цитированием
  #4 (permalink)  
Старый 29.04.2011, 00:47
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Как правильно.. Лично я считаю что любые двигающиеся и дергающиеся штуки на сайтах это зло, а тем более изначально скрытые как выпадающие менюшки. Ну а по сабжу, если уж делать на 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 выпадающим и т.п. Так что вот пара советов, раз вы хотите разработать гибкий интерфейс (но допускайте что я вам тут мог наврать )
__________________
readOnly

Последний раз редактировалось poorking, 29.04.2011 в 01:11.
Ответить с цитированием
  #5 (permalink)  
Старый 29.04.2011, 16:46
Интересующийся
Отправить личное сообщение для Nikolai-JS Посмотреть профиль Найти все сообщения от Nikolai-JS
 
Регистрация: 24.04.2011
Сообщений: 10

Согласен с poorking
Анимированным меню не место на серьёзных сайтах. Максимум, что можно позволить - изменение цвета фона (текста) при наведении курсора мышки. Ещё один аргумент против аним. меню:
Если вы например перешли по ссылке Link 3.1.1 то на вновь открывшейся странице вы должны показать, что находитесь в этом секторе меню! Как быть?! Строить развёрнутое меню? Это легче сделать на серверной стороне сгенерировав готовую статику...
Несмотря на это - успехов в программировании!
Ответить с цитированием
  #6 (permalink)  
Старый 01.05.2011, 15:17
Интересующийся
Отправить личное сообщение для Scrum Посмотреть профиль Найти все сообщения от Scrum
 
Регистрация: 27.04.2011
Сообщений: 13

poorking, Спасибо, будем думать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Выпадающее меню на JS (подкатегории) Trueplayer Events/DOM/Window 5 18.09.2014 22:29
Выпадающее меню не работает в Chrome Bangoo jQuery 1 21.03.2011 20:33
Меню, выпадающее и сворачивающееся не по hover а по клику adelante jQuery 1 14.01.2011 04:17
Сделать выпадающее меню по аналогу SerG Общие вопросы Javascript 1 05.11.2008 15:05