Меню на CSS без JS(проблема с FF)

chessman · №1

Есть меню:

http://www.codeproject.com/html/purecssmenus.asp оригинал,

http://www.realcoding.net/article/view/2664 перевод,

http://www.realcoding.net/article/view/2731 продолжение темы.

Все работает, в смысле движок, проблема в FireFox, ссылки во вложенном меню не открываются (ссылаются на ту же страницу, что и самый верхний пункт всплывающего меню), кто подскажет решение?

Чтоб не бегать по ссылкам – код:

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="ru">
<head>
<title>menucss</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
#boxmenu {background: #d7dabd;border: 1px #000 solid;width: 25%;z-index: 1}
#menu * {border-collapse: collapse}
#menu {font: 10pt  Verdana;font-weight: bold;}
.a {background: #d7dabd;color: #f00;font-weight: bold;text-decoration: none}
* HTML .a table,.a table {font: 8pt Verdana;display: block}
table,table A {display: none}
.a:hover {background: #d7dab1;color: blue}
.a:hover table,.menu:hover table {
    background: #d7adbd;
    border: #000 1px solid;
    position: absolute;
    display: block;
    white-space: nowrap
}
.a:hover table A,.menu:hover table A {
    color: #000;
    text-decoration: none;
    border-right: #d7adbd 1px solid;
    padding: 1px 12px;
    display: block;
    white-space: nowrap;
    z-index: 1
}
.a:hover table A:hover,.menu:hover table A:hover {
    background: #f5f5dc;
    color: #000;
    text-decoration: none;
    border: #000 1px solid;
    padding-right: 12px;
    padding-top: 0px;
    padding-left: 11px;
    padding-bottom: 0px;
    display: block;
    z-index: 1
}
.menu {margin: 1px 15px 1px 1px;float: left}
.menu1 {font: 8pt Verdana;font-weight: bold;color: #000}
.a1 {display: none}
.menu1:hover .a1 {padding: 0px 110px;position: absolute;left: -35px;display: block;top: 5px}

</style>
</head>
<body>
<div id="boxmenu">
<div class="menu"><a class="a" href="#1">Меню 1</a></div>
<div class="menu"><a class="a" href="#2">Меню 2<br>
<table><tr><td>
<a href="#3">Меню 2-1</a>
<a href="#4">Меню 2-2</a>
</td></tr></table>
</a></div>
<div class="menu"><a class="a" href="#5">Меню 3<br>
<table><tr><td><a class="menu1" href="#6">Меню 3-1
<div class="a1">
<table><tr><td>
<a href="#7">Меню 3-1-1</a>
<a href="#8">Меню 3-1-2</a>
</td></tr></table>
</div></a>
<a href="#9">Меню 3-2</a>
</td></tr></table>
</a></div>
</div>
</body>
</html>

Длинноват для форума, приношу извинения.

chessman · №2

Забыл добавить в:

Выделить код

Код:

#boxmenu {height:22px;}

иначе в Opera and FF не смотрится

Lynn · №3

А чего вы хотели? У вас таблица вложена в ссылку, поэтому отрабатывает именно эта ссылка. То, что внутри есть ещё ссылки, gecko не волнует, ибо по стандарту их там быть не может.

ЗЫ. Того, кто придумал этот код и тех, кто его пытается использовать, надо расстреливать сразу.

ragnaar · №4

Да-а... ссылки вложенные в ссылки это здорово... Вот только не знаю, плакать тут или смеяться?

Al_H · №5

ragnaar
Наверное, плакать. Как я понимаю, без этого Ёксплорер не понимает.

vladmir · №6

chessman

Все работает, в смысле движок

А что значит "движок", когда речь о HTML + CSS?

проблема в FireFox, ссылки во вложенном меню не открываются (ссылаются на ту же страницу, что и самый верхний пункт всплывающего меню)

Хм, смотрю в SeaMonkey-1a Firefox-1.0 и ИЕ-6

SeaMonkey 1a
Не выпадает меню третьего уровня,
меню первого и второго уровня:
при наведедении ссылки отображаются правильно (в статусе)
при клике ссылки передаются в адресную строку правильно

Firefox 1.0
выпадает меню третьего уровня,
меню первого уровня:
при наведедении ссылки отображаются правильно (в статусе)
при клике ссылки передаются в адресную строку правильно
меню второго и третьего уровня:
при наведедении ссылки отображаются НЕ правильно (в статусе)
при клике ссылки отображаются в статусе правильно, но НЕ передаются в адресную строку
при открытии в новом табе ссылки передаются в адресную строку правильно

ИЕ6
выпадает меню третьего уровня,
меню первого уровня:
при наведедении ссылки отображаются правильно (в статусе)
при клике ссылки передаются в адресную строку правильно
меню второго и третьего уровня:
при наведедении ссылки отображаются НЕ правильно (в статусе)
при клике ссылки отображаются в статусе правильно, правильно передаются в адресную строку

Lynn

таблица вложена в ссылку

Да, таблица - это не кузяво.

ragnaar

Да-а... ссылки вложенные в ссылки это здорово... Вот только не знаю, плакать тут или смеяться?

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

chessman
Кстати, (или не кстати) не забывайте проверять свои произведения при дефолтном размере шрифта в 16 пикселей.

Lynn · №7

vladmir
Всё просто. Попытки сделать выпадающее меню без скриптов для IE заранее обречены на неудачу или таких вот кадавров, которых потом замучаешся подпирать, что б работали везде.

Sergeys · №8

Посмотрите здесь, может поможет: Выпадающие меню с помощью CSS
Вот пример, который работает в Firefox, Opera и IE, причем одинаково!!!

Отредактировано Sergeys (25-10-2005 18:44:41)

Lynn · №9

Sergeys
Только для IE он работает на JS. Что, в общем-то, и правильно. Ибо для чего ещё использовать JS, как не для интерактива всякого, типа выпадающих менюшек? :rolleyes:

chessman · №10

Lynn

Того, кто придумал этот код и тех, кто его пытается использовать, надо расстреливать сразу

Даже так? Круто. Некто БОМЖ решил переквалифицироваться, читая посты Вашего ЖЖ не думал, что Вы так кровожадны.
О стандартах, есть не плохая статья:

http://softwaremaniacs.org/blog/2005/10/02/well-formed-valid-conformant/

Да и Ваш журнал невалиден, не далее как сегодня, 63 ошибки, посмотрел ради спортивного интереса.

ragnaar

Да-а... ссылки вложенные в ссылки это здорово... Вот только не знаю, плакать тут или смеяться?

Можно посмеяться да и поплакать не грех. Таблицы в таблицы, DIVы в DIVы, списки в списки, а вот ссылки в ссылки нельзя, жаль господа из W3C не подумали и об этом.

vladmir

А что значит "движок", когда речь о HTML + CSS?

Это значит, что все крутится на основе псевдо-класса :hover и ничего более.

За дальнейшие разъяснения спасибо.

Не являюсь фанатом того или иного браузера, для прогулок в INET использую почти все. Бывает интересно посмотреть именно в разных, могу отметить, что основная масса сайтов заточена под IE и это ни для кого не секрет. Меню, о котором идет речь прекрасно работает и в IE6 и в OPERA 7.50(8.01), причем без JavaScript, это говорит о многом.
Что касается времени и усилий на создание меню на CSS без JS, кто занимался этим серьезно? Все штампуют на JavaScript и довольны, а проблем по большому счету там не меньше, хотя вот на это стоит посмотреть:

http://www.brainjar.com/dhtml/menubar/default.asp

Простенько, но со вкусом, только размер, да еще бы коде разобраться…

Sergeys

С этого, как раз и начинался путь поиска приличной навигации для сайта. Ссылка на данный ресурс и обсуждение статьи есть в ссылке (какая тавтология) "продолжение темы" в первом моем посте.

Lynn · №11

chessman
Не надо переходить на личности.

По поводу валидности дневника все вопросы к livejournal.com

Господа в w3c думали о том, что ссылка это ссылка и им даже в страшном сне не могло привидется, что кто-то попытается их использовать для других целей.

chessman · №12

Lynn

Согласен. Не будем стрелять друг в друга.

Открывая тему, с недостатками меню познакомился на собственном опыте, не станешь же указывать, работать с меню в Mozilla and FireFox надо через Shift, был задан вопрос автору по третьей ссылке из первого поста, молчит как партизан на допросе, хотя возможно знает ответ.

Попытка сделать меню по оригинальной статье: таблица. в одной ячейке меню для IE and OPERA в другой
для MOZ and FF с хаком для Moziilla оказалась не удачной из за разного понимания visibility: hidden и visibility: visible, это особенно заметно если в #holder добавить border: 1px #000 solid, визуально в Moz и FF
выглядит предпочтительней хотя и неправильно, для понимания о чем речь помог бы скриншот, но не знаю как этой фишкой пользоваться.

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

Вывод: пишем (стараемся писать) в рамках стандартов даже если в силу объективных причин иногда это невозможно!

Всем спасибо за участие в обсуждении.

Тему можно закрыть.

Полезная информация

№124-10-2005 20:27:20