Меню является важной составной частью веб-дизайна, по той простой причине, что если нет меню, посетители практически ничего не смогут сделать на сайте. Важно чтобы меню выглядело хорошо и было доступно для посетителей вашего сайта (скорее всего вы не хотите иметь Flash меню в качестве основной навигации, потому что если например у пользователя не будет установлен Flash Player он его не увидит).
К счастью имеется CSS, при помощи которого, можно создать очень красивое полностью кросс-браузерное меню.
Для начала надо скачать этот Архив.
Основа CSS меню:
Code
#navigation {
width: 950px;
height: 50px;
margin: 0;
padding: 0;
background-image: url(images/navigation_bar.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:28px;
display: block;
float: left;
color: #333333;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/menu_separatorline.jpg);
background-repeat: no-repeat;
background-position: right center;
padding-top: 17px; padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
}
#navigation ul li a:hover {
color:#FFF;
background-image: url(images/button_hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
#navigation ul li#active a {
color:#FFF;
background-image: url(images/button_hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Это основа меню. Помните что для правильного функционирования меню вам нужно скачать необходимые изображения.Теперь нам осталось только указать div id="navigation" в нашем html.
[Table]Примечание от переводчика:
Все необходимые изображения вы можете получить скачав исходники для этого урока. Кроме изображений там содержатся файлы style.css и index.html содержащие необходимый код. Автор упоминает в уроке только про то что в html коде необходимо указать div id="navigation" однако весь html код меню имеет следующий вид:[/Table]
Code
<div id="navigation">
<ul>
<li><a href= "#">Home</a></li>
<li id="active"><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">News & Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
В результате у вас получится красивое глянцевое CSS меню.
