Выпадающее вертикальное меню не работает в IE

Статус
Закрыто для дальнейших ответов.

Rozalia

Active Member
Регистрация
24.05.2010
Сообщения
40
Доброго времени суток, вэб-мастера!

Сделала выпадающее вертикальное меню. Все браузеры (FireFox, Safari, Google Chrome, Opera) понимают и корректно отображают вложенный список, а Internet Explorer упрямится. В отдельном файле сделала для него ява-скрипт, ссылку указала, но, увы, результат тот же - ничего!
Вот код, который я использовала:

"...Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»" - Ред.):"

Код:
startList = function() {
 if (document.all&&document.getElementById) {
 navRoot = document.getElementById("nav");
 for (i=0; i<navRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName=="LI") {
 node.onmouseover=function() {
 this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace »
 (" over", ""); 
}
} 
} 
}
}
window.onload=startList;
В скриптах пока что не разбираюсь, поэтому не вижу где ошибка.
Данный код взят с сервиса www.webmascon.com (http://www.webmascon.com/topics/coding/42a.asp)
Помогите, пожалуйста одолеть вредный IE :unsure:
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
У меня в ИЕ-6 скрипт работает. Возможно, вы забыли убрать >> из 11-й строки и добавить в эту строку (" over", "");
Дело в том, что js конец строки интерпретирует, как конец оператора (подобно ; ).
Итого, скрипт должен выглядеть так:
Код:
<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
	 	for (i=0; i<navRoot.childNodes.length; i++) {
	 		node = navRoot.childNodes[i];
	 		if (node.nodeName=="LI") {
	 			node.onmouseover=function() {
	 				this.className+=" over";
	 			}
	 			node.onmouseout=function() {
					this.className=this.className.replace (" over", ""); 
				}
			} 
		} 
	}
}
window.onload=startList;
</script>
Кроме того, не забудьте, что список с меню должен иметь id="nav" (<ul id="nav">)
 

Rozalia

Active Member
Регистрация
24.05.2010
Сообщения
40
Чего-то не получается. Может быть, потому что само меню расположено в блоке <div id="nav"> и в каскадном стиле прописано:

#nav {
font-family: "Century Gothic", Candara, sans-serif;
color: #C0C0C0;
font-size: 17px;
font-weight: bold;
line-height: 1.2em;
text-align: left;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 265px;
border: 1px solid #DAA520;
}

и т.д.

Может, надо использовать запись навроде этой: ul #nav { } ?
А сам блок применять как блок-обёртку?
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
Чего-то не получается. Может быть, потому что само меню расположено в блоке <div id="nav">...
вот по этому и не получается...есть два варианта-либо дать другое id диву,например <div id="globl_nav"> и соответственно поменять название в стилях....или поменять id для списка- например:
<ul id="nav_menu"> соответственно поменять его в скрипте:
navRoot = document.getElementById("nav_menu");
 

Rozalia

Active Member
Регистрация
24.05.2010
Сообщения
40
Увы, нет, и это не помогает.
Также ломается стиль (искажается внешний вид) навигационного меню в браузерах, а IE (8-я версия) при этом продолжает ничего не показывать.
Вот часть кода HTML:
<head>
<script type="text/javascript" src="javascripts/drop_down.js"></script>
</head>
<body>
<div id="container">
<div id="header"></div>
<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<div class="left">
<div id="nav">
<h2>Меню</h2>
<ul>
<li><a href="index.html">Главная</a>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="2.html">2 страница</a></li>
<li><a href="3.html">3 страница</a></li>
</ul>
</li>
<li><a href="new.html">Новая</a></li>
<li><a href="end.html">Последняя</a></li>
</ul>
</div>
</div>
</td> и т.д.

Часть кода из styles.css:

#nav {
font-family: "Century Gothic", Candara, sans-serif;
color: #C0C0C0;
font-size: 17px;
font-weight: bold;
line-height: 1.2em;
text-align: left;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 265px;
border: 1px solid #DAA520;
}
#nav ul li {
position: relative;
padding: 0;
margin: 0;
}
#nav li ul {
position: absolute;
left: 264px;
top: 0;
display: none;
padding: 0;
margin: 0;
width: 365px;
}
#nav ul li a {
font-family: "Century Gothic", Candara, sans-serif;
font-size: 17px;
color: #b87333;
display: block;
background-color: #000000;
padding: 6px;
border: 1px solid #DAA520;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
/* End */
#nav ul li a:hover {
color: #b5a642;
}
#nav li:hover ul {
display: block;
}
#nav li:eek:ver ul {
display: block;
}

В скрипте знак >> и перенос на новую строку убрала.
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
Увы, нет, и это не помогает.
так Вы же ничего не изменили :blink:
вот в этом кусочке пропишите id для главного списка:
Код:
 <div id="nav">
<h2>Меню</h2>
<ul id="menu_nav">
<li><a href="index.html">Главная</a>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="2.html">2 страница</a></li>
<li><a href="3.html">3 страница</a></li>
</ul>
</li>
<li><a href="new.html">Новая</a></li>
<li><a href="end.html">Последняя</a></li>
</ul>
</div>
соответственно поменяйте скрипт:
Код:
navRoot = document.getElementById("menu_nav");
и не забудте про стили:
Код:
#nav ul#menu_nav{...}
#nav ul#menu_nav li{...}
вроде так...когда пишите код-пользуйтесь значком "<>"

Данный код взят с сервиса www.webmascon.com (http://www.webmascon.com/topics/coding/42a.asp)
статья из которой Вы взяли код-датирована 2004.06.29 ...неужели не нашлось ничего более "свежего"? :blink:
 

Rozalia

Active Member
Регистрация
24.05.2010
Сообщения
40
так Вы же ничего не изменили :blink:
Меняла, но когда ничего не вышло, восстановила старую версию, которую и выложила сюда, чтоб ничто не смущало взор :)
...и не забудте про стили:
Код:
#nav ul#menu_nav{...}
#nav ul#menu_nav li{...}
Именно этого мне и не хватало - во всяком случае, стиль теперь не ломается! Спасибо!
IE опять артачится, значит, буду искать другой скрипт.
вроде так...когда пишите код-пользуйтесь значком "<>"
Договорились :)
статья из которой Вы взяли код-датирована 2004.06.29 ...неужели не нашлось ничего более "свежего"? :blink:
Честно говоря, длительных поисков не проводила. Находила ещё один вариант, но не рабочий.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ