Помогите плз. с менюшкой ...

Demis · October 29, 2007

Помогите с менюшкой, работает в Мазиле, Опере, IE7 а в IE6 нехочет, в IE6 раскрывается только первый пункт, а всеостальные нет ...

Вот:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript">
  jsHover = function() {
	var hEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0, len=hEls.length; i<len; i++) {
	  hEls[i].onmouseover=function() { this.className+=" jshover"; }
	  hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
	}
  }
  if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
<style type="text/css">
<!--
/* Konteyner 1 */
#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
}
#nav li {
	  float: left;
	  position: relative;
	  background: #f3f3f1;
	padding:7px;
	border:1px solid #f7f7f5;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
.ss1 {
	margin:5px 12px 5px 12px;
}
.ss1 a, .ss1 a:link, .ss1 a:visited, .ss1 a:active, .ss1 a:hover  {
	  font-family:Arial;
	font-size:14px;
	color: #505050;
	font-weight:bold;
	  text-decoration: none;
	border-bottom:1px dashed #505050;
}
/* Konteyner 1 */

/* Konteyner 2 */
#nav li table {
	  display: none;
	position: relative;
	background: #f3f3f1;
	width:180px;
	margin:-22px 0px 0px -1px;
	##margin:-27px 0px 0px -1px;	
}
#nav li:hover table,
#nav li.jshover table {
	  display: block;
	position: absolute;
}
.ss2 {
	margin:6px 10px 5px 13px;
}
.ss2 a, .ss2 a:link, .ss2 a:visited, .ss2 a:active, .ss2 a:hover  {
	  font-family:Arial;
	font-size:14px;
	color: #4c4c4c;
	font-weight:bold;
	  text-decoration: none;
	border-bottom:1px dashed #4c4c4c;
}

.ss3 {
	margin:5px 10px 5px 12px;
}
.ss3 a, .ss3 a:link, .ss3 a:visited, .ss3 a:active, .ss3 a:hover  {
	  font-family:Arial;
	font-size:14px;
	color: #005cb7;
	font-weight:normal;
	  text-decoration: none;
	border-bottom:1px dashed #005cb7;
}
/* Konteyner 2 */

/* Konteyner 3 */
.ss4 {
	background: #f3f3f1;
	border:1px solid #f7f7f5;
	padding:5px 10px 5px 12px;
}
.ss4 a, .ss4 a:link, .ss4 a:visited, .ss4 a:active, .ss4 a:hover  {
	  font-family:Arial;
	font-size:14px;
	color: #4c4c4c;
	font-weight:bold;
	cursor:text;
	  text-decoration: none;
	border-bottom:1px dashed #4c4c4c;
}
/* Konteyner 3 */
-->
</style>
</head>

<body style="background-color:#333333;">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td><ul id="nav">
  <li><div class="ss1"><a href="#null">Масла</a></div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><div class="ss2"><a href="#null">Масла</a></div>
		  <div class="ss3"><a href="#null">Масла —</a></div>
		  <div class="ss3"><a href="#null">Масла —</a></div></td>
		</tr>
	  </table>
 </li>
</ul></td>
	<td>11</td>
	<td><ul id="nav">
  <li><div class="ss1"><a href="#null">Трансмиссионные</a></div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><div class="ss2"><a href="#null">Трансмиссионные</a></div>
		  <div class="ss3"><a href="#null">Синтетические —</a></div>
		  <div class="ss3"><a href="#null">Полусинтетические —</a></div></td>
		</tr>
	  </table>
 </li>
</ul></td>
	<td>11</td>
	<td><ul id="nav">
  <li><div class="ss1"><a href="#null">Минеральные</a></div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><div class="ss2"><a href="#null">Минеральные</a></div>
		  <div class="ss3"><a href="#null">Масла —</a></div>
		  <div class="ss3"><a href="#null">Масла —</a></div></td>
		</tr>
	  </table>
 </li>
</ul></td>
	<td>11</td>
	<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><div class="ss4"><a href="#null">Моторные</a></div></td>
		</tr>
	  </table></td>
  </tr>
</table>
</body>
</html>

Dimitry Wolotko · October 29, 2007

1 - обрамляйте Ваш код тегом code

2 - внимательней выбирайте раздел для сообщения - я его перен?с в "проблемы верстки"

3 - локализуйте максимально проблему - по опыту могу сказать, что решение прид?т быстрее.

Vlad · October 29, 2007

Класс jshover нигде не описан.

Scrum · October 29, 2007

есть отличный пример выпадающего меню без JS, автора к сожалению не помню.

<!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" lang="ru" xml:lang="ru">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 1 June 2005), see www.w3.org" />
<title>menu css</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
/*<![CDATA[*/
/* — menu CSS gordi 20.05.2006 — */
body { FONT: 75%/1.5 arial, verdana, sans-serif; }
#menu {
  FONT-WEIGHT: bold;
  POSITION: relative;
  margin: 0 auto;/*только для demo*/
  width:50%;/*только для demo*/
}
#menu table { BORDER-COLLAPSE: collapse; MARGIN: -1px; }

#menu ul { LIST-STYLE-TYPE: none; MARGIN: 0; PADDING: 0; }
#menu li { FLOAT: left; POSITION: relative; }

/*OP,FF*/
#menu li:hover ul {
  DISPLAY: block;
  LEFT: 0;
  POSITION: absolute;
  TOP: 1.4em;
  WIDTH: 150px;/*1 уровень OP,FF*/
}
/*IE*/
#menu li a:hover ul {
  DISPLAY: BLOCK;
  LEFT: 0;
  POSITION: absolute;
  TOP: 1.4em;
}
/*IE*/
#menu li a:hover li a:hover ul,
#menu li a:hover li a:hover li a:hover ul {
  DISPLAY: block;
  LEFT: 147px;
  POSITION: absolute;
  TOP: 0;
  VISIBILITY: visible;
}
/*IE*/
#menu li a:hover li a ul,
#menu li a:hover li a:hover li a ul {
  DISPLAY: block;
  POSITION: absolute;
  VISIBILITY: hidden;
}
/*OP,FF*/
#menu li:hover li:hover ul,
#menu li:hover li:hover li:hover ul {
  DISPLAY: block;
  LEFT: 147px;
  POSITION: absolute;
  TOP: 0;
  WIDTH: 150px;/*2,3 уровень OP,FF*/
}
/*IE,OP,FF*/
#menu li:hover li:hover ul.left,
#menu li:hover li:hover li:hover ul.left,
#menu li a:hover li a:hover ul.left,
#menu li a:hover li a:hover li a:hover ul.left { LEFT: -154px; }

/*прячем вложения*/
#menu li ul { BORDER: 3px solid #e6eaff; DISPLAY: none; }

/*прячем вложения 1, 2, 3 уровня*/
#menu li:hover li ul,
#menu li:hover li:hover li ul { DISPLAY: none; }

/*IE,OP,FF*/
#menu li a {
  BACKGROUND: #fff;/*фон основного меню*/
  COLOR: blue;/*цвет ссылки основного меню*/
  DISPLAY: block;
  PADDING: 0 10px;
  TEXT-DECORATION: none;
}
/*IE,OP,FF*/
#menu li:hover a,
#menu li a:hover {
  BACKGROUND: #e6eaff;/*фон основ. меню при навед. курсора*/
  COLOR: purple;/*цвет ссылок основ. меню при навед. курсора*/
}
/*IE,OP,FF*/
#menu li li {
  BACKGROUND: #fff;/*фон вып. меню при навед. курсора на ссылку основ. меню*/
  FONT-WEIGHT: normal;
  PADDING: 2px 3px;
}
/*IE,OP,FF*/
#menu li:hover li a,
#menu li:hover li:hover li a,
#menu li:hover li:hover li:hover li a,
#menu li a:hover li a {
  BACKGROUND: #e6eaff;/*фон под ссылкой вып. меню при навед. курсора на основ. меню*/
  BORDER: #000 1px solid;
  COLOR: purple;/*цвет ссылки вып. меню при навед. курсора на основ. меню*/
  DISPLAY: block;
  PADDING: 0 10px;
  WIDTH: 122px;
}
/*IE,OP,FF*/
#menu li:hover li a.drop,
#menu li:hover li:hover li a.drop,
#menu li a:hover li a.drop {
  BACKGROUND: #fff;/*фон ячейки в вып. меню имееющей вложение при навед. курсора на ссылку основ. меню*/
  COLOR: blue;/*цвет ссылки в вып. меню имееющей вложение при навед. курсора на ссылку основ. меню*/
  FONT-WEIGHT: bold;
}
/*IE,OP,FF*/
#menu li:hover li:hover a,
#menu li:hover li:hover li:hover a,
#menu li:hover li:hover li:hover li:hover a,
#menu li a:hover li a:hover {
  BACKGROUND: blue;/*фон ссылок в вып. меню при навед. курсора*/
  COLOR: #fff;/*цвет ссылок в вып. меню при навед. курсора*/
}
/*]]>*/
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Вот<!--[if IE 7]><!--></a><!--<![endif]-->
<!-- первое вложение -->
<table><tr><td>

<ul>
<li><a href="#">Такое</a></li>
<li><a href="#">Меню CSS</a></li>
<li><a class="drop" href="#">Без JavaScript <!--[if IE 7]><!--></a><!--<![endif]-->
<!-- второе вложение -->
<table><tr><td>
<ul>
<li><a href="#">Посмотреть</a></li>
<li><a href="#">Любопытства</a></li>
<li><a class="drop" href="#">Ради <!--[if IE 7]><!--></a><!--<![endif]-->
<!-- третье вложение -->

<table><tr><td>
<ul>
<li><a href="#">На решение</a></li>
<li><a href="#">Данной</a></li>
<li><a href="#">Проблемы</a></li>
</ul>
</td></tr></table>
<!-- End третьего вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
</td></tr></table>
<!-- End второго вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
</ul>

</td></tr></table>
<!-- End первого вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="#">Такое<!--[if IE 7]><!--></a><!--<![endif]-->
<!-- первое вложение -->
<table><tr><td>
<ul>
<li><a href="#">Меню CSS</a></li>
<li><a href="#">Без JavaScript</a></li>
</ul>
</td></tr></table>
<!-- End первого вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="#">Меню CSS<!--[if IE 7]><!--></a><!--<![endif]-->

<!-- первое вложение -->
<table><tr><td>
<ul>
<li><a href="#">Без JavaScript</a></li>
<li><a class="drop" href="#">Нет<!--[if IE 7]><!--></a> <!--<![endif]-->
<!-- второе вложение -->
<table><tr><td>
<ul class="left">
<li><a href="#">Ничего</a></li>
<li><a href="#">Сложного</a></li>
<li><a class="drop" href="#">Сложили <!--[if IE 7]><!--></a><!--<![endif]-->

<!-- третье вложение -->
<table><tr><td>
<ul class="left">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Списки</a></li>
</ul>
</td></tr></table>
<!-- End третьего вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
</td></tr></table>
<!-- End второго вложения -->
<!--[if lte IE 6]></a><![endif]--></li>

</ul>
</td></tr></table>
<!-- End первого вложения -->
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
</div>
</body>
</html>

Demis · October 29, 2007

Спасибо огромное, щас поюзаю ...

klierik · October 29, 2007

2Scrum,

если я не ошибаюсь, это меню будет работать на всех браузерах, за исключением IE6?!

Demis · October 29, 2007

ага точно, работает везде кроме IE6

Scrum · October 29, 2007

2Scrum,
если я не ошибаюсь, это меню будет работать на всех браузерах, за исключением IE6?!

Ошибаетесь ))

klierik · October 29, 2007

Ошибаетесь ))

а разве запись

selector:hover, etc

это не особенность CSS 2.1, которую в свою очередь не поддерживает IE6

он же понимает только a:hover, etc

Scrum · October 29, 2007

Ошибаетесь ))
а разве запись
selector:hover, etc
это не особенность CSS 2.1, которую в свою очередь не поддерживает IE6
он же понимает только a:hover, etc

Да все так и есть, самым убедительным доводом будет если вы попробуете его разобрать (приведенный выше пример)

так вкратце скажу что работает за счет конструкции (он же небольшой баг но в нашу пользу)

<a hover="#">text<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text/a></li>
</ul>
<td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->

Dimitry Wolotko · October 29, 2007

Scrum, вкусно - спасибо.

shkoda · October 30, 2007

Я уже про это упоминала. Можно еще как вариант использовать *.htc файл. Он заставляет IE6 понимать hover не только для ссылок. Код становится чище))

Побробнее можно почитать здесь

http://www.umade.ru/log/2004/07/30.html

http://getbits.info/uroki-frantsuzskogo-3l...lya-oslika-2590

Scrum · October 30, 2007

Scrum, вкусно - спасибо.

на основе такой конструкции можно еще сделать Подсвечивание строк таблицы (найду выложу). Единственный минус, таблица всегда должна быть фиксированной ширины.

Я уже про это упоминала. Можно еще как вариант использовать *.htc файл. Он заставляет IE6 понимать hover не только для ссылок. Код становится чище))
Побробнее можно почитать здесь
http://www.umade.ru/log/2004/07/30.html
http://getbits.info/uroki-frantsuzskogo-3l...lya-oslika-2590

Решение конечно красивое, но все упирается в

"HTC не работают, если пользователь запретил выполнение ActiveX на страницах. Скрипт тоже можно отключить. Кроме того, есть естественное ограничение на номер версии ? не древнее IE 5.5. Так что всегда найдутся пользователи, которым ваши улучшения не помогут ? но что уж с таких ?убогих? взять!"

klierik · October 30, 2007

аа.. так меню построено на основе тега

однажды обдумывал подобную реализацию.

прикольный вариант =)

правда не понял зачем тут разделать условными коментариями...

Scrum · October 30, 2007

правда не понял зачем тут разделать условными коментариями...

а разве запись
selector:hover, etc
это не особенность CSS 2.1, которую в свою очередь не поддерживает IE6

EI7 понимает

klierik · October 30, 2007

ну про ИЕ7 я ничего не говорил. знаю что понимает

Sign In

Помогите плз. с менюшкой ...

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information