Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью CSS-стилей. Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тегом <LI>.
К чему стремимся:
Code
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">FAQ</a></li>
</ul>
В данном примере меню располагается по центру страницы. Данный параметр будет зависеть от ширины внешнего блока, т.к. ширина меню составляет 100%.
С помощью CSS стилей придадим создаваемому меню желаемый вид.
Code
*{
margin:0;
padding:0;
}
.page{
margin:0 auto;
width:995px;
}
ul{
list-style:none;
width:100%;
height:40px;
background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
float:left;
border-right:1px solid #333;
}
ul li a{
display:block;
height:40px;
padding:0 35px;
float:left;
text-transform: uppercase;
font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
}
ul li a:hover,
ul li.active a{
background:url(images/bg-button.gif) top left repeat-x;
Посмотреть пример горизонтального меню »
Скачать пример горизонтального меню »
Главная 
