CSS
меню
Меню -
раздел HTML-документа, предназначенный для перемещения
по документу. Любое меню представляет собой список ссылок, ведущих на
внутренние страницы документа. Самым простым способом добавить такую панель
навигации является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом
создания вертикального меню будет создание маркированного списка c атрибут id с
идентификатором "menu",
каждый элемент li будет содержать по одной ссылке:
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#menu {
margin:
0; padding:
0; width: 100px;
list-style-type: none; /* отмена маркеров
списка*/
}
#menu
li {
border-left: 10px solid
#666; border-bottom: 1px solid
#666;
}
#menu
a {
background-color:
#949494; border-left: 5px solid
#33ADFF;
color: #fff; text-decoration:
none; font-weight:
bold;
padding:
5px; display: block;
}
#menu
a:hover {
background-color:
blue; border-left: 5px solid
red;
}
/* стили всплывающего окна*/
#okno1
{
width:
950px; height:
550px;
text-align: center; padding:
15px;
border: 3px solid
#0000cc; border-radius:
10px;
position:
absolute; display:
none;
margin: auto; color: #0000cc;
top: 0; right:
0; bottom:
0; left:
0;
}
#okno1:target {
display: block;
}
.close
{
display:
inline-block; background: #f2f2f2;
border: 1px solid #0000cc; margin:
10px;
text-decoration:
none; color:
#0000cc; font-size: 14pt;
padding: 0
12px; cursor:pointer;
}
</style>
</head>
<body>
<div
id="okno1"> Главная!<br>
<a href="#close"
class="close">Закрыть окно</a>
</div>
<ul id="menu">
<li><a href="#okno1" >Главная</a></li> /* ссылка на всплывающее окна*/
/* ссылка на внешний файл с загрузкой в новое окно */
<li><a href="./news/news.html"
target="_blank">Новости</a></li>
/* ссылка на внешний файл с загрузкой в текущее окно */
<li><a href="./kontakt/kontakt.html" target="_self">Контакты</a></li>
/* ссылка на внешний файл с загрузкой в текущее окно */
<li><a href="./main/main.html">О нас</a></li>
</ul>
</body>
</html>
Результат в
браузере:
Рис. 12
Горизонтальное меню
Чаще всего меню с
навигационными ссылками располагается по горизонтали в верхней части HTML-документа.
Горизонтальное меню
можно создать, изменив стили предыдущего списка. Свойству display для элементов li нужно присвоить значение inline, чтобы пункты
списка располагались друг за другом.
#menu {
margin:
0; padding:
0;
list-style-type:
none; /* отмена маркеров*/
border:
2px solid #0066FF;
border-radius:
20px 5px; width: 550px;
text-align:
center; background-color:
#33ADFF;
}
#menu li {
display:
inline; /* строчный список*/
}
#menu a
{
color:
#fff; text-decoration:
none;
padding: 5px 10px; width:
100px;
font-weight:
bold;
display:
inline-block; /* строчно-блочный список*/
}
Результат в
браузере:
Рис. 13
Двухуровневое меню
Меню, которое мы
будем создавать, будет иметь основные навигационные ссылки, расположенные в
горизонтальной панели навигации. А подпункты будут отображаться только после наведения
курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Изменим меню из предыдущего раздела:
<ul id="menu">
<li><a href="#okno1" >Главная</a></li>
<li><a href="./news/news.html"
target="_blank">Новости</a></li>
<li><a href="./kontakt/kontakt.html"
target="_self">Контакты</a></li>
<li><a href="">О нас</a>
<ul>
<li><a href="./adm/adm.html">Администратор</a></li>
<li><a href="./adm/man.html ">Менеджеры</a></li>
<li><a href="./adm/progr.html ">Программисты</a></li>
</ul>
</li>
</ul>
Стили этого меню:
#menu ul {
display:
none; background-color:
#f90;
position:
absolute; top: 100%;
}
#menu li:hover ul {
display: block;
}
#menu, #menu ul {
margin:
0; padding: 0; list-style-type:
none;
}
#menu {
height:
30px; background-color:
#666;
padding-left:
25px; min-width: 470px;
}
#menu li {
float:
left; position:
relative; height: 100%;
}
#menu li a {
display:
block; padding:
6px;
width:
120px; color:
#fff;
text-decoration:
none; text-align:
center;
}
#menu ul li {
float: none;
}
#menu li:hover {
background-color: #f90;
}
#menu ul li:hover {
background-color: #666;
}
Результат в браузере:
Рис. 14