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

Горизонтальное меню на CSS с использованием 2 градиентых картинок

опубликовал admin | дата публикации 26.12.2011 | просмотров 2545

картинка меню

В этом примере мы попробуем создать простое горизонтальное меню на CSS с использованием 2 градиентых картинок, начинающееся слева и растянутое на всю ширину страницы. Это меню будет использовать две картинки, сменяющие друг друга при наведении. Его очень просто настроить под любой дизайн. Изначально у нас черно-синий цвет, но вы можете легко отредактировать картинки под свой дизайн, например в редакторе Paint.NET, эти цвета картинок приложены в архиве.

Итак приступим, для начала создадим код CSS и вставим его в теге head страницы.

<style type="text/css">
.menu{ /*имя класса можете задать свое*/
  margin: 0; /*поля - снаружи элемента*/
  padding: 0; /*отступы - внутри элемента*/
  float: left; /*выравнивание - по левому краю*/
  font: bold 13px Arial; /*характеристика шрифта - 13px, шрифт Arial*/
  width: 100%; /*ширина - в данном примере 100%*/
  border: 1px solid #625e00; /*рамка - 1 px, сплошная линия, цвет*/
  border-width: 1px 0; /*рамка - верхняя и нижняя 1px, правая и левая 0*/
  background: black url(default.gif) center center repeat-x; /*фоновое изображение - черный и путь к изображению, позиция по центру, размножаем фоновое изображение горизонтально*/
}
.menu li{ /*элемент li класса menu*/
  display: inline; /*строчный элемент, идет без разрыва и переноса строки*/
}
.menu li a{ /*ссылка элемента li*/
  float: left; /*выравниваем элемент по левому краю, остальные элементы обтекают справа*/
  color: white; /*цвет ссылки*/
  padding: 9px 11px; /*отступы - внутри элемента, сверху-снизу, справа-слева*/
  text-decoration: none; /*текст без оформления*/
  border-right: 1px solid white; /*рамка - правая граница сплошная, 1px, белая*/
}
.menu li a:hover, .menu li .current{ /*ссылка элемента li при наведении курсора и текущая*/
  color: white; /*цвет текущей ссылки*/
  background: transparent url(active.gif) center center repeat-x; /*фоновое изображение - прозрачный и путь к изображению, позиция по центру, размножаем фоновое изображение горизонтально*/
}
</style>

С этим думаю все понятно. Можете поэкспериментировать с кодом и посмотреть, что получится. Например задать одинаковую ширину для меню - просто добавив в .menu li a строку width: 100px; . Так же поэкспериментируйте со своими любыми картинками. Класс current ссылке присвоен для наглядности.

Теперь создадим код HTML самого меню, он будет у нас в виде списка. При необходимости title выставите сами. Замените # на свои ссылки.

<ul class="menu">
 <li><a href="http://www.menuforsite.ru" title="Главная">Главная</a></li>
 <li><a class="current" href="#">Ссылка2</a></li>
 <li><a href="#">Ссылка3</a></li>
 <li><a href="#">Ссылка4</a></li>
 <li><a href="#">Ссылка5</a></li>
</ul>
<br style="clear: left"/>
 

В этом примере все достаточно просто, при вставке в страницу следите за путями к картинкам и за кодировкой, в архиве - utf-8. Так же архив содержит несколько картинок под кнопки других цветов.

ДЕМО ПРИМЕРА | СКАЧАТЬ АРХИВ (загрузок 435 )

теги: меню для сайта | горизонтальное меню

Комментарии

Ваш комментарий