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

Очень простое горизонтальное меню для сайта на css

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

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

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

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

<style type="text/css">
#menu{ /*элемент с идентификатором menu - наш div*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   width:100%; /*ширина*/
}
#menu ul{ /*список элемента с идентификатором menu*/
   list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
}
#menu li{ /*элемент li списка элемента с идентификатором menu*/
   list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   background:#A4F0B7; /*цвет заливки фона*/
   border-bottom:4px solid #1FCB4A; /*нижняя граница - толщина, начертание, цвет*/
}
#menu li a{ /*ссылка элемента li списка элемента с идентификатором menu*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   color:#44494f; /*цвет*/
   text-transform:uppercase; /*преобразуем текст в прописные буквы*/
   font-size:11px; /*размер шрифта*/
   font-weight:bold; /*насыщенность шрифта - стандартный полужирный шрифт (значение = 700)*/
   line-height:35px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   border:solid #2DC800; /*насыщенность границы, цвет*/
   border-width:1px 1px 0 1px; /*толщина границы, сверху, справа, снизу, слева*/
   text-decoration:none; /*подчеркивание отсутствует*/
   padding:0 25px; /*внутренние отступы сверху-снизу, справа-слева*/
}
#menu li a.current{ /*ссылка элемента li списка элемента с идентификатором menu с классом current т.е. текущая*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   background:url(menu_h.jpg) repeat-x; /*фоновое изображение и путь к нему, растянуть (повторить) по оси x*/
   color:#fff; /*цвет*/
   text-transform:uppercase; /*преобразуем текст в прописные буквы*/
   font-size:11px; /*размер шрифта*/
   font-weight:bold; /*насыщенность шрифта - стандартный полужирный шрифт (значение = 700)*/
   line-height:35px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   border:solid #e1e1d3; /*насыщенность границы, цвет*/
   border-width:1px 1px 0 1px; /*толщина границы, сверху, справа, снизу, слева*/
   text-decoration:none; /*подчеркивание отсутствует*/
   padding:0 25px; /*внутренние отступы сверху-снизу, справа-слева*/
}
#menu li a:hover{ /*ссылка элемента li списка элемента с идентификатором menu при наведении курсора*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   background:url(menu_h.jpg) repeat-x; /*фоновое изображение и путь к нему, растянуть (повторить) по оси x*/
   color:#fff; /*цвет*/
   text-transform:uppercase; /*преобразуем текст в прописные буквы*/
   font-size:11px; /*размер шрифта*/
   font-weight:bold; /*насыщенность шрифта - стандартный полужирный шрифт (значение = 700)*/
   line-height:35px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   border:solid #e1e1d3; /*насыщенность границы, цвет*/
   border-width:1px 1px 0 1px; /*толщина границы, сверху, справа, снизу, слева*/
   text-decoration:none; /*подчеркивание отсутствует*/
   padding:0 25px; /*внутренние отступы сверху-снизу, справа-слева*/
}
</style>

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

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

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

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

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

Комментарии

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