Данная заметка является продолжением темы поднятой в статье: Динамическое выпадающие меню для IE без использования скриптов JavaScript и ни в коей мере не претендует на окончательное решение этой проблемы.
Методы и приемы (основой является выше указанная статья) только демонстрируют, что создание меню на CSS без JavaScript возможно. Традиционный подход создания меню на CSS это списки и обязательный JavaScript для нормальной работы в InternetExplorer. К сожалению проблем у меню на CSS+JavaScript более чем достаточно, подробно об этом можно почитать здесь, а на форуме дискуссию по этому поводу.
Сразу надо отметить, что делать больше трех вложений нет необходимости, это может оказаться неудобным для пользователей, четыре вложения сделаны лишь для демонстрации возможностей данного меню.
В "Меню 5" при желании можно сделать вложение таким образом, чтобы оно раскрывалось влево, но по вполне понятным причинам лучше от вложений здесь воздержаться.
Сокращения в коментариях:
InternetExplorer - IE
Opera - OP
FireFox - FF
Mozilla - MOZ
Стили (группирование, в целях уменьшения размера, для наглядности не применялось):
Код:
<STYLE type=text/css>
/*для позиционирования при верстке страниц слоями,
при табличной верстке можно вернуться к оригиналу*/
#boxmenu {
BACKGROUND: #7da6ee;
BORDER: 0px #000 solid;
POSITION: relative;
LEFT: 335px;
WIDTH: 357px;
Z-INDEX: 1/*для IE*/
}
/*без этого нарушается работа меню*/
#m * {
BORDER-COLLAPSE: collapse
}
/*стили основного меню*/
#m {
FONT: 10pt Verdana, sans-serif;
FONT-WEIGHT: bold
}
/*стиль ссылок основного меню*/
.a {
BACKGROUND: #7da6ee;
COLOR: #000;
TEXT-DECORATION: none
}
/*стили выпадающего меню для IE*/
* HTML #m .a table {
FONT: 8pt Verdana, sans-serif;
DISPLAY: block
}
/*стили выпадающего меню*/
.a table {
FONT: 8pt Verdana, sans-serif;
DISPLAY: block
}
/*скрывает выпадающие меню*/
#m table {
DISPLAY: none
}
#m table A {
DISPLAY: none
}
/*смена стилей при на ведении курсора*/
#m .a:hover {
BACKGROUND: #000;
COLOR: #fff
}
.menu:hover {
BACKGROUND: #7da6ee;
COLOR: #000;
BORDER: #000 0px solid/*для OP*/
}
/*стили выпадающего меню при на ведении курсора*/
#m .a:hover table {
BACKGROUND: #7da6ee;
BORDER: #000 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}
.menu:hover table {
BACKGROUND: #7da6ee;
BORDER: #000 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}
#m .a:hover table A {
COLOR: #000;
TEXT-DECORATION: none;
BORDER-RIGHT: #7da6ee 1px solid;/*дрожание по горизантали*/
PADDING: 1px 12px;/*отступы выпад меню*/
DISPLAY: block;
WHITE-SPACE: nowrap
}
#m .menu:hover table A {
COLOR: #000;
TEXT-DECORATION: none;
BORDER-RIGHT: #7da6ee 1px solid;
PADDING: 1px 12px;/*отступы в подменю выпад. меню*/
DISPLAY: block;
WHITE-SPACE: nowrap
}
/*стиль ссылок вып. меню при наведении курсора*/
#m .a: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
}
#m .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
}
.menu {
MARGIN: 1px;
FLOAT: left
}
/*стили второго вложения*/
.menu1 {
FONT: 8pt Verdana, sans-serif;
FONT-WEIGHT: bold;
COLOR: #000
}
.a1 {
DISPLAY: none
}
.menu1:hover .a1 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -40px;
TOP: 5px
}
.menu1:hover {
DISPLAY: block
}
/*стили третьего вложения*/
.menu2 {
FONT: 8pt Verdana, sans-serif;
FONT-WEIGHT: bold;
COLOR: #000
}
.a2 {
DISPLAY: none
}
.menu2:hover .a2 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -35px;
TOP: 5px
}
.menu2:hover {
DISPLAY: block
}
/*стили четвертого вложения*/
.menu3 {
FONT: 8pt Verdana, sans-serif;
FONT-WEIGHT: bold;
COLOR: #000
}
.a3 {
DISPLAY: none
}
.menu3:hover .a3 {
PADDING: 0px 115px;/*для FF*/
POSITION: absolute;
DISPLAY: block;
FLOAT: left;
LEFT: -30px;
TOP: 5px
}
.menu3:hover {
DISPLAY: block
}
</STYLE>
Примечание:
/*стили выпадающего меню для IE*/
* HTML #m .a table {
FONT: 8pt Verdana, sans-serif;
DISPLAY: block
}
Хак для IE. Решает проблему самопроизвольного открытия меню в IE. Более подробно о хаках - в статье Влада Мержевича "Каждому браузеру свой стиль", вообще данный сайт один из лучших по WEB-строительству.
Описание стилей в оригинальной статье.
Код:
<DIV id="boxmenu">
<TABLE><TR><TD>
<DIV id="m">
<DIV class="menu"><A class="a" href="#">Меню 0</A></DIV>
<DIV class="menu"><A class="a" href="#">Меню 1<BR>
<!--первое вложение-->
<TABLE>
<TR><TD>
<DIV><A href="#">Пункт 1</A></DIV>
<DIV><A href="#">Пункт 2</A></DIV>
<DIV><A href="#">Пункт 3</A></DIV>
<DIV><A href="#">Пункт 4</A></DIV>
<DIV><A href="#">Пункт 5</A></DIV>
</TD></TR>
</TABLE>
</A>
</DIV>
<DIV class="menu"><A class="a" href="#">Меню 2<BR>
<!--первое вложение-->
<TABLE>
<TR><TD>
<DIV>
<A class="menu1" href="#">Пункт 1
<!--второе вложение-->
<DIV class="a1">
<TABLE>
<TR><TD><A href="#">Пункт 11</A></TD></TR>
<TR><TD><A href="#">Пункт 12</A></TD></TR>
<TR><TD><A href="#">Пункт 13</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A href="#">Пункт 2</A></DIV>
<DIV><A href="#">Пункт 3</A></DIV>
<DIV><A href="#">Пункт 4</A></DIV>
<DIV><A href="#">Пункт 5</A></DIV>
</TD></TR>
</TABLE>
</A>
</DIV>
<DIV class="menu"><A class="a" href="#">Меню 3<BR>
<!--первое вложение-->
<TABLE>
<TR><TD>
<DIV><A href="#">Пункт 1</A></DIV>
<DIV><A class="menu1" href="#">Пункт 2
<!--второе вложение-->
<DIV class="a1">
<TABLE>
<TR><TD><A class="menu2" href="#">Пункт 21
<!--третье вложение-->
<DIV class="a2">
<TABLE>
<TR><TD><A href="#">Пункт 211</A></TD></TR>
<TR><TD><A href="#">Пункт 212</A></TD></TR>
<TR><TD><A href="#">Пункт 213</A></TD></TR>
</TABLE>
</DIV></A></TD></TR>
<TR><TD><A href="#">Пункт 22</A></TD></TR>
<TR><TD><A href="#">Пункт 23</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A href="#">Пункт 3</A></DIV>
<DIV><A href="#">Пункт 4</A></DIV>
<DIV><A href="#">Пункт 5</A></DIV>
</TD></TR>
</TABLE>
</A></div>
<DIV class="menu"><A class="a" href="#">Меню 4<BR>
<!--первое вложение-->
<TABLE>
<TR><TD>
<DIV>
<A class="menu1" href="#">Пункт 1
<!--второе вложение-->
<DIV class="a1">
<TABLE>
<TR><TD><A href="#">Пункт 11</A></TD></TR>
<TR><TD><A href="#">Пункт 12</A></TD></TR>
<TR><TD><A href="#">Пункт 13</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A class="menu1" href="#">Пункт 2
<!--второе вложение-->
<DIV class="a1">
<TABLE>
<TR><TD><A class="menu2" href="#">Пункт 21
<!--третье вложение-->
<DIV class="a2">
<TABLE>
<TR><TD><A class="menu3" href="#">Пункт 211
<!--четвертое вложение-->
<DIV class="a3">
<TABLE>
<TR><TD><A href="#">Пункт 2111</A></TD></TR>
<TR><TD><A href="#">Пункт 2112</A></TD></TR>
<TR><TD><A href="#">Пункт 2113</A></TD></TR>
</TABLE>
</DIV>
</A></TD></TR>
<TR><TD><A href="#">Пункт 212</A></TD></TR>
<TR><TD><A href="#">Пункт 213</A></TD></TR>
</TABLE>
</DIV></A></TD></TR>
<TR><TD><A href="#">Пункт 22</A></TD></TR>
<TR><TD><A href="#">Пункт 23</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A href="#">Пункт 3</A></DIV>
<DIV><A href="#">Пункт 4</A></DIV>
<DIV><A href="#">Пункт 5</A></DIV>
</TD></TR>
</TABLE>
</A></DIV>
<DIV class="menu"><A class="a" href="#">Меню 5</A></DIV>
</DIV>
</TD></TR></TABLE>
</DIV>
Особенностей не имеет.
В заключении хотелось остановиться на проблеме чистоты кода: проверка стилей в программе TopStyle Pro 3.10 показала неутешительные результаты, как и проверка HTML кода на валидность. На мой взгляд, к этому надо относиться с известной долей сомнения, все спецификации пишутся людьми, к тому же они не имеют силы закона, а являются только рекомендацией по использованию, но мы знаем, как относятся к данным рекомендациям производители браузеров. Но все это не должно исключать стремления к уменьшению числа ошибок.
В качестве любопытного примера: главная страничка сайта первого лица России. Проверив стили на соответствие в TopStyle Pro 3.10, вы будете "приятно" удивлены количеством ошибок.
Меню протестировано в IE 6, в Opera 7.50, 8.01 Final, в FireFox 1.0 и Mozilla-1.7.7. Возможно, будет работать и в более ранних версиях указанных браузеров.
