Вы не авторизированы! Логин:  Пароль:  Запомнить:    Зарегистрироваться
Забыл пароль
 
 
 

Выпадающие CSS меню без JavaScript

SVD programming - Программирование Delphi, HTML, PHP, CGI. Обзоры софта, ReactOS и многое другое...
 
Главная - Новости - Публикации - Файлы - Ссылки - Форум Обратная связь
 


Друзья сайта ::

Сайтом управляют ::

Друзья сайта ::
HTML, CSS » Выпадающие CSS меню без JavaScript
Автор: Admin / Дата: 04:55 05.02.2006
Комментарии: Комментарии (3)
Выпадающие CSS меню без JavaScript
Рейтинг статьи: 0
Данная заметка является продолжением темы поднятой в статье: Динамическое выпадающие меню для 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. Возможно, будет работать и в более ранних версиях указанных браузеров.

Источник: http://webmastak.com
Автор : Admin
Комментарии: Комментарии (3)

Внимание!

Друзья сайта
Голосование ::
Случайные статьи ::
Добавления в форуме ::
Новые комментарии ::
Пользователи on-line ::
0 пользователь, 55 гостей
 
Страница создана за 0.01 секунд

SQL общее время: 0.003 секунд
SQL запросов всего: 15
Администрация сайта не несет ответственности за содержание рекламных материалов, а так же за информацию размещаемой посетителями. При использовании материалов сайта ссылка на svdpro.info обязательна.

Powered by LDU 802

Рейтинг@Mail.ru
Copyright © 2005 - 2011 «SVD Programming»
Версия сайта для коммуникаторов
Обратная связь - Карта сайта