Aug 09

Создание горизонтального меню

Уроки HTML/CSS Добавить комментарии

Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью 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 сказал:
    September 20th, 2010 в 3:04 pm

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

  2. jojo97 сказал:
    October 20th, 2010 в 10:41 pm

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

  3. Strannik сказал:
    December 13th, 2010 в 9:00 am

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

  4. admin сказал:
    December 15th, 2010 в 4:57 pm

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

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

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

  6. KAA сказал:
    March 14th, 2011 в 12:40 am

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

  7. михаил сказал:
    March 27th, 2011 в 5:21 pm

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

  8. Павел сказал:
    May 27th, 2011 в 7:57 pm

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

  9. Мария сказал:
    July 10th, 2011 в 9:07 pm

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

  10. Сергей сказал:
    October 25th, 2011 в 9:32 am

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

  11. Валерий сказал:
    November 28th, 2011 в 8:33 pm

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

  12. Seonik сказал:
    December 21st, 2011 в 10:47 am

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

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