Основное меню

Создание горизонтального выпадающего меню

И так, начнем. Прежде чем начинать строить структуру меню, хочу сразу предупредить, что создавать больше четырех уровней не стоит, так как это будет доставлять неудобства для пользователей. Внесите следующий код в пустой HTML-файл:

<DIV id="boxmenu">
<TABLE><TR><TD>
<DIV id="m">

<DIV class="menu"><A class="a" href="#">Главная страница</A></DIV>

<DIV class="menu"><A class="a" href="#">Музыка<BR>

<!--первое вложение "Музыка"-->
<TABLE>
<TR><TD>
<DIV><A href="#">Рок</A></DIV>
<DIV><A href="#">Попса</A></DIV>
<DIV><A href="#">Джаз</A></DIV>
<DIV><A href="#">Регги</A></DIV>
</TD></TR>
</TABLE></A>
</DIV>

<DIV class="menu"><A class="a" href="#">Игры<BR>

<!--первое вложение "Игры"-->
<TABLE>
<TR><TD>
<DIV>
<A class="menu1" href="#">Стрелялки

<!--второе вложение "Игры - Стрелялки"-->
<DIV class="a1">
<TABLE>
<TR><TD><A href="#">ConterStrike</A></TD></TR>
<TR><TD><A href="#">Unreal</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A href="#">Гонки</A></DIV>
<DIV><A href="#">Стратегии</A></DIV>
<DIV><A href="#">Бродилки</A></DIV>
<DIV><A href="#">Квесты</A></DIV>
</TD></TR>
</TABLE>
</A>
</DIV>

<DIV class="menu"><A class="a" href="#">Книги<BR>

<!--первое вложение "Книги"-->
<TABLE>
<TR><TD>
<DIV><A class="menu1" href="#">Фантастика

<!--второе вложение "Книги - Фантастика"-->
<DIV class="a1">
<TABLE>
<TR><TD><A class="menu2" href="#">Книга-1

<!--третье вложение "Книги - Фантастика - Книга-1"-->
<DIV class="a2">
<TABLE>
<TR><TD><A href="#">Глава-1</A></TD></TR>
<TR><TD><A href="#">Глава-2</A></TD></TR>
<TR><TD><A href="#">Глава-3</A></TD></TR>
</TABLE>
</DIV></A></TD></TR>
<TR><TD><A href="#">Книга-2</A></TD></TR>
<TR><TD><A href="#">Книга-3</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A href="#">Романы</A></DIV>
<DIV><A href="#">Детективы</A></DIV>
</TD></TR>
</TABLE>
</A></div>

<DIV class="menu"><A class="a" href="#">Программы<BR>

<!--первое вложение "Программы"-->
<TABLE>
<TR><TD>
<DIV>
<A class="menu1" href="#">MS Office

<!--второе вложение "Программы - MS Office"-->
<DIV class="a1">
<TABLE>
<TR><TD><A href="#">MS Word</A></TD></TR>
<TR><TD><A href="#">MS Exel</A></TD></TR>
<TR><TD><A href="#">MS PowerPoint</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
<DIV><A class="menu1" href="#">Adobe

<!--второе вложение "Программы - Adobe"-->
<DIV class="a1">
<TABLE>
<TR><TD><A class="menu2" href="#">Photoshop

<!--третье вложение "Программы - Adobe - Photoshop"-->
<DIV class="a2">
<TABLE>
<TR><TD><A class="menu3" href="#">Кисти

<!--четвертое вложение "Программы - Adobe - Photoshop - Кисти"-->
<DIV class="a3">
<TABLE>
<TR><TD><A href="#">Кисть-1</A></TD></TR>
<TR><TD><A href="#">Кисть-2</A></TD></TR>
<TR><TD><A href="#">Кисть-3</A></TD></TR>
</TABLE>
</DIV>
</A></TD></TR>
<TR><TD><A href="#">Стили</A></TD></TR>
<TR><TD><A href="#">Градиенты</A></TD></TR>
<TR><TD><A href="#">Формы</A></TD></TR>
</TABLE>
</DIV></A></TD></TR>
<TR><TD><A href="#">FlashPlayer</A></TD></TR>
<TR><TD><A href="#">ImageReady</A></TD></TR>
</TABLE>
</DIV>
</A></DIV>
</TABLE>
</A></DIV>
</DIV>
</TD></TR></TABLE>
</DIV>

Следующее что нужно сделать, конечно задать стили для нашего меню:

/*для позиционирования при верстке страниц слоями,
при табличной верстке можно вернуться к оригиналу*/
#boxmenu {
BACKGROUND: #f6f6f6;
BORDER: 1px #ccc solid;
POSITION: relative;
WIDTH: 700px;
LEFT: 13%;
Z-INDEX: 1/*для IE*/
}

/*без этого нарушается работа меню*/
#m * {
BORDER-COLLAPSE: collapse
}

/*стили основного меню*/
#m {
FONT: 10pt Verdana, sans-serif;
FONT-WEIGHT: bold
}

/*стиль ссылок основного меню*/
.a {
COLOR: #666;
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 {
TEXT-DECORATION: underline;
COLOR: #999999
}

.menu:hover {
COLOR: #666;
BORDER: #666 0px solid/*для OP*/
}

/*стили выпадающего меню при на ведении курсора*/
#m .a:hover table {
BACKGROUND: #f6f6f6;
BORDER: #ccc 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}

.menu:hover table {
BACKGROUND: #f6f6f6;
BORDER: #ccc 1px solid;
POSITION: absolute;
DISPLAY: block;
WHITE-SPACE: nowrap
}

#m .a:hover table A {
COLOR: #666;
TEXT-DECORATION: none;
BORDER-RIGHT: #666666 1px solid; /*дрожание по горизантали*/
PADDING: 1px 12px; /*отступы выпад меню*/
DISPLAY: block;
WHITE-SPACE: nowrap
}

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

/*стиль ссылок вып. меню при наведении курсора*/
#m .a:hover table A:hover {
BACKGROUND: #fff;
COLOR: #666;
TEXT-DECORATION: none;
BORDER: #999 1px solid;/*дрожание по вертикали*/
PADDING-RIGHT: 12px;
PADDING-TOP: 0px;
PADDING-LEFT: 11px;
PADDING-BOTTOM: 0px;
DISPLAY: block
}

#m .menu:hover table A:hover {
BACKGROUND: #fff;
COLOR: #666;
TEXT-DECORATION: none;
BORDER: #999 1px solid;
PADDING-RIGHT: 12px;
padding-top: 0px;
PADDING-LEFT: 11px;
PADDING-BOTTOM: 0px;
DISPLAY: block
}

.menu {
MARGIN: 0 10px;
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.css и подключаем его к HTML-странице, расположив следующий код между тегами <head></head>:

<link href="style.css" rel="stylesheet" type="text/css" />

На этом все, создание меню окончено.
Хочу заметить, что чистота кода и валидность, которые проверялись в программе topStyle Pro 3.10, носит не очень положительный характер. И все таки программы пишут люди и topStyle Pro 3.10 еще не показатель, так что смотрите сами.
Исходные файлы можно скачать ниже.

Скачать файл
размер файла: 2,73 Kb
cкачиваний: 56

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.