Создаем глянцевое CSS меню - 4.7 out of 5 based on 3 votes

Меню является важной составной частью веб-дизайна, по той простой причине, что если нет меню, посетители практически ничего не смогут сделать на сайте.

Глянцевое CSS меню - примеры кода, демо и исходники

Важно чтобы меню выглядело хорошо и было доступно для посетителей вашего сайта (скорее всего вы не хотите иметь Flash меню в качестве основной навигации, потому, что если например у пользователя не будет установлен Flash Player он его не увидит).

Материалы по теме:

К счастью имеется CSS, при помощи которого, можно создать очень красивое полностью кросс-браузерное меню.

Основа CSS меню

#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.

Примечание переводчика:
Все необходимые изображения вы можете получить скачав исходники для этого урока. Кроме изображений там содержатся файлы style.css и index.html содержащие необходимый код. Автор упоминает в уроке только про то что в html коде необходимо указать div id="navigation" однако весь html код меню имеет следующий вид:
<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 меню.

Файлы для скачивания
  • Название: Исходники меню
  • Ссылка: zipPixel_Clouds_Glossy_Menu.zip29.66 KB
  • Формат: ZIP архив содержащий файлы в форматах HTML CSS PNG

Перевод подготовлен проектом: WebMasterMix.ru
Источник

Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 4.67 (3 Голосов)