| Уроки CSS |
| Создание горизонтального выпадающего меню в CSS |
Для создания горизонтального выпадающего меню за основу будет взято меню из этого урока.
Цветовая гамма для выпадающих пунктов будет подобрана так, что бы была похожа на основное меню.
Основные параметры для выпадающего горизонтального меню:
float: left; - благодаря этому параметру основное меню становится горизонтальным;
float: none; - определяет, что дополнительные пункты будут выпадать вертикально;
margin-left: 12px; - параметр, определяющий размер отступа выпадающих пунктов от левого края основного пункта (подобран так, что края основного и дополнительного пункта совпадают );
display: block; - этот параметр задаёт пунктам меню свойства блока, с помощью чего можно задать внешние и внутренние отступы – то есть задать размеры пунктов меню;
display: none; - элемент невидим (пока на него не наведут курсор мышки);
position: absolute; - означает, что весь контент будет находиться в фиксированном положении относительно подпунктов;
Значение остальных параметров вам должно быть знакомо из предыдущих уроков по CSS, а так же уроков HTML.
Создайте два файла: drop_gor_menu.css и gor_menu.html. Предпологается, что эти файлы находятся в одной директории.
Содержание файла drop_gor_menu.css
ul.menu {
margin: auto;
padding: 0;
height: 30px;
width: 100%;
background: url("images/gor_menu_fon.png") repeat-x;
}
ul.menu li {
background: url("images/gor_menu_punkt.png") 12px 5px no-repeat;
float: left;
list-style: none;
}
ul.menu li a {
color: White;
display: block;
padding: 6px 32px 0px;
text-decoration: none;
}
ul.menu li a:hover {
background: url("images/gor_menu_hover.png") 12px 5px no-repeat;
}
ul.menu li ul {
display: none;
margin-left: 12px;
padding: 0px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu ul li {
background: #75C808;
padding: 6px 12px 0px;
}
ul.menu ul li:hover {
background: #C0EC2D;
padding: 6px 12px 0px;
}
ul.menu ul li a {
color: Black;
padding: 6px 12px 0px;
}
ul.menu ul li a:hover {
background: #C0EC2D;
color: Black;
padding: 6px 12px 0px;
}
ul.menu li:hover ul li a {
padding: 0px 0 8px;
}
Содержание gor_menu.html
<html>
<head>
<title>Выпадающие горизонтальное меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="drop_gor_menu.css" type="text/css" />
</head>
<body>
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Второй пункт</a>
<ul>
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Большое подменю 2</a></li>
<li><a href="#">Подпункт 3</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a>
<ul>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#">Подпункт 5</a></li>
<li><a href="#">Подпункт 6</a></li>
<li><a href="#">Подпункт 7</a></li>
<li><a href="#">Подпункт 8</a></li>
</ul>
</li>
</ul>
</body>
</html>
Безусловно можно сделать нечто более интересное, чем это меню. Всё что вам нужно – это найти меню, которые примерно похожи на те, что у вас в воображении и зучить его, для того что бы потом переделать.
Самый лучший способ изучения в таком случае будет – «метод тыка». То есть вы видите параметр задающий цвет или размера -> изменяете это параметр на другой и смотрите, что произойдёт и т.д. И уже после нескольких переделок вы сможете самостоятельно (без чужих примеров) сделать то, что вам нужно.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
