VPF::4-х уровневое выпадающее меню - Форум программистов

kizune

Дата 11.10.2007, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: нет
Всего: 9

здравствуйте,все.

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

Код


 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <title></title>
<style type="text/css">

</style>
<script type="text/javascript" language="javascript">
<!--//--><![CDATA[//><!--
    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>
</head>
<body>
<ul id="nav">
    <li><a href="#null">Домой</a></li>
    <li><a href="#null">Каталог</a>
        <ul>
            <li><a href="#null">Вся продукция</a>
                <ul>
                    <li><a href="#null">По дате</a></li>
                    <li><a href="#null">Производители</a></li>
                    <li><a href="#null">Другое</a></li>
                </ul>
            </li>
            <li><a href="#null">Молотки</a>
                <ul>
                    <li><a href="#null">По дате</a>                    
                        <ul>
                            <li><a href="#null">По дате</a></li>
                            <li><a href="#null">По производителю</a></li>
                        </ul>                    
                    
                    </li>
                    <li><a href="#null">По производителю</a></li>
                </ul>
            </li>
            <li><a href="#null">Гвозди</a></li>
            <li><a href="#null">Доски</a></li>
        </ul>
    </li>
    <li><a href="#null">Новости</a>
        <ul>
            <li><a href="#null">Новости сайта</a>
            </li>
            <li><a href="#null">Новости компании</a>
                <ul>
                    <li><a href="#null">Архив</a></li>
                    <li><a href="#null">Пресс-релизы</a></li>
                    <li><a href="#null">Разное</a></li>
                </ul>
            </li>
            <li><a href="#null">Архив</a></li>
        </ul>
    </li>
    <li><a href="#null">Контакты</a></li>
</ul>
</body>
</html>

Код


#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #515151;
  background: none;
}
#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 120px;
  padding: 4px 10px;
  background: url(dot.png) repeat-y right;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover,
#nav li.jshover {
  background: #333;
}
#nav li ul {
  display: none;
  position: absolute;
  background: #ccc;
  padding: 8px 0;
  width: 138px;
}
#nav li li a {
  width: 118px;
  background: none;
}
#nav li:hover ul,
#nav li.jshover ul {
  display: block;
}
#nav li:hover li ul,
#nav li.jshover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  left: 133px;
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
  display: block;
}

может у кого есть есть ссылки или кто-либо делал.
спасибо

SelenIT

Дата 11.10.2007, 23:07 (ссылка)

(голосов:1)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

kizune, вот... потому что, имхо, баловство все эти "как бы pure CSS"-меню. Максимум - проба/демонстрация технологии или интеллектуальная забава вроде шахматной задачи. А на практике ничего "крутого" в этом нет...

В данном случае CSS прописан только до третьего уровня, ко всему, что вложено глубже, применяются те же стили - вот почему 4-й уровень выпадает вместе с третьим. Чтоб работало, нужно изменить строки 47-58 в CSS:

Код


#nav li:hover li ul,
#nav li.jshover li ul,
#nav li:hover li:hover ul li ul,
#nav li.jshover li.jshover ul li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  /*left: 133px; Кстати, зачем второй left? из-за него в IE невозможно дотянуться до подменю...( */
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul,
#nav li:hover li:hover li:hover ul,
#nav li.jshover li.jshover li.jshover ul {
  display: block;
}

Для 5-го уровня придется дописать еще один "этаж" li:hover и li.jshover...

Но, имхо, даже для трехуровневой структуры уже лучше взять нормальное JS-меню, а не издеваться над CSS, явно не предназначенным для таких задач. Без JS ведь все равно не обходится, а с JS можно сделать намного проще для себя и удобнее для юзера. Например, при случайном уводе с 4-го уровня вложения тут же исчезает вся раскрытая ветвь (начинай, дорогой юзер, сначала...) - в JS-меню это элементано решается таймаутом. Да и готовых решени существует куча - например, такое...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

kizune

Дата 12.10.2007, 09:05 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: нет
Всего: 9

спасибо большое smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »