Для создания навигации понадобится тег <nav>. Внутри этого тега следует поместить список. Тип списка – любой. В данном примере – маркированный список.
Каждый элемент списка – ссылка
HTML:
[raw]
<nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Каталог</a></li> <li><a href="#">Доставка</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Личный кабинет</a></li> </ul> </nav>
[/raw]
В style.css для тега <ul> маркеры убирать не надо. Они уже убраны в reset.css. Для этого тега стоит установить лишь выравнивание по центру.
[raw]
nav ul{
text-align: center;
}
[/raw]
Для каждого элемента списка нужно установить высоту, а также свойство display:inline-block. Последнее для того, чтобы блочные элементы выстроились в одну линию как линейные.
[raw]
nav ul li{
height: 27px;
display: inline-block;
}
[/raw]
Ссылку необходимо сделать блочным элементом, т. к. для неё отступ сверху.
[raw]
nav ul li a{
background-color: #7fc56b;
font-size: 18px;
color: #FFF;
text-decoration: none;
display: block;
border-radius: 0px 0px 10px 10px;
padding: 5px 30px 5px 70px;
}
[/raw]
Для ссылки, на которую навели указатель мыши нужно отображать изображение лапы. Можно изменить цвет текста.
[raw]
nav ul li a:hover{
color: #CCC;
background-image: url(../img/lapa.png);
background-repeat: no-repeat;
background-position: 25px 2px;
}
[/raw]
Вот и все наше меню готово. В третей части мы сделаем следующий фрагмент сайта – контент и правая часть сайта