Как сделать горизонтальное меню в html – Горизонтальное меню для сайта

Простое горизонтальное меню (css + html)

В этом уроке я покажу как создать простое горизонтальное меню с выпадающими пунктами. Для создания меню я буду использовать css и html. Для начала нужно создать простую структуру меню:

<div>
	<ul>
		<li><a href="#">Ссылка 1</a></li>
		<li>
			<a href="#">Ссылка 2</a>
			<ul>
				<li><a href="#">Ссылка подменю 1</a></li>
				<li><a href="#">Ссылка подменю 2</a></li>
			</ul>
		</li>
		<li><a href="#">Ссылка 3</a></li>
		<li><a href="#">Ссылка 4</a></li>
	</ul>
</div>

Теперь к созданной структуре применим следующие стили:

.top-menu li{
	list-style:none;/*Убираем маркер*/	
	display:inline-block;/*Выстраиваем пункты в ряд*/
	background:#ccc;/*Цвет фона для пункта*/
	position:relative;
}
.top-menu li:hover{
	background:#eee;/*Цвет фона при наведение на пункт*/
}
.top-menu li a{
	color:#222;/*Цвет шрифта в пункте*/
	padding:5px 7px;/*Отступы для пункта*/	
	text-decoration:none;/*Убираем подчеркивание*/	
	display:block;
}
.top-menu li ul{
	display:none;/*Прячем выпадающее меню*/
	position:absolute;
	padding-left:0;
	width:120px;/*Ширина выпадающего меню*/
	padding-top:3px;/*Отступ сверху у выпадающего меню*/
}
.top-menu li:hover ul{
	display:block;/*Показываем выпадающее меню при наведение*/
	left:0px;
}

В итоге получим:

Меню созданному на чистом css, очень легко предать требуемый вид. Для того чтобы сменить цвет шрифта нужно поменять значение color, для смены фона значение background

Готовый пример — Скачать

pro-cod.ru

Горизонтальное меню на CSS

Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.

HTML код меню

<ul>
	<li><a href="http://sitear.ru">Главная</a></li>
	<li><a href="http://sitear.ru">Дизайн, CSS</a></li>
	<li><a href="http://sitear.ru">Программирование</a></li>
	<li><a href="http://sitear.ru">Еще пункт меню</a></li>
</ul>

По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:

UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.

CSS код меню

Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:

#menu{list-style:none; width:500px; padding:0; margin: auto;}
#menu li{float:left; font:bold 14px Arial;}
#menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;}
#menu a:hover{color:#fff; background:#888;}

На данном этапе получилось следующее:

Разбор полетов

Разберем все поэтапно, до каждой мелочи:

#menu {…}

– С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.

list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.

width:500px; – ширина меню 500 пикселей.

margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.

padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.

#

menu li {…} – присваиваем стили для LI элементов.

float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.

font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.

#menu a {…} – присваиваем стили для A элемента (ссылки).

color:#666; – темно-серый цвет шрифта.

display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.

height:40px; – высота меню будет 40 пикселей.

line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.

padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.

background:#eee; – устанавливаем серый цвет фона для элементов меню.

text-decoration:none; – убираем линию подчеркивающую ссылку.

#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.

color:#fff; – меняем цвет текста на белый.

background:#888; – цвет фона меняем на темно серый.

Доработка горизонтального меню

Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для

a элемента background:url(background.png) repeat-x; для a:hover другой фон background:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.

background.png — 

hover.png — 

Теперь меню имеет немного иной вид:

Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.

Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка

Дискуссия по теме    31 Комментарий 

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

Ильдар 11.11.2014 в 22:47

Добрый вечер! а как к пунктам меню добавить материал текст фото видео через css и html не используя движок joomla!

Оксана 04.11.2014 в 15:52

Здравствуйте! Объясните мне чайнику в каком файле должны производиться все эти изменения, общая логика меню мне понятна, но где должен располагаться этот код никак не пойму.

Darksoul 03.09.2014 в 01:00

Здравствуйте! Мне нужна помощь в задании конкретных координат горизонтального меню, а именно в шапке сайта, наложив его сверху на картинку шапки. Сайт на движке вордпресс, могу скинуть файлы header.php, style.php и function.php если они нужны. Ответ если можно пришлите на почту, и заранее спасибо!

Умник 27.08.2014 в 09:50

UL — это весь список, а LI — это вся строчка, вообще-то.

Katrin 25.06.2014 в 01:02

Подскажите как создать горизонтальное меню в CSS и HTML так скажем горизонтальные заголовки и каждый заголовок разным стилем Пример: «контакты ЗАГОЛОВОК корзина»

Артём 23.03.2013 в 14:01

Спасибо, статья очень помогла

Лариса 28.10.2012 в 09:41

Добрый день! Благодаря Вам смогла создать меню. Спасибо! Только есть один момент: в IE меню не горизонтальное, а вертикальное и на ширину страницы. Подскажите, как убрать этот бок. Вот CSS код: #menu{list-style:none; width:1100px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{ border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; color:000099; display:block; height:36px; line-height:36px; padding:0px 10px 0px 10px; background:#CCCCFF; text-decoration:none; #menu a:hover{color:#FFFFFF; background:#9999FF;}

Тарас 29.10.2012 в 22:52

Это нужно тестировать. Такой эффект могут давать другие стили сайта. Если есть ссылка на пример, скидывайте сюда.

Валерий 10.09.2012 в 21:38

Вот ещё интересное горизонтальное меню — http://lecaw.ru/index.php/categories/css/item/280-kak-sdelat-gorizontalnoye-vipadayushee-menu-s-effektom-prokrutki-na-css

игорь 30.07.2012 в 18:08

Добрый день . Получилось . Все благодаря ВАМ. Осталось несколько вопросов: 1 поместил внизу шапки сайта <div id …..relative;width:700px;margin:auto;font:bold 12px Verdana;color:#FFF2C0; display:block;height:40px; line-height:36px;padding:0px 1px 0px 1px; 1 это в CSS #uMenuDiv2{list-style:none; width:700px; padding:0; margin:auto;} #uMenuDiv2 li{float:left;font:bold 12px Verdana;color:#FFF2C0;} #uMenuDiv2 a{color:#ffffff; display:block; height:40px; line-height:36px; padding:0px 1px 0px 1px То , что выделено находится внизу шапки сайта и в CSS. Не понятно, что д. б. только в CSS И еще, понравилось , на вашем сайте – постоянная активность кнопки, обозначающая страницу, которая , сейчас открыта. М.б. подскажете . В любом случае огромное ВАМ СПАСИБО за помощь , ведь я узнал что то новое, благодаря ВАМ. С уважением Игорь

Тарас 31.07.2012 в 00:59

Можно хоть в CSS, хоть прямо в теге div. Лучше оставить только в css. Все стили выносят в отдельное место специально, чтобы легче было потом редактировать и менять дизайн. С активной кнопкой ничего не получиться, так как для этого нужно программировать… а как там все на укозе я не знаю. Всего вам доброго! Рад что все получилось.

игорь 29.07.2012 в 19:28

Добрый день, Тарас! Вообщем просмотрел разные варианты горизонтального меню, интернет , форумы ,все попробовал , но ничего не получилось , то искажает дизайн,то еще что то , тоска . Вывод- все что пишут в интернете — это для более- менее подготовленных , специалисты делятся своими разработками, вариантами и т.д. Новичкам это сложно . К ВАМ , убедительная просьба , если есть возможность , помогите довести дело до конца, ну а на нет …Вы и так много времени потратили на меня. С уважением Игорь

Тарас 30.07.2012 в 01:56

Дело в том, что я сам не знаю куда добавлять пункт uMenuDiv2… системой ucoz никогда не пользовался. Добавлять нужно туда где пишуться стили css… берете код, который подан в этой статье (здесь уже с ссылкой на фоновую картинку): #menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:url(background.png) repeat-x; text-decoration:none;} #menu a:hover{color:#fff; background:url(hover.png) repeat-x;} вместо #menu пишите #uMenuDiv2… все остальное оставляете так же… две эти картинки закидаете в папку с файлом стилей (тот куда вы пишите этот код).

игорь 25.07.2012 в 20:22

Здравствуйте. Благодарю за ответы. То , что вы подсказали –сделал. Нравится. Провел день в поисках ответа 1 Посмотрите сайт http://compstil.ucoz.ru/ 2 Не получились блоки . цвет блоков и hover(цвета положил в файловый менеджер), есть адрес ссылки , но … Пробовал разные варианты ,смотрел интернет , форум –но результата нет,т.е. нет картинки как в вашей статье – красиво ,просто. 3 кстати , запутался , по моему эти данные надо вводить в CSS , но тогда м.б. надо создать в CSS пункт типа .. uMenuDiv2… , или эти данные надо добавлять в Site Menus или другое Если , возможно найдете время , пожалуйста посмотрите. Еще раз огромное спасибо за вашу помощь С уважением Игорь

игорь 25.07.2012 в 09:11

4 как разместить ссылки страниц в меню Вообщем , сами увидите , мои недоработки ,Прошу подсказать что надо доделать Еще раз огромное спасибо за вашу помощь С уважением Игорь Спасибо -всего 4 части Игорь Статья нужная , полезная

Тарас 25.07.2012 в 14:11

Вы вставили в меню просто текст, оно должно выглядеть следующим образом: <div> <li><a href=»http://compstil.ucoz.ru/»>Главная</a></li> <li><a href=»http://compstil.ucoz.ru/»>Доска объявлений</a></li> </ul> </div>

игорь 25.07.2012 в 09:09

3 Остались не решенными следующее — #menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu. ????? — #menu li {…} – присваиваем стили для LI элементов. ???? — display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста. Не получилось — padding:0px 10px 0px 10px; делаем внутренние отступы слева и справа по 10 пикселей Не заметил — #menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.???? -color:#fff; – меняем цвет текста на белый. -background:#888; – цвет фона меняем на темно серый.

Тарас 25.07.2012 в 14:16

В вашем случае присваивание стилей будет следующим: #uMenuDiv2 {здесь идут все стили для меню} #uMenuDiv2 li {здесь идут стили для разделов меню, смотрите ответ на последний ваш коммент} #uMenuDiv2 a:hover {color:#fff; background:#888;} — это для ссылок меню при навидении. Рассмотрите еще раз, внимательно, картинку в начале урока! И HTML код меню.

игорь 25.07.2012 в 09:09

2 итак ,я взял Ваш код и поместил его внизу верхней части сайта и постепенно добавлял ,по пункту –получилось следующее <div> Главная Доска объявлений Новости Наука, техника Обратная связь Контакты </ul> </div>

игорь 25.07.2012 в 09:08

пересылаю частями Добрый день. Благодарю за ответ Возникли новые вопросы. Пожалуйста , если возможно , ответьте . Хочется довести дело до конца 1 Посмотрите сайт http://compstil.ucoz.ru/ Есть горизонтальное меню , созданное с вашей помощью. (этот сайт отличается от того . что я упоминал ранее , только названием и служит мне экспериментальной базой , на нем я пробую разные варианты , а потом переношу на основной)

игорь 23.07.2012 в 14:51

Здраввствуйте. сайт http://impexstil.ucoz.ru/ спасибо за проявленное желание помочь на сайте видно горизонтальное меню , надо его установить по центру и хотел бы такие же кнопки С уважением Игорь

Тарас 24.07.2012 в 00:14

<div> <ul> содержимое меню </ul> </div> вот так выглядит ваше меню… Попробуйте назначить к div ширину width:500px; или больше, главное чтобы хватало на все разделы. После этого к этому же div блоку добавьте атрибут margin:auto;

игорь 22.07.2012 в 14:16

Добрый день! Благодарю за статью .Очень полезна. Я, не специалист , поэтому похвала будет не корректно, Если позволите , вопрос: -у меня сайт ucoz, есть вертикальное меню , но надо продублировать в горизонтальном , с последующей переделкой вертикального меню в категории и др. Пока , не ясен вопрос в какой раздел CSS вставить код С уважением Игорь

Тарас 23.07.2012 в 14:39

Здравствуйте Игорь! К сожалению на ucoze я никогда не работал и не знаю что и к чему… Может быть что-то посоветую, если дадите ссылку на сайт (страницу).

Павел 03.07.2012 в 16:33

Спасибо! Ваша статья очень помогла мне!

timon 04.06.2012 в 12:20

Спасибо огромное!

artiom 14.05.2012 в 15:35

великолепно! респект и благодарность автору!)

Тарас 14.05.2012 в 15:59

Спасибо, Артем!

Устим 01.04.2012 в 19:45

Тарас, спасибо за ответ. Пробовал и так и так. Ничего не происходит. Только липнет к левому краю и всё…( Размпер остаётся тот же.

Устим 31.03.2012 в 17:14

Здравствуйте. Хотел бы узнать, как зделать так чтобы бекграунд меню был до самого конца сайта, а не заканчивался на последнем разделе. У меня шляпа сайта на весь экран по горизонтали, а меню от левого края идёт до средины, потому что всего 5-ть разделов. А я хотел бы чтобы полоса меню шла до конца. А то как то очень глупо получается сейчас)))

Тарас 01.04.2012 в 16:54

Уберите аттрибут width:500px, или установите 100%, должно работать.

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

sitear.ru

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

От автора: приветствую вас на нашем блоге, дорогие читатели. Сегодня я предлагаю вам сделать в html меню для сайта. Css нам тоже в этом деле поможет – с его помощью мы оформим нашу навигацию.

Вертикальное меню

Первым делом давайте попробуем сделать вертикальную навигацию, так как сегодня она очень распространена на многих сайтах. В основном ее делают с помощью списка, но в html5 появился специальный тег для важных ссылок на странице – nav. В него мы и обернем наш список. Итак, разметка:

<nav class = «main-menu»> <ul> <li><a href = «#»>1</a></li> <li><a href = «#»>2</a></li> <li><a href = «#»>3</a></li> <li><a href = «#»>4</a></li> <li><a href = «#»>5</a></li> </ul> </nav>

<nav class = «main-menu»> <ul> <li><a href = «#»>1</a></li> <li><a href = «#»>2</a></li> <li><a href = «#»>3</a></li> <li><a href = «#»>4</a></li> <li><a href = «#»>5</a></li> </ul> </nav>

Сразу же наше меню получило свой уникальный стилевой класс, чтобы мы могли вернуться к его оформлению. Также в каждый пункт списка нужно вписать еще и ссылку, потому на реальном сайте эти пункты кликабельны. Конечно, в нашем случае это просто пустые ссылки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Приступаем к оформлению

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

.main-menu ul{ list-style: none; margin: 0; padding: 0; } .main-menu li a{ text-decoration: none; color: black; display: block; padding: 25px; }

.main-menu ul{ list-style: none; margin: 0; padding: 0; } .main-menu li a{ text-decoration: none; color: black; display: block; padding: 25px; }

Кроме этого, мы превратили ссылки в блочные элементы, так как именно к ним будут применяться все стили для определения внешнего вида. Сразу же дадим внутренние отступы, чтобы наш блок увеличился в размерах. Теперь необязательно наводить именно на слова для перехода, поскольку элемент стал блочным и переход произойдет, даже если нажимать на пустые места в блоках.

Если вам необходимо, то вы можете добавить произвольные цвета фона к ссылкам, чтобы оформление не выглядело слишком скучным. Конечные стили в нашем случае выглядят так:

.main-menu li a{ text-decoration: none; color: black; display: block; padding: 10px 25px; background: #75CB62; border: 1px solid brown; width: 70px; }

.main-menu li a{ text-decoration: none; color: black; display: block; padding: 10px 25px; background: #75CB62; border: 1px solid brown; width: 70px; }

Переопределим немного отступы, зададим фон и рамку, и, самое главное, нужно задать ширину, потому что без этого свойства наши блоки будут растягиваться на всю ширину окна, что не есть хорошо. Теперь наша навигация выглядит так:

По желанию можно добавить внутрь какие-нибудь иконки, изменить сам шрифт, также можно добавить изменение цвета фона при наведении на пункты.

.main-menu li a:hover{ background: #53C653 }

.main-menu li a:hover{ background: #53C653 }

Вот так вот и делается вертикальное меню для сайта на css, а еще его очень легко преобразовать в горизонтальное, что мы сейчас и сделаем.

Горизонтальное меню

Собственно, из уже получившегося меню можно легко сделать горизонтальное. Для этого всего лишь нужно записать:

.main-menu ul li{ display: inline-block; }

.main-menu ul li{ display: inline-block; }

Однако если преобразовать пункты списка в блочно-строчные, то между ними образуется небольшой отступ справа. Он равен четырем пикселям, поэтому если вы хотите от него избавиться, то нужно задать отрицательный margin:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Можно поступить и по-другому: не использовать свойство display, а отправить все блоки влево с помощью float: left, тогда никаких отступов между пунктами и не будет.

Как сделать выпадающее меню для сайта

Давайте оставим inline-block, дописав отрицательный отступ справа и реализуем для первого пункта раскрывающееся подменю с тремя пунктами. Для этого нам придется изменить для пунктов списка правило:

.main-menu ul > li{ display: inline-block; margin-right: -4px; }

.main-menu ul > li{ display: inline-block; margin-right: -4px; }

Указав перед li знак больше мы говорим браузеру, чтобы он применил свойство только к непосредственно вложенным пунктам списка. Новая разметка выглядит так:

<nav class = «main-menu»> <ul> <li><a class = «dropdown» href = «#»>Пункт 1</a> <ul class = «sub-menu»> <li><a href = «#»>Подпункт 1</a></li> <li><a href = «#»>Подпункт 2</a></li> <li><a href = «#»>Подпункт 3</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a></li> <li><a href = «#»>Пункт 3</a></li> <li><a href = «#»>Пункт 4</a></li> <li><a href = «#»>Пункт 5</a></li> </ul> </nav>

<nav class = «main-menu»> <ul> <li><a class = «dropdown» href = «#»>Пункт 1</a> <ul class = «sub-menu»> <li><a href = «#»>Подпункт 1</a></li> <li><a href = «#»>Подпункт 2</a></li> <li><a href = «#»>Подпункт 3</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a></li> <li><a href = «#»>Пункт 3</a></li> <li><a href = «#»>Пункт 4</a></li> <li><a href = «#»>Пункт 5</a></li> </ul> </nav>

Как видите, мы добавили вложенный список в первый пункт и добавили к нему класс. Добавим такие стили, чтобы окончательно оформить наши меню.

.main-menu ul > li{ display: inline-block; position: relative; margin-right: -4px; } .sub-menu{ margin: 0; padding: 0; position: absolute; }

.main-menu ul > li{ display: inline-block; position: relative; margin-right: -4px; } .sub-menu{ margin: 0; padding: 0; position: absolute; }

Мы задали абсолютное позиционирование нашей вложенной навигации, чтобы она выпала из потока. Также заметьте, что первой ссылке задан класс dropdown. Это для того, чтобы задать картинку-фон, которая показывала бы, что меню выпадающее.

Вот такую картинку мы поставим в фон ссылке.

.main-menu .dropdown{ background:#75CB62 url(arrow.png) no-repeat 80% 50%; }

.main-menu .dropdown{ background:#75CB62 url(arrow.png) no-repeat 80% 50%; }

Почти готово! Пока что наше подменю видно на странице, нужно его скрыть с помощью display: none. Осталось прописать вот такой вот не самый понятный селектор:

.main-menu .dropdown:hover ~ .sub-menu{ display: block; }

.main-menu .dropdown:hover ~ .sub-menu{ display: block; }

Тут мы сначала указываем, что стили будут применены, когда мы наведем на элемент с классом dropdown (а это наш первый пункт), но применяться они не к самой ссылке, а к нашему подменю. Это возможно благодаря тому, что мы поставили знак ~ и дописали после него нужный селектор.

По сути, этот селектор говорит браузеру следующее: при наведении на dropdown сделай видимым элемент sub-menu, который находиться в разметке где-то дальше.

Если вдруг нам какой-то другой пункт тоже нужно будет сделать выпадающим, то просто допишем для него класс dropdown, создадим внутри него свой список .sub-menu и все будет работать.

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

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

На этом я на сегодня с вами прощаюсь. Желаю вам удачного изучения веб-технологий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Создаем горизонтальное меню — Блог Вячеслава Волкова

Навигационное меню сайта — это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.

Множество разработчиков создает этот элемент различными способами, но я хотел бы представить Вашему вниманию одну из самых удачных практик.

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

Как видно, структура очень проста и понятна. Для стандарта HTML 4 существует элемент — div, в котором и находится наше меню. Для HTML 5 — мы используем элемент nav. Приведем листинг HTML кода.

Структура для HTML 4

<div>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</div>

Структура для HTML 5

<nav>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</nav>

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

Зададим фиксированную высоту тегу <ul>, например 30 пикселей.

Для тега <li> зададим высоту строки такую же, как и высота самого <ul>, то есть 30 пикселей, это необходимо для того, что бы текст находился по середине.

Как только мы зададим свойство float у элемента <li>, то наше меню из вертикального превратится в горизонтальное, что нам и надо. Стоит заметить, что элементы с установленным свойством float автоматически становятся элементами уровня блока, потом этот блок смещает влево или вправо. Высота у тегов <li> должна быть такая же, как и у <ul>

Для тега <a> устанавливаем свойство display: block, это необходимо для того, что бы элемент занял всю область элемента <li> и вся эта область была «кликабельна».

Теперь можно создать иерархическое меню

<nav>
<ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 <li><a href="#">Страница 5</a>
   <ul>
    <li><a href="#">Страница 5-1</a></li>
    <li><a href="#">Страница 5-2</a></li>
    <li><a href="#">Страница 5-3</a></li>
   </ul>
 </li>
</ul>
</nav>

А теперь используя CSS стилизуем наше меню

ul.site-navigation {
height: 30px;
 /* Зададим фон для списка */
 background-color: #3DA4B7;
}
ul.site-navigation li {
 line-height: 30px;
 height: 30px;
 float:left;
 width:auto;
}
ul.site-navigation li a {
 display: block;
 color: #fff;
 text-decoration:none;
 padding: 0 10px;
 border-right: 1px solid #f4f4f4;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.site-navigation li a:hover {
 background-color: #57BCCC;
}
ul.site-navigation li ul {
 background-color: #3DA4B7;
 display:none;
}

ul.site-navigation li ul li {
 float: none;
}
ul.site-navigation li:hover ul {
 display:block;
}

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

Статья подготовлена с использованием материалов сайта http://woorkup.com

vexell.ru

Как сделать простое горизонтальное меню на CSS

<!DOCTYPE html>

<html lang=»ru»>

<head>

    <meta charset=»UTF-8″>

    <title>Простое горизонтальное меню</title>

    <link rel=»stylesheet» href=»style.css»>

</head>

<body>

    

    <div>

        

        <nav>

            <ul>

                <li><a href=»#»>Главная</a></li>

                <li><a href=»#»>Стихи</a></li>

                <li><a href=»#»>Биография</a></li>

                <li><a href=»#»>Фотографии</a></li>

                <li><a href=»#»>История</a></li>

            </ul>

        </nav>

        

        <div>

            

            <div>

              <hr>

               <h2>Иосиф Бродский — Не выходи из комнаты</h2>

                <p>Не выходи из комнаты, не совершай ошибку.</p>

                <p>Зачем тебе Солнце, если ты куришь Шипку?</p>

                <p>За дверью бессмысленно все, особенно — возглас счастья.</p>

                <p>Только в уборную — и сразу же возвращайся.</p>

                <br>

                <p>О, не выходи из комнаты, не вызывай мотора.</p>

                <p>Потому что пространство сделано из коридора</p>

                <p>и кончается счетчиком. А если войдет живая</p>

                <p>милка, пасть разевая, выгони не раздевая.</p>

                <br>

                <p>Не выходи из комнаты; считай, что тебя продуло.</p>

                <p>Что интересней на свете стены и стула?</p>

                <p>Зачем выходить оттуда, куда вернешься вечером</p>

                <p>таким же, каким ты был, тем более — изувеченным?</p>

                <br>

                <p>О, не выходи из комнаты. Танцуй, поймав, боссанову</p>

                <p>в пальто на голое тело, в туфлях на босу ногу.</p>

                <p>В прихожей пахнет капустой и мазью лыжной.</p>

                <p>Ты написал много букв; еще одна будет лишней.</p>

                <br>

                <p>Не выходи из комнаты. О, пускай только комната</p>

                <p>догадывается, как ты выглядишь. И вообще инкогнито</p>

                <p>эрго сум, как заметила форме в сердцах субстанция.</p>

                <p>Не выходи из комнаты! На улице, чай, не Франция.</p>

                <br>

                <p>Не будь дураком! Будь тем, чем другие не были.</p>

                <p>Не выходи из комнаты! То есть дай волю мебели,</p>

                <p>слейся лицом с обоями. Запрись и забаррикадируйся</p>

                <p>шкафом от хроноса, космоса, эроса, расы, вируса.</p>

                <hr>

            </div>

            

        </div>

        

    </div>

    

</body>

</html>

hi-blog.ru

Горизонтальное меню для сайта на HTML и CSS

Так уж исторически сложилось, что для реализации навигации на сайте используют ненумерованный список. Поэтому, имея стандартную структуру HTML, будем добиваться необходимого нам результата при помощи CSS стилей и в этой статье рассмотрим два, наиболее часто употребляемых варианта.

Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:

<div>
 <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

<div>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Далее добавляем CSS стили меню:

#menu_1{
    background-color: #69c;
}
    #menu_1 ul{
     list-style: none;
       margin: 0;
      padding: 0;
 }
   #menu_1 ul:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #menu_1 li{
         float: left;
        }
           #menu_1 li a{
               display: block;
             height: 50px;
               line-height: 50px;
              padding: 0 20px;
                background-color: #69c;
             color: #fff;
                text-transform: uppercase;
              text-decoration: none;
              cursor: pointer;
            }
           #menu_1 li a:hover{
             background-color: #369;
         }

Тут поподробнее:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;
2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;
3. Запрещаем обтекание, подробнее как сделать читаем в [url=http://falbar.ru/article/zapret-obtekaniya-tremya-sposobami-na-css target=_blank]ранее написанной статье[/url], это необходимое действие, так как для пунктов меню будет использоваться свойство float;
4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;
5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;
6. Готово.

В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.

HTML без изменений, для примера меняем id=menu_2.

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

#menu_2 ul{
   list-style: none;
   margin: 0;
  padding: 0;
 text-align: justify;
    overflow: hidden;
   height: 50px;
}
#menu_2 ul:after{
 content: "";
  width: 100%;
    display: inline-block;
}
 #menu_2 li{
     display: inline-block;
  }

После использования этих стилей все пункты станут одинаковыми по ширине, а также растянуться по всей ширине обертки.

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с id=menu_3.

CSS, опять же, стандартный, отличаются только эти строки:

#menu_3 ul{
    list-style: none;
   margin: 0;
  padding: 0;
 display: table;
}
    #menu_3 li{
     display: table-cell;
    }

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с id=menu_4).

Вот такое вот горизонтальное меню, полностью валидное и без лишних свойств и тегов. Скачиваем архив с примером и пользуемся!

falbar.ru

Как сделать резиновое меню? Способы создания горизонтальной навигации на сайте.

Итак, мы рассмотрим всевозможные варианты того, как создать резиновое CSS меню. Начнем с создания навигации из строчных (inline) элементов.

Горизонтальное резиновое текстовое меню

Суть сводится к тому, чтобы равномерно распределить текстовые пункты навигации на всю ширину. Слева и справа (у границ меню) отступы отсутствуют, а между отдельными словами расстояния абсолютно одинаковые. В основе этого способа лежит использование свойства text-align:justify,которое, как известно, распределяет текст по всей ширине за счет изменения расстояний между словами, что собственно нам и нужно.

Но если строка одна, как, собственно, и должно быть когда мы создаем меню, текст не распределится по всей ширине. Потребуется небольшая хитрость, для того, чтобы его заставить. Используем для этого псевдоэлемент :before, который сгенерирует нам дополнительное содержимое, размер одной строки будет превышен и текст растянется. Этот дополнительный контент(в примере 1) не будет виден благодаря обрезке overflow:hidden. Можно дополнительно скрыть его с помощью height:0 или visibility:hidden.

Еще нюансы кода: для того, чтобы слова в отдельных пунктах не разрывались применяется inline-block вместо inline  (в правилах для a).

Смотрите код  и действующий пример.

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Мои работы</a></li> <li><a href=»#»>Отзывы</a></li> <li><a href=»#»>Технологии</a></li> <li><a href=»#»>Блог</a></li> </ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Мои работы</a></li> <li><a href=»#»>Отзывы</a></li> <li><a href=»#»>Технологии</a></li> <li><a href=»#»>Блог</a></li> </ul>

*{ padding: 0; margin: 0; } ul { text-align: justify; overflow: hidden; height: 20px; margin-top: 100px; } li { display: inline; } li a { display: inline-block; } a:hover { color: #ff0000; } ul:after { content: «1»; margin-left: 100%; display: inline-block; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

*{ padding: 0; margin: 0; } ul { text-align: justify; overflow: hidden; height: 20px; margin-top: 100px; } li { display: inline; } li a { display: inline-block; } a:hover { color: #ff0000; } ul:after { content: «1»; margin-left: 100%; display: inline-block; }

Демонстрационный пример

Горизонтальное меню из блоков одинаковой ширины

С использованием свойства display:table

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

Поэтому мы поступим другим образом и применим к нашей таблице (или к элементам ведущим себя как таблица — в примере список ul-li) свойство table-layout. Данное свойство позволяет упрощенно вычислять ширину ячеек таблицы на основе первой строки, причем для его корректной работы обязательно должна быть задана общая ширина таблицы. Поскольку ширину отдельных ячеек мы ни явно, ни косвенно указывать не будем, table-layout разделит таблицу на ячейки одинаковой ширины, что  и требуется получить.

<div> <ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul>

<div> <ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul>

*{ margin: 0; padding: 0; } .tab ul{ margin-top: 50px; display: table; width: 100%; table-layout: fixed; } .tab li{ display: table-cell; background: violet; text-align: center; padding: 10px 0; border: 1px solid #222; border-left: none; vertical-align: middle; } .tab li:first-child{ border-left: 1px solid #222; } .tab a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

*{ margin: 0; padding: 0; }   .tab ul{ margin-top: 50px; display: table; width: 100%; table-layout: fixed;   }   .tab li{ display: table-cell; background: violet; text-align: center; padding: 10px 0; border: 1px solid #222; border-left: none; vertical-align: middle;   }   .tab li:first-child{ border-left: 1px solid #222; }   .tab a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

Демонстрационный пример

С шириной пунктов в процентах

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Мои работы</a></li> <li><a href=»#»>Отзывы</a></li> <li><a href=»#»>Технологии</a></li> <li><a href=»#»>Блог</a></li> </ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Мои работы</a></li> <li><a href=»#»>Отзывы</a></li> <li><a href=»#»>Технологии</a></li> <li><a href=»#»>Блог</a></li> </ul>

*{ margin: 0; padding: 0; } ul{ margin: 100px 10px 0; list-style:none; } li{ float: left; width: 20%; text-align: center; } li a{ background: silver; display: block; padding: 10px 0; border:1px solid #333; border-left: none; text-decoration: none; color: #000; } li:first-child a{ border-left: 1px solid #333; } li a:hover{ background: lightblue; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

*{ margin: 0; padding: 0; } ul{ margin: 100px 10px 0; list-style:none; } li{ float: left; width: 20%; text-align: center; } li a{ background: silver; display: block; padding: 10px 0; border:1px solid #333; border-left: none; text-decoration: none; color: #000; } li:first-child a{ border-left: 1px solid #333; } li a:hover{ background: lightblue; }

Демонстрационный пример

Горизонтальное меню из блоков с одинаковыми отступами

С использованием  Flexible Box Model

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

Красными стрелками показано расстояние между текстом и правой рамкой блока, это как раз те добавочные отступы, которые должны меняться динамически и быть одинаковыми для всех пунктов. Расстояние между словами пунктов меню также  в таком меню одинаково (так как равно удвоенному отступу).

Сначала мне вообще казалось, что подобное можно создать только лишь используя  JavaScript. Но решение в действительности есть и на чистом CSS — применение технологии CSS 3, которая называется Модель Гибкого Поля (Flexible Box Model). Она позволяет с легкостью осуществлять многие трюки , которые было выполнить с набором стандартных свойств CSS 2.1 весьма непросто. Это и выравнивание по вертикали, и колонки одинаковой высоты, и возможность менять порядок следования столбцов  не редактируя HTML и т.д., в общем  можно написать целую отдельную статью.

Попробуем применить данную методику на практике для наших нужд. Сначала  присвоим списку ul  класс  container и зададим ему свойство  display:box. Данное значение свойства display является новым и  сообщает браузеру, что данный блок следует рассматривать как  особый элемент, называемый «гибким  полем».  Его дочерние элементы li будут выводиться горизонтально, благодаря свойству box-orient.

Следующее очень важное свойство, которое должно быть присвоено пунктам меню — box-flex. Оно задает степень гибкости  элементов li, т.е. от него зависит как блоки поделят между собой свободное пространство. В примере ниже для  пунктов меню задано значение box-flex:1, следовательно они разделят доступное пространство в равной пропорции. Таким образом поставленная задача решена.

Далее приводится код  HTML и CSS, а также практический пример функционирования меню.

<div> <ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul> </div>

<div> <ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul> </div>

*{ padding: 0; margin: 0; } .container{ margin: 100px 10px 0; } .container ul{ display: box; display: -moz-box; display: -o-box; display: -ms-box; display: -webkit-box; box-orient:horizontal; o-box-orient:horizontal; -moz-box-orient:horizontal; -ms-box-orient:horizontal; -webkit-box-orient:horizontal; list-style: none; } .container li{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1; background: pink; text-align: center; padding: 10px 0; border: 1px solid #222; border-left: none; } li:first-child{ border-left: 1px solid #222; } a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

*{ padding: 0; margin: 0; } .container{ margin: 100px 10px 0; } .container ul{ display: box; display: -moz-box; display: -o-box; display: -ms-box; display: -webkit-box;   box-orient:horizontal; o-box-orient:horizontal; -moz-box-orient:horizontal; -ms-box-orient:horizontal; -webkit-box-orient:horizontal;   list-style: none; } .container li{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1;   background: pink; text-align: center; padding: 10px 0; border: 1px solid #222; border-left: none; } li:first-child{ border-left: 1px solid #222; } a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

Демонстрационный пример

С  использованием display:table (либо таблицы)

Все было бы хорошо в первом варианте, если бы не существенный минус — поддержка браузеров оставляет желать лучшего, причем для достижения хоть какой-то кроссбраузерности приходится применять собственные свойства браузеров с префиксами. Такие как   -moz (Firefox),  -webkit (Chrome и все браузеры на  основе Chromium, включая последние версии Оперы — как известно разработчики отказались от  использования движка Presto),  c поддержкой старых версий Оперы и Internet Explorer все еще  хуже.

Поэтому целесообразным является использование другого метода, более-менее  кроссбраузерного. Первое, что приходит на ум — таблицы. Но тут нас ожидает  разочарование:  пока пункты примерно одинаковой длины вид меню в принципе нормальный, стоит только задать длинный или короткий  пункт — таблица становится уродливо непропорциональной. У длинного пункта отступы намного больше, чем у других, соответственно он намного шире, у короткого пункта самые маленькие отступы — он самый короткий. Видимо это связано с тем, как таблица перераспределяет свободное пространство: больше ширина пункта — больше дополнительного пространства выделяется на него из имеющегося. И вследствие этой неравномерности  получается такой некрасивый перекос.

Как это решить? Например, если добавить для ячеек свойство width:1%,то ситуация в корне меняется. Точного объяснения не могу дать, предположу, что когда ширина ячеек одинакова и заведомо меньше содержимого, свободное пространство начинает распределяться между ними поровну. Чем бы это не объяснялось, на выходе  мы получаем результат практически идентичный использованию Flexible Box Model.

Далее приведен код этого варианта навигации.

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Работы и портфолио</a></li> <li><a href=»#»>О</a></li> <li><a href=»#»>Контакты</a></li> </ul>

ul{ display: table; width: 100%; border-collapse:collapse; margin-top: 100px; } li{ display: table-cell; background: bisque; text-align: center; padding: 10px 0; border: 1px solid #222; width:1%; white-space: nowrap; font: 16px Verdana, sans-serif; } a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul{ display: table; width: 100%; border-collapse:collapse; margin-top: 100px; } li{ display: table-cell; background: bisque; text-align: center; padding: 10px 0; border: 1px solid #222; width:1%; white-space: nowrap; font: 16px Verdana, sans-serif; }   a{ text-decoration: none; color: #000; font: 16px Verdana, sans-serif; }

Демонстрационный пример

Но он также не поддерживается IE и Opera (Presto), видимо у данных браузеров другой алгоритм расчета ширины ячеек. Поэтому пример придется сильно усложнить.

К сожалению, более простого варианта не знаю, но он позволяет добиться наконец одинакового отображения для IE8-IE11.

<ul> <li></li> <li><a href=»#»>Главная</a></li> <li></li> <li></li> <li><a href=»#»>Статьи</a></li> <li></li> <li></li> <li><a href=»#»>Работы и портфолио</a></li> <li></li> <li></li> <li><a href=»#»>Поддержка</a></li> <li></li> <li></li> <li><a href=»#»>О компании</a></li> <li></li> </ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<ul> <li></li> <li><a href=»#»>Главная</a></li> <li></li> <li></li> <li><a href=»#»>Статьи</a></li> <li></li> <li></li> <li><a href=»#»>Работы и портфолио</a></li> <li></li> <li></li> <li><a href=»#»>Поддержка</a></li> <li></li> <li></li> <li><a href=»#»>О компании</a></li> <li></li> </ul>

*{ margin:0; padding:0; } ul { width:100%; display:table; background:#000; border: 1px solid red; } ul li { vertical-align:top; width:1%; white-space:nowrap; display:table-cell; padding:10px 0; } ul a { color:#fff; white-space:nowrap; } li.space { width:auto !important; border-right: 1px solid red; } li.space+li.space{ border-right:none } li:first-child{ border-right: none; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

*{ margin:0; padding:0; }   ul { width:100%; display:table; background:#000; border: 1px solid red; } ul li { vertical-align:top; width:1%; white-space:nowrap; display:table-cell; padding:10px 0; } ul a { color:#fff; white-space:nowrap; } li.space { width:auto !important; border-right: 1px solid red; } li.space+li.space{ border-right:none } li:first-child{ border-right: none; }

Блоки содержащие текст имеют минимальную ширину, так как задано правило width:1%, а отступы, меняющиеся в зависимости от ширины формируют  дополнительные ячейки справа и слева (класс space), благодаря правилу

Демонстрационный пример

Если для вас критична поддержка IE 7, используйте таблицу, если не очень — лучше использовать список и применять для него свойство CSS display:table. Во всяком случае использование таблиц мне кажется меньшим злом, чем expression. Но в конечном итоге решать вам.

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

nikel-blog.ru