Strict Standards: Resource ID#18 used as offset, casting to integer (18) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#23 used as offset, casting to integer (23) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#25 used as offset, casting to integer (25) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#26 used as offset, casting to integer (26) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401
ТвойWeb :: Многоуровневое меню на стилях...
ТвойWeb ТвойWeb
Качественный Европейский хостинг
 Форум для чайников
 Чат на форуме      Помощь      Поиск      Пользователи


 Страниц (2): [1] 2 » 

> Описание: Нужна помощь, IE не понимает фичи... :(
Поиск в теме | Версия для печати
Ray Wen Администратор
Отправлено: 03 Апреля, 2006 - 02:57:53
Post Id



Собиратель шишек...


Покинул форум
Сообщений всего: 2602
Дата рег-ции: Янв. 2005  
Откуда: Волгоград

Карма 21




 Хочу сделать многоуровневое меню вида
CODE:
<div id="menu">
<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#" id="sub">Новости</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#" id="sub">Sub menu 2</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#" id="sub">Sub menu 2</a>
<ul>
<li><a href="#" id="sub">Sub menu 1</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#" id="sub">Sub menu 3</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#" id="sub">Sub menu 4</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
</ul></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 2</a></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul></li>
<li><a href="#">Sub menu 3</a></li>
<li><a href="#">Sub menu 4</a></li>
</ul>
</li>
</ul>
</div>
(тут кода на 5 уровней)

На каждый уровень приходится прописывать CSS, но не в этом беда... IE не понимает этого... Недовольство, огорчение CSS
CODE:
#menu ul li ul {position: absolute;top: 29px;left: 0; display:none; width:112px}
#menu ul li:hover ul,#main #container #menu ul li.over ul {display: block}

#menu ul li:hover li ul,#menu ul li.over li ul {display: none}
#menu ul li:hover li:hover ul,#menu ul li.over li.over ul {display: block}

#menu ul li:hover ul li:hover ul li ul,#menu ul li.over li.over li ul {display: none}
#menu ul li:hover li:hover li:hover ul,#menu ul li.over li.over li.over ul {display: block}
и т.д. для каждого уровня...

li.over добавлен так как li:hover ослик не понимает... для этого добавлен JS
CODE:
<!--
startList = function() {
navRoot1 = document.getElementById("nav");
Add(navRoot1);

function Add(navRoot) {
if (document.all&&document.getElementById) {
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
for (ii=0; ii<node.childNodes.length; ii++) {
if (node.childNodes[ii].nodeName == "UL") {
if (document.all&&document.getElementById) {
UlNode = node.childNodes[ii];
for (iii=0; iii<UlNode.childNodes.length; iii++) {
UlLiNode = UlNode.childNodes[iii];
if (UlLiNode.nodeName=="LI") {
UlLiNode.onmouseover=function() {
this.className+=" over";
}
UlLiNode.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

}
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
return;
}
}
window.onload=startList;

//-->
стащил у Маркуса... Закатив глазки

Но дальше двух уровней это меню в IE не пашет... Недовольство, огорчение даже просто li на втором уровне не реагирует (в CSS добавлено #menu ul li ul li:hover,#main #container #menu ul li ul li.over{ background:#FFF})

Можно ли заставить эту конструкцию пахать под IE?
 
 Top
Леголегс Администратор
Отправлено: 03 Апреля, 2006 - 15:01:37
Post Id



JS-маньяк


Покинул форум
Сообщений всего: 2109
Дата рег-ции: Июль 2004  
Откуда: Липецк

Карма 17




 О! Брат по разуму! Улыбка Я тоже пытался соорудить такой изврат - выпадающее меню без яваскрипта Улыбка Только я с самого начала предполагал, что ничего путного не получится, а на IE тем более забил принципиально. В итого получилось вот что:
CODE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выпадающее меню на CSS</title>
<style type="text/css">
div.bar {
width: 90%;
left: 5%;
position: absolute;
border: 1px solid black;
}
div.menunode {
/*=general:=*/
overflow: hidden;
width: 150px;
height: 20px;
/*=/general=*/
/*=fancy:=*/
border: 1px solid green;
/*=/fancy=*/
}
div.menunode:hover {
/*=general:=*/
width: 300px;
/*overflow: visible;*/
/*=/general=*/
/*=fancy:=*/

/*=/fancy=*/
}
div.menunode div.menulist {
/*=general:=*/
/*position: relative;*/
/*left: 150px;*/
/*top: -20px;*/
position: absolute;
left: 150px;
width: 150px;
display: none;
/*=/general=*/
/*=fancy:=*/
border: 1px solid red;
/*background: url(redopacbg.png);*/
/*=/fancy=*/
}
div.menunode:hover > div.menulist {
display: block;
}
div.menulisthead {
/*=general:=*/
float: left;
width: 148px;
/*=/general=*/
/*=fancy:=*/

/*=/fa
div.menuitem {
/*=general:=*/
width: 148px;
/*=/general=*/
/*=fancy:=*/

/*=/fancy=*/
}
</style>
</head>
<body>
<div class="bar">
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 1</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 1.1</a>
</div>
<div class="menuitem">
<a href="#">link 1.2</a>
</div>
<div class="menunode">
<div class="menulisthead">
<a href="#">link 1.3</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 1.3.1</a>
</div>
<div class="menuitem">
<a href="#">link 1.3.2</a>
</div>
</div>
</div>
</div>
</div>
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 2</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 2.1</a>
</div>
<div class="menuitem">
<a href="#">link 2.2</a>
</div>
<div class="menuitem">
<a href="#">link 2.3</a>
</div>
</div>
</div>
<div class="menunode" style="clear:both;">
<div class="menulisthead">
<a href="#">link 3</a>
</div>
<div class="menulist">
<div class="menuitem">
<a href="#">link 3.1</a>
</div>
<div class="menuitem">
<a href="#">link 3.2</a>
</div>
<div class="menuitem">
<a href="#">link 3.3</a>
</div>
</div>
</div>
</div>
</body>
</html>

В общем, ИМХО, дохлый это номер. CSS не настолько развит, чтобы только им ограничиваться при создании такого меню. И разные браузеры ведут себя слишком по-разному.
Кроме того после убирания курсора мыши с меню оно ещё некоторое время должно быть видимо, иначе пользоваться им слишком неудобно. Такой эффект без скриптов не реализуем. Разве что появится новый тег
CODE:
<menu></menu>
Подмигивание
И не забывай, что
CODE:
<style>
p a { color:red; }
</style>

относится к ссылкам, находящимся вообще в параграфе, а
CODE:
<style>
p > a { color:red; }
</style>

относится к ссылкам, находящимся непосредственно в параграфе, т.е.
CODE:
<P><a href="#">этот текст красный</a>
<b><a href="#">а этот - нет</a></b>
(разумеется, ИЕ второго варианта не понимает)
 
 Top
Ray Wen Администратор
Отправлено: 03 Апреля, 2006 - 15:34:55
Post Id



Собиратель шишек...


Покинул форум
Сообщений всего: 2602
Дата рег-ции: Янв. 2005  
Откуда: Волгоград

Карма 21




 Леголегс
Да впринципи нашел один способ без жавного меню... не совсем коректный и пока еще окончательно не нашел способ под IE сделать коректное отображение... Найду, отпишусь тогда...
 
 Top
Ray Wen Администратор
Отправлено: 04 Апреля, 2006 - 17:04:08
Post Id



Собиратель шишек...


Покинул форум
Сообщений всего: 2602
Дата рег-ции: Янв. 2005  
Откуда: Волгоград

Карма 21




 Вот тут есть пример меню, даже без JS... конечно там одаптация под IE идет дополнительными тегами только для него, но зато работает... Улыбка Можно дописать CSS под определенное количество выпадающих уровней... Делал на основе этого менюшку, под IE получилось конечно немного коряво, но работает... Улыбка
 
 Top
TvoyWeb Администратор
Отправлено: 04 Апреля, 2006 - 17:12:46
Post Id



Главный здесь


Покинул форум
Сообщений всего: 7072
Дата рег-ции: Нояб. 2003  
Откуда: Tashkent Uz

Карма 52




 Ray Wen
А мне с первого взгляда понравилось. Освобожусь переделаю меню на одном сайте. А то там менюшный JS конфликтует с подсказками Улыбка
 
 Top
Леголегс Администратор
Отправлено: 05 Апреля, 2006 - 10:37:39
Post Id



JS-маньяк


Покинул форум
Сообщений всего: 2109
Дата рег-ции: Июль 2004  
Откуда: Липецк

Карма 17
Ray Wen пишет:
Вот тут есть пример меню, даже без JS... ко
Не заметил признаков меню (Опера7.20)
 
 Top
Ray Wen Администратор
Отправлено: 05 Апреля, 2006 - 12:08:24
Post Id



Собиратель шишек...


Покинул форум
Сообщений всего: 2602
Дата рег-ции: Янв. 2005  
Откуда: Волгоград

Карма 21




 Леголегс
Ну ты бы еще 6.01 взял... Голливудская улыбка На браузеры с истекшим сроком годности не расчитано... Улыбка
 
 Top
Леголегс Администратор
Отправлено: 05 Апреля, 2006 - 12:48:32
Post Id



JS-маньяк


Покинул форум
Сообщений всего: 2109
Дата рег-ции: Июль 2004  
Откуда: Липецк

Карма 17
Ray Wen пишет:
Ну ты бы еще 6.01 взял... На браузеры с истекшим сроком годности не расчитано...
Так! Руки прочь от оперы семь двадцать!Нунчаки Она ничем не хуже шестого осла! Ну ты попал И уж тем более не старее!
*злобно бурча под нос ушёл дописывать своё меню, чтоб даже в linx заработало*
 
 Top
Ray Wen Администратор
Отправлено: 05 Апреля, 2006 - 13:07:12
Post Id



Собиратель шишек...


Покинул форум
Сообщений всего: 2602
Дата рег-ции: Янв. 2005  
Откуда: Волгоград

Карма 21




 Леголегс
Это конечно недостаток, без спорно... но если каждый день прежде чем сделать что-то новое мы будем оглядываться на браузер 3-х летней давности, который не поддерживает и половину возможностей которые нынче внедряются... то ни о каком прогрессе речи быть не может... Осел конечно хуже, но он пока еще достаточно широко распространен, приходится выдумывать всякую береберду, чтобы и в нем было то что поддерживается без проблем остальными...
 
 Top
SviMik Супермодератор
Отправлено: 05 Апреля, 2006 - 16:40:58
Post Id



Где-то там...


Покинул форум
Сообщений всего: 3538
Дата рег-ции: Окт. 2004  
Откуда: Tallinn, Estonia

Карма 4




 Я юзаю оперу 7.23. И не для тестов чтоб знать как в ней мой сайт выглядит. Я её юзаю в повседневной жизни. Софт привык обновлять только когда это надо (чего-то не хватает, не удобно, какие-то баги...). По мне в ней всё ок и меня она устраивает. И то что Вася Пупкин ориентируется на последнии разработки меня не волнует, и без него обойдусь...
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0, скрытых: 0)
« CSS »


Все гости форума могут просматривать этот раздел.
Только администраторы и модераторы могут создавать новые темы в этом разделе.
Только администраторы и модераторы могут отвечать на сообщения в этом разделе.



Форум на AlfaSpace.NET


Powered by ExBB
ExBB FM 1.0 RC1 by TvoyWeb.ru
InvisionExBB Style converted by Markus®
[Script Execution time: 0.0446]     [ Gzipped ]



Notice: ob_end_flush(): failed to send buffer of ob_gzhandler (1) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/page_tail.php on line 33