Горизонтальное меню с помощью css (5 видов)

По просьбам с комментариев предоставляю вашему вниманию горизонтальное меню с помощью css. При создании сайта, многие веб - мастера затрудняются с выбором некоторых частей для сайта, тому пример те же меню для сайта или различные опросы\голосования.

Хочу сократить время на вёрстку горизонтального меню и выкладываю небольшой набор менюшек для вашего сайта. Хотелось бы еще показать пример установки одного их них, для тех кто впервые хочет воспользоваться чужим кодом и адаптировать его под свой шаблон.

Код горизонтального меню следующий:

<div id="menu">
<ul>
<li><a href="#" class="current"><span>home</span></a></li>
<li><a href="#"><span>about us</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>solutions</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
</div>

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

Ниже вы можете скачать горизонтальное меню которое подходит под ваш дизайн сайта, все меню можно просмотреть в демо режиме и проверить как они работают.

Скрипт горизонтального меню
горизонтальное меню css в тёмно синих тонах №1
Скачать горизонтальное меню №1
Посмотреть демо

зелёное горизонтальное меню
зелёное горизонтальное меню css №2
Скачать горизонтальное меню №2
Посмотреть демо

оранжевое горизонтальное меню
оранжевое горизонтальное меню css №3
Скачать горизонтальное меню №3
Посмотреть демо

серебристое горизонтальное меню
серебристое горизонтальное меню css №4
Скачать горизонтальное меню №4
Посмотреть демо

черное горизонтальное меню
черное горизонтальное меню №5
Скачать горизонтальное меню №5
Посмотреть демо

Поделитесь ссылкой если мы вам помогли!

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

Создаём парсер сайтов

Влияние внутренних факторов сайта на раскрутку

Какой хостинг лучше выбрать

Замена изображения при наведении

Действие по времени с помощью PHP

Комментарии:

Добавленно - 2012-06-04

Сергей пишет:

Спасибо, отличные менюшки, пригодились жутко! И сам в целом привлёк тематикой - обязательно изучу.

Добавленно - 2011-10-23

Борис пишет:

Материал пригодился, кое-что вспомнил. Только в css-файлах менюшек много лишнего(повторяющиеся float:left, display:block, не нужные height и т.д.) Сделал такие же меню кроме последнего(терпения не хватило).

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =