Aug 09

Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью CSS-стилей. Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тегом <LI>.

К чему стремимся:
menu

Ниже приведен HTML-код неупорядоченного списка:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">FAQ</a></li>
</ul>


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

С помощью CSS стилей придадим создаваемому меню желаемый вид.

*{
	margin:0;
	padding:0;
}
.page{
	margin:0 auto;
	width:995px;
}
ul{
	list-style:none;
	width:100%;
	height:40px;
	background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
	float:left;
	border-right:1px solid #333;
}
ul li a{
	display:block;
	height:40px;
	padding:0 35px;
	float:left;
	text-transform: uppercase;
	font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
ul li a:hover,
ul li.active a{
	background:url(images/bg-button.gif) top left repeat-x;
}

Посмотреть пример горизонтального меню »

Скачать пример горизонтального меню »

Похожие статьи

Ответов: 12 на “ Создание горизонтального меню ”

  1. mulder сказал:

    В общем интересно, можно выдумать много разных меню на основе этой. Danke.

  2. jojo97 сказал:

    пасиб человек огромное тебе спасибо!!!!! очень помог!!!

  3. Strannik сказал:

    Огромное спасибо автору.

  4. admin сказал:

    Приятно, что урок приносит пользу :)

  5. 99 техник создания меню для сайта CSS и jQuery | статей,статьи,статьи рф,кодекс статьи,статьи ук,статьи ук рф,скачать статью,уголовные статьи,бесп сказал:

    [...] Создание горизонтального меню | Демо версия [...]

  6. KAA сказал:

    Огромное спасибо)
    Как раз то что искал)

  7. михаил сказал:

    спасибо за менюшки

  8. Павел сказал:

    Большое спасибо! Именно такого плана меню я и искал!

  9. Мария сказал:

    Спасибо Вам большое! Помогли!
    Успехов Вам! Пусть все будет получаться:)

  10. Сергей сказал:

    Спасибо, очень вовремя урок на глаза попался, именно то, что искал.

  11. Валерий сказал:

    Спасибо Вам!!! Отличное рабочее меню!!!.И симпатичное к тому же…

  12. Seonik сказал:

    Автор, спасибо большое.
    Успехов!

Оставить ответ