30.04.2014

Меню на всю ширину блока с равным отступом

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

В такой ситуации можно обойтись простым css, для этого создаем меню.

И добавляем стили, в которых блок ul будет являться таблицей, а каждый элемент li и a ячейкой данной таблицы.

HTML
CSS

<ul class="full-width">
	<li>
		<a href="#">О компании</a>
		<ul>
			<li><a href="#">История</a></li>
			<li><a href="#">Успехи</a></li>
			<li><a href="#">Команда</a></li>
		</ul>
	</li>
	<li class="active"><a href="#">Услуги</a></li>
	<li><a href="#">Технологии</a></li>
	<li><a href="#">Проекты</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

ul.full-width{
	width: 100%; /* Ширина основного блока меню */
	height: 50px; /* Высота основного блока меню */
	position: relative;
	display: table;
	margin: 0;
	padding: 0;
}
ul.full-width li {
	display: table-cell;
	position: relative;
}
ul.full-width li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-align:center;
	background: #FFF;
	line-height: 50px; /* Приравниваем к высоте, чтобы выровнять текст по вертикали */
}
ul.full-width li ul {
	display: none; /* Скрываем выпадающее меню */
	position: absolute;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
ul.full-width li ul li {
	display: block;
}
ul.full-width li:hover ul {
	display: block; /* Показываем выпадающее меню, где оно есть, при наведении */
}

Демонстрация