Горизонтальное выдвижное меню CSS

В этой статье я покажу, как сделать небольшой изящный выдвижной эффект к элементам горизонтального меню.

Мы создадим горизонтальное меню, состоящее из злементов списка li. Элементы li будут содержать текстовые ссылки. Перемещая мышку над элементом списка, элемент li и соответственно ссылка увеличаться в размерах. Пример выдвижного меню можно увидеть в конце статьи.

Давайте составим HTML код к нашему меню. Код будет довольно прямолинейным и простым. Просто сделаем неупорядоченный список и идентифицируем его через id как "navlist".

HTML

<ul id="navlist">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
    <li><a href="#">Six</a></li>
</ul>

Как я и говорил, ничего особенного, обычный неупорядоченный список. Пойдем дальше.

Добавим нашему меню немного CSS.

Для начала, добавим стиль непосредственно контейнеру списка ul. Определим контейнер ul (и соответственно унаследованные элементы списка) как встроенные элементы, также отменим маркеры.

CSS

ul#navlist {
display: inline;
list-style: none;
} 

Сейчас нам необходимо задать стиль элементам списка li. Элементам списка достаточно задать размеры и чтобы быть уверенным в том, что элементы списка расположатся в одном ряду друг за другом, сделаем их "плавающими" (float: left). Основные визуальные свойства определим через ссылки.

CSS

ul#navlist li {
float: left;
width: 60px;
height:60px;
} 

Как видите, все элементы списка определены как квадраты (60px X 60px) и с помощью свойства float выстроены горизонтально.

Теперь необходимо задать стили ссылкам.

Для начала определим высоту, ширину и подложку (padding). Нам нужно, чтобы ширина и высота ссылок были на 10px меньше ширины контейнера (li), поэтому ширина подложки понадобится в 5px. Нам также необходимо свойству display присвоить значение block, для того чтобы высота отображалась корректно.

CSS

ul#navlist li a {
width: 50px;
height:50px;
padding:5px;
display:block;

Теперь давайте добавим ссылкам визуальные свойства. Установим высоту строки и высоту шрифта так, чтобы текст центрировался в блоке вертикально. Ну и наконец, отцентрируем текст по горизонтали.

CSS

color:#fff;
text-decoration: none;
font-size:7pt;
font-family:arial;
line-height:50px;
text-align:center

Перейдем к границам (border). Установим ширину правой и левой границы нашего блока в 1px. При этом цвет границ будет белый, так как это цвет нашего фона. Установим ширину верхней и нижней границы на 5px, цвет также будет белым. Меняющийся цвет у верхней и нижней границы (при наведении мышки на ссылку) создаст выдвижной эффект элементам горизонтального меню. Также назначим фоновый цвет ссылкам.

CSS

border-right:1px solid #fff;
border-left:1px solid #fff;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
background: #003663;
}

Для того чтобы создать выдвижной эффект ‛прицепим‛ к селектору a псевдокласс :hover (который позволит задать свойства, проявляющиеся при наведении мышки на ссылку), и зададим соответствующие значения свойствам font, border, background. Цвет границ (border) ссылки в этом случае идентичен фону самой ссылки, за счет этого при наведении курсора мышки на ссылку происходит ее выдвижение.

CSS

ul#navlist li a:hover {
    border-top: 5px solid #004a80;
    border-bottom: 5px solid #004a80;
    background:#004a80;
    font-size:9pt;
    font-weight:bold;
}

Готово: