Чтение RSS
По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru
MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!


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

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




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

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


<style type="text/css">
.menu { /*элемент с классом menu - наш список*/
   padding:0 0 0 1em; /*внутренние отступы сверху, справа, снизу, слева*/
   margin:0; /*внешние отступы все 0*/
   list-style:none; /*задаем стиль отображения маркеров или нумерации для элементов списка - отобразить без маркера*/
   height:35px; /*высота*/
   background:url(menu.gif); /*фоновое изображение и путь к нему*/
}
.menu li { /*элемент li элемента с классом menu*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
}
.menu li a { /*ссылка элемента li элемента с классом menu*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   height:35px; /*высота*/
   line-height:33px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
   color:#aaa; /*цвет*/
   text-decoration:none; /*подчеркивание отсутствует*/
   font-family:arial, verdana, sans-serif; /*шрифт*/
   text-align:center; /*выравнивание текста по центру*/
   padding:0 0 0 14px; /*внутренние отступы сверху, справа, снизу, слева*/
   cursor:pointer;/*задаем тип курсора - обычный в виде руки*/
   font-size:11px; /*размер шрифта*/
}
.menu li a b { /*тег b ссылки элемента li элемента с классом menu*/
   float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
   display:block; /*блочный элемент - элементы начинаются с новой строки, после элемента также добавляется перенос строки*/
   padding:0 28px 0 14px; /*внутренние отступы сверху, справа, снизу, слева*/
}
.menu li.current a { /*ссылка элемента li с классом current элемента с классом menu*/
   color:#fff; /*цвет*/
   background:url(menu_cur.gif); /*фоновое изображение и путь к нему*/
}
.menu li.current a b { /*тег b ссылки элемента li с классом current элемента с классом menu*/
   background:url(menu_cur.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
.menu li a:hover { /*ссылка элемента li элемента с классом menu при наведении курсора*/
   color:#fff; /*цвет*/
   background: url(menu_h.gif); /*фоновое изображение и путь к нему*/
}
.menu li a:hover b { /*тег b ссылки элемента li элемента с классом menu при наведении курсора*/
   background:url(menu_h.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
.menu li.current a:hover { /*элемента li с классом current ссылки при наведении курсора элемента с классом menu*/
   color:#fff; /*цвет*/
   background: url(menu_cur.gif); /*фоновое изображение и путь к нему*/
   cursor:default;/*задаем тип курсора - по умолчанию*/
}
.menu li.current a:hover b { /*тег b элемента li с классом current ссылки при наведении курсора элемента с классом menu*/
   background:url(menu_cur.gif) no-repeat right top; /*фоновое изображение и путь к нему, не растягивать (повторять), отобразить справа сверху*/
}
</style>




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

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



Вот архив с изображениями
menu_mixlip.ru.rar



На этом все.
Просмотры: 4080 Комментарии (0)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Владельцы и пользователи сайта MixliP.ru не осуществляют никакой продажи либо перепродажи программных и иных продуктов интеллектуальной собственности. На нашем сайте не хранится ни одного файла или документа, который нарушал бы смежное или авторское право.


Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.


Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.


Читать полностью информацию правообладателям.


Сайт работает на хостинге BEGET.RU


Рекомендует Mixlip.RU





Наши друзья

Полезное

NEW - Анализ сайта

Оптимизация вашего сайта.

Читайте также

 Пользователи онлайн

  • Всего на сайте: 14
    Пользователей: 1
    Гостей: 12
    Роботов: 1
    Mail Ru