2014-09-04
330
Простая, удобная и красивая навигация на сайте с небольшим количеством разделов.
Маркированный список со ссылками выстраиваем в линию и делаем выделение той ссылки, на которую наводим курсор.
2.1.1 Создадим маркированный список со ссылками внутри:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contacts</a></li>
</ul>
2.1.2 Выстроим его в линию и уберем маркер, для этого напишем следующие стили:
ul li{
list-style-type:none;
display:inline
}
2.1.3 Поскольку мы не можем использовать блочные свойства стилей для inline элементов, сделаем из тега a блочный элемент, а чтобы они выстроились в одну строку, добавим свойство float:left:
li a{
display:block;
float:left
}
2.1.4. Описание стилей для текста ссылок и добавление отступов и фона
2.1.4.1 описываем стили для текста ссылок:
li a{
font-family:Tahoma,Helvetica,sans-serif;
text-decoration:none;
color:#fff
}
2.1.4.2 добавляем внутренние отступы и фон для ссылки:
li a{
display:block;
float:left;
padding:4px 10px;
background:#193D6A
}
2.1.4.3 описываем псевдокласс hover:
li a:hover{
background:#408BE8;
padding:7px 14px;
position:relative;
top:-3px
}
Блочному элементу после меню приписывается в стилях свойство clear:both, чтобы прекратить обтекание.
Используя графический фон, можно добиться очень красивых эффектов.
