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

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

опубликовал admin | дата публикации : 06.01.2012 | просмотров 1403

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

В этом примере создадим Строгое серо-синее вертикальное меню для сайта на css. Меню будет использовать единственный список вложенный в div и одно сдвоенное изображение. Для эффекта затемнения будем использовать нижнюю часть картинки. Вы можете поменять картинку так как вам нравится. 12 различных цветов картинок приложены в архиве. Изменить их Вы можете, например в редакторе Paint.Net

Сперва создадим код CSS и вставим его в теге head страницы.

<style type="text/css">
#menu { /*элемент с идентификатором menu - наш div*/
   width: 200px; /*ширина*/
   margin: 10px; /*внешние отступы*/
}
#menu ul { /*список элемента с идентификатором menu*/
   font-family:Verdana, Arial, Helvetica, sans-serif; /*шрифт*/
   font-size:12px; /*размер шрифта*/
   font-weight:bold; /*насыщенность шрифта - стандартный полужирный шрифт (значение = 700)*/
   list-style: none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
   margin: 0; /*внешние отступы все 0*/
   padding: 0; /*внутренние отступы все 0*/
}
#menu li a { /*ссылка элемента li элемента с идентификатором menu*/
   display: block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   height: 24px; /*высота*/
   text-decoration: none; /*подчеркивание отсутствует*/
   color: #000; /*цвет*/
   background: url(menu.gif); /*фоновое изображение и путь к нему*/
   padding: 8px 0 0 10px; /*внутренние отступы сверху, справа, снизу, слева*/
}
#menu li a:hover, #menu #current a{ /*ссылка элемента li элемента с идентификатором menu при наведении курсора, ссылка элемента с идентификатором current - текущая*/
   color: #FFF; /*цвет*/
   background: url(menu.gif) 0 -32px; /*фоновое изображение и путь к нему, отобразить слева с 0 сверху с -32px*/
   padding: 8px 0 0 10px; /*внутренние отступы сверху, справа, снизу, слева*/
}
</style>

Далее создаем код HTML самого меню, он будет у нас в виде списка в диве. При необходимости title выставите сами. Замените # на свои ссылки, можете сменить имя идентификатора, сменив его и в коде CSS. Не забывайте следить за кодировкой и путями к изображениям. Элементу li присвоен идентификатор current для наглядности.

<div id="menu">
 <ul>
   <li><a href="http://www.menuforsite.ru"><span>Главная</span></a></li>
   <li id="current"><a class="current" href="#"><span>Ссылка1</span></a></li>
   <li><a href="#"><span>Ссылка2</span></a></li>
   <li><a href="#"><span>Ссылка3</span></a></li>
   <li><a href="#"><span>Ссылка4</span></a></li>
 </ul>
</div>

На этом все. С этим меню очень просто разобраться, оно понятно и для неопытных.

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

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

Комментарии

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