Показать Меню
falbar Горизонтальное меню HTML и CSS

Два способа сделать меню для сайта на HTML и CSS

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

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

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

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

<div id="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>
		<li><a href="#">Пункт 6</a></li>
		<li><a href="#">Пункт 7</a></li>
	</ul>
</div>

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

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

<div id="menu_1">
	<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. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float: left;;
  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).

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

Подписаться на обновления

Комментариев еще не оставлено