Для создания навигации понадобится тег <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]
Вот и все наше меню готово. В третей части мы сделаем следующий фрагмент сайта – контент и правая часть сайта