Создание вертикального меню для сайта

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

Основная проблема заключается в задержке вывода кнопки, когда браузер загружает изображение кнопки. Из-за этого создается мерцание. Есть несколько способов для того, чтобы избежать этого. Одним из них является метод pixy. Вместо нескольких фоновых изображений в нем используется одно, и это изображение будет выравниваться влево для обычного состояния и вправо, при наведении курсора на кнопку.

Для начала нужно создать объединенное изображение кнопки. Одна часть будет для обычного состояния, вторая при наведении курсора на кнопку. В моем случае размеры кнопки равны 300х40.

Теперь зададим стили:.

body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
a {
display: block;
width: 150px;
height: 39px;
line-height: 39px;
color: #c1e11c;
text-decoration: none;
background: #94B8E9 url(pixy-button.gif) no-repeat left bottom;
text-indent: 50px;
text-transform: uppercase;
}
a:hover {
background-color: #369;
background-position: right bottom;
color: #fff;
}
li.firstSelected a {
height: 40px;
line-height: 40px;
}

Как вы могли заметить высоту кнопки я задал равную 39px, нет это не ошибка. Это сделано специально, из-за того, что при всоте 40px, сверху будет слишком жирная рамка между кнопками. Чтобы избежать этого для всех, кнопок задаем высоту равную 39px, а для первой кнопки 40px.

Зададим меню:

<ul>
    <li class="firstSelected"><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Tools</a></li>
	<li><a href="#">About</a></li>
</ul>

Вот так наше меню будет выглядеть в готовом виде:

• Верстаем дизайн для блога. Часть 2
• Верстаем дизайн для блога. Часть 1
• Создание красивых кнопок с помощью css
• Прокачиваем таблицы с помощью CSS3
• 10 генераторов текста

Теги: css, Верстка, Дизайн