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

Горизонтальные меню разноцветные для сайта на css и javascript

Горизонтальные меню разноцветные для сайта на css и javascript






Демо версия меню !!!!!!

В этом примере создадим Простое горизонтальное меню для сайта. Это меню будет использовать единственный список, вложенный в div с идентификатором и две картинки, одна из которых будет фоном, другая - эффектом при наведении курсора. Это очень простое меню, оно не вызовет сложностей даже у новичков.

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

<style type="text/css">
#menu{ /*элемент (наш div) с идентификатором menu*/
 	width:100%; /*ширина*/
 	height:60px; /*высота*/
 	background:url(img_bg.png) repeat-x; /*фоновое изображение и путь к изображению, растянуть (повторить) по оси x*/
}
#menu ul{ /*элемент ul элемента с идентификатором menu*/
 	list-style:none; /*задает стиль отображения маркеров - отобразить без маркера*/
 	margin:0 auto; /*внешние отступы все 0 (браузер сам определяет значение отступа)*/
}
#menu li{ /*элемент li элемента с идентификатором menu*/
 	list-style:none; /*задает стиль отображения маркеров - отобразить без маркера*/
 	display:block; /*блочный элемент - элементы начинаются с новой строки. После элемента также добавляется перенос строки*/
 	float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
 	height:60px; /*высота*/
 	line-height:60px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
}
#menu li a{ /*ссылка элемента li элемента с идентификатором menu*/
 	display:block; /*блочный элемент - элементы начинаются с новой строки. После элемента также добавляется перенос строки*/
 	float:left; /*выравниваем по левому краю, остальные элементы обтекают справа*/
 	color:#a7a7a7; /*цвет текста*/
 	text-transform:uppercase; /*контролирует преобразование текста в строчные или прописные буквы - все символы будут прописными (верхний регистр).*/
 	font-size:11px; /*размер шрифта*/
 	font-weight:bold; /*начертание шрифта - стандартный полужирный шрифт (значение = 700)*/
 	line-height:60px; /*задаем высоту линии (интерлиньяж, межстрочный интервал) текста*/
 	text-decoration:none; /*подчеркивание отсутствует*/
 	padding:0 25px; /*внутренние отступы сверху-снизу, справа-слева*/
}
#menu li a:hover, #menu li a.current{ /*ссылка элемента li элемента с идентификатором menu при наведении курсора, ссылка класса current*/
 	color:#fff; /*цвет текста*/
 	background:url(img_h.png) no-repeat bottom; /*фоновое изображение и путь к изображению, не растягивать (не повторять), расположить по центру внизу*/
}
</style>




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

<div>
 <ul id="menu">
  	<li><a href="http://www.menuforsite.ru"><span>Главная</span></a></li>
  	<li><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>

Фиолетовый, розовый, голубой, зеленый и желтый цвета картинок лежат в архиве. На этом все.

Menyu-dlya-sayta.rar

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


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


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


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


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




Наши друзья

Полезное

Разделы сайта

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

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