Nadin Design  
EnglishFrenchGermanItalianDutchRussianPortugueseJapaneseKorean ArabicChinese Simplified Spain
Творческая мастерская профессора Трубочкиной Надежды Константиновны
 
Web-дизайн (WD)


    Задания по курсам "Web-дизайн" и "Web-технологии" (2-ое продолжение)


CSS DROP MENU - выпадающие меню на основе HTML и CSS


За основу взят пример с сайта http://www.psdgraphics.com/demos/black-horizontal-dropdown-menu/menu.html

Это меню для трехуровнего сайта. Структура такого сайта выглядит так: Главная - Страницы 2-го уровня - Страницы 3-го уровня.

Я усложню пример, и мы разберем главное меню 4-уровневого сайта.

Пример можно скачать здесь.

Структура 4-уровневого сайта и основные файлы главной навигации с выпадающими меню этого примера представлены в таблице.

Структура сайта html-файл (dm.html) dropdown-menu.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Menu - PSDGraphics.com</title>

<link href="css/dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>

<br />
<br />

<ul id="navigation" class="nav-main">
<li><a href="index.html">Главная</a></li>
<li class="list"><a href="#">Продукты</a>
<ul class="nav-sub">
<li><a href="#">Security Software</a></li>
<li><a href="#">Браузеры</a></li>
<li><a href="#">Software для бизнеса</a></li>
<li><a href="#">Коммуникации</a></li>
<li><a href="#">Инструменты развития</a></li>
<li><a href="#">Цифровое фото</a></li>
<li><a href="#">Mac Software</a></li>
</ul>
</li>
<li class="list"><a href="#">Обзоры</a>
<ul class="nav-sub">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li class="list"><a href="#">3.3</a>
<ul class="nav2-sub">
<li><a href="#">3.3.1</a></li>
<li><a href="#">3.3.2</a></li>
<li><a href="#">3.3.3</a></li>
<li><a href="#">3.3.4</a></li>
</ul>
</li>
<li><a href="#">3.4</a></li>
<li><a href="#">3.5</a></li>
<li><a href="#">3.6</a></li>
<li><a href="#">3.7</a></li>
</ul>
</li>
<li><a href="#">Загрузки</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</body>
</html>

#navigation {
margin:0;
padding: 0;
clear:both;
width:950px;
height:51px;
background: #d6eaf8 url(../images/dropdown-bg.gif) repeat-x left top;
}
ul.nav-main,
ul.nav-main li {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main {
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul {
visibility: visible;
}
ul.nav-main li.hover,
ul.nav-main li:hover {
position: relative;
z-index: 599;
cursor: pointer;
background: url(../images/dropdown-bg-hover.gif) repeat-x left top;
}
ul.nav-main li {
float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
background: url(../images/separator.gif) no-repeat right center;
}
ul.nav-main li a {
display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
ul.nav-main li a:hover {
color:#D6D6D6;
}
ul.nav-main *.list {

padding-right: 22px;
background: url(../images/navigation-arrow.gif) no-repeat right top;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}
/* nav2-sub */
ul.nav2-sub {
visibility: hidden;
position: absolute;
padding:10px;
top: 29px;
left: 20;
z-index: 598;
background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
ul.nav2-sub li {
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
background: none;
}
ul.nav2-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}


 

Вы можете поэкспериментировать с цветом, размерами, положением выпадающих меню.

Не забывайте о правиле контраста: цвет текста и фона под ним должны быть максимально контрастны.

 


 

 

Далее мы рассмотрим вторую технологию верстки сайтов - блочную верстку

 

 

 

 

 

 

© 1998-2015 ND  
Сделать стартовой Напечатать страницу Назад  
Добавить в избранное Закрыть окно Вперед
Яндекс цитирования Rambler's Top100