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

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

Как это реализовать?

Каждый программист может предложить свой способ решения поставленной задачи. Все зависит от его фантазии, уровня профессионализма и способностей. Наиболее распространенное решение этой проблемы - использование таблицы. Также многие предложили бы воспользоваться javascript. Тех, кто предложил бы воспользоваться свойством display со значением table или table-cell — спешу огорчить. Этот способ не обладает достаточной кроссбраузерностью.

Наше решение

Наше предложение будет воздвигнуто на прочном фундаменте из знаний HTML5 и CSS3.

Суть процесса базируется на свойстве text-align со значением justify. Для тех кто забыл - напоминаю: это свойство ориентирует выравнивание текста по всей ширине контейнера.

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

Ниже представлен код, который служит примером создания «резинового» меню:

HTML

<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>

CSS

ul {
	text-align: justify;
	overflow: hidden; /* устраняет побочное влияние метода*/
	height: 20px; /* тоже устраняет лишнее */
	cursor: default; /* устанавливает изначальную форму курсора*/
	margin: 50px 100px 0 100px;
	background: #eee;
	padding: 5px;
}
li {
	display: inline; /* делает пункты меню текстовыми */
}
li a {
	display: inline-block; /* устраняет разрыв слов в меню */
	color: #444;
}
a:hover {
	color: #ff0000;
}
ul:after { /* формирование второй строки для отработки метода */
	content: "1";
	margin-left: 100%;
	height: 1px;
	overflow: hidden;
	display: inline-block;
}

Для работы в старом добром Internet Explower необходимо дополнительно внести в CSS следующий код

ul {
	z-index: expression(runtimeStyle.zIndex = 1,
 insertAdjacentHTML('beforeEnd&apos, '<li class="last"></li>'));
}
ul .last {
	margin-left: 100%;
}
* html ul { /* need ie6 only */
	height: 30px;
}

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

Недостатки метода

1. Объемный код
2. Невозможность определения активного состояния элемента через селектор класса. Это происходит из-за разрыва слов в пунктах (если оно одно). Решением этой проблемы будет добавление еще однеого контейнера внутрь элементов списка.
3. Для выпадающего меню нужно подгонять код из-за негативного влияния overflow.

В каких браузерах работает?