Простое меню на CSS

В этом посте хочу рассказать, как сделать простое меню на CSS. Как оказалось есть люди, которые еще не знают как сделать меню в виде красивых кнопок, которые при наведении меняют цвет фона и/или шрифта.

Горизонтальное меню применяется обычно в шапке документа и несет роль основной навигации, а вертикальное меню используется как правило в боковых колонках и выполняет функции дополнительной навигации по сайту (хотя бывают и исключения). Различия между горизонтальным и вертикальным меню незначительные, поэтому в этом топике я показал как сделать и гиризонтальное меню на CSS и вертикальное.

Итак приступим!

Горизонтальное меню на CSS:

Для реализации меню мы будем использовать, как это принято, ненумерованный список UL. Пишем такой HTML код:

<ul class="cssmenu">
   <li><a href="#">пункт первый</a></li>
   <li><a href="#">пункт второй</a></li>
   <li><a href="#">пункт третий</a></li>
</ul>

Мы составили простой список. Теперь займемся стилем:

<style type="text/css">
//зададим стиль для списка
ul.cssmenu {
// убираем отступы
   padding: 0;
   margin: 0;
// убираем точки
   list-style: none;
}
//зададим стиль для элемента списка
ul.cssmenu li {
// Чтобы меню корректно отображалось в IE
   float: left;
}
// зададим стиль для анкора в списке
ul.cssmenu li a, ul.cssmenu li a:visited {
// обязательно блочное отображение
   display: block;
// укажем отступы
   padding: 5px;
// сделаем промежутки между пунктами для красоты
   margin-right: 1px;
// цвета фона и текста
   color: #FAFAD2;
   background-color: #4682B4;
}
// меняем цвета при наведении
ul.cssmenu a:hover {
   color: #4682B4;
   background-color: #FAFAD2;
}
</style>

Теперь смотрим, что получается:

Если требуется сделать пункты меню определенной ширины, нам придется задать ширину для анкора и указать ориентацию текста по центру. Добавляем к стилю анкора следующие строки:

   width: 150px;
   text-align: center;

Вот что получаем:

Для красоты можно убрать подчеркивание  у ссылки (text-decoration:none;), изменить размер шрифта и т.д. Делайте все, на что зватит фантазии.

Теперь вертикальное меню на CSS:

Сделать вертикальное меню не сложнее, чем горизонтальное. Мы также берем список и задаем стиль элементам.

Используем тотже HTML код что и для горизонтального меню, а стиль меняем:

<style type="text/css">
//зададим стиль для списка
ul.cssmenu {
// убираем отступы
   padding: 0;
   margin: 0;
// убираем точки
   list-style: none;
   width: 150px;
}
//зададим стиль для элементов списка
ul.cssmenu li {
// Чтобы меню корректно отображалось в IE
   float: left;
}
// зададим стиль для анкора в списке
ul.cssmenu li a, ul.cssmenu li a:visited {
// обязательно блочное отображение
   display: block;
// укажем отступы
   padding: 5px;
// сделаем промежутки между пунктами для красоты
   margin-bottom: 1px;
// цвета фона и текста
   color: #FAFAD2;
   background-color: #4682B4;
   width: 140px;
}
// меняем цвета при наведении
ul.cssmenu li a:hover {
   color: #4682B4;
   background-color: #FAFAD2;
}
</style>

В итоге получаем неплохое меню для навигации:

Можно поиграть с ориентированием текста для красоты. Добавим для анкора при наведении указателя ориентирование справа. И получим вот что:

Меню готово. Для того чтобы меню было более презентабельным можно добавить фоновые изображения. Впрочем это зависит от вкуса и фантазии.

На первый взгляд, было бы логично указать ширину только для элемента UL (кстати если указать ширину только для UL, то во всех браузерах, кроме IE будет отображаться как задумано), но чтобы в IE ссылки у нас были во всю ширину списка, придется указать им ширину.

Почему я не указал просто 100%? Да потому что ширина элемента состоит из ширины контента плюс ширина отступа плюс ширина рамки, а значит при указании ширины равной 100%, у нас ширина списка выша бы 160 пикселей за счет наших отступов.

В следующих постах я расскажу как сделать выпадающее меню на CSS.