Горизонтальное меню с вложениями на CSS без JavaScript

Данная заметка является продолжением темы поднятой в статье: Динамическое выпадающие меню для IE без использования скриптов JavaScript и ни в коей мере не претендует на окончательное решение этой проблемы.

 

Методы и приемы (основой является выше указанная статья) только демонстрируют, что создание меню на CSS без JavaScript возможно. Традиционный подход создания меню на CSS это списки и обязательный JavaScript для нормальной работы в InternetExplorer. К сожалению проблем у меню на CSS+JavaScript более чем достаточно, подробно об этом можно почитать здесь, а на форуме дискуссию по этому поводу.

Ниже находится фрагмент меню:

  • "Меню 0" не имеет вложений
  • "Меню 1" одно вложение
  • "Меню 2" два вложения
  • "Меню 3" три вложения
  • "Меню 4" четыре вложения
  • "Меню 5" нет вложений


Сразу надо отметить, что делать больше трех вложений нет необходимости, это может оказаться неудобным для пользователей, четыре вложения сделаны лишь для демонстрации возможностей данного меню.
В "Меню 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;
    Z-INDEX: 1
}

#m .menu:hover table A {
    COLOR: #000;
    TEXT-DECORATION: none;
    BORDER-RIGHT: #7da6ee 1px solid;
    PADDING: 1px 12px;/*отступы в подменю выпад. меню*/
    DISPLAY: block;
    WHITE-SPACE: nowrap;
    Z-INDEX: 1
}

/*стиль ссылок вып. меню при наведении курсора*/
#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;
    Z-INDEX: 1
}

#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;
    Z-INDEX: 1
}

.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. Возможно, будет работать и в более ранних версиях указанных браузеров.



Опубликовал admin
24 Июн, Пятница 2005г.



Программирование для чайников.