HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

Верстка меню с разделителями

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

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

А делается это так. Берем обычное меню в виде списка ul li. Ставим разделитель, в данном случае левый бордер каждой li. Внешнему ul задаем overflow:hidden и смещаем все li влево, чтобы скрылся разделитель на первом пункте меню. Вот и все. Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Меню с разделителями</title>
<style type="text/css">
#menu{
	list-style:none;
	padding:0;
	margin:0 auto;
	width:500px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
#menu li{
	float:left;
	padding:0 20px;
	margin:0;
	border-left:1px solid #000;
	position:relative;
	z-index:1;
	left:-21px;
}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Услуги</a></li>
	<li><a href="#">Контакты</a></li>
</ul>
</body>
</html>

Position:relative на ul необходим, т.к. ие6 не хочет просто так, даже при наличии overflow:hidden скрывать 1й разделитель.

При легкой модификации такой же прием можно использовать и для вертикального меню с горизонтальными разделителями.

Метки: css, меню

Запись опубликована 02.06.2010 в 13:19 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (7) на “Верстка меню с разделителями”

Slaffko:

09.10.2010 в 16:52

Интересное решение.
Я использую такие приемы:
Сначала такой:
#menu li{border-left:1px solid #000;}
#menu li:first-child{border:none;}
А потом такой:
#menu li+li{border-left:1px solid #000;}
Конечно ИЕ6 был против таких приемов для его прописывал
#menu li.item1{border:none;}/*у меня обычно все пункты меню имеют свой класс*/
Chudo:

06.12.2010 в 11:25

Прикольно! нужно попробовать, необычное решение)))
AlekVolsk:

29.03.2011 в 12:52

css:
div.Menu {height: 22px; width:100%; border:1px solid #FFFFFF;}
#menu {height: 22px; list-style:none; padding:0; margin:0 auto; overflow:hidden; position:relative; z-index:1;}
#menu li {height: 22px; float:left; padding:3px 20px; border-right:1px solid #FFFFFF; position:relative; z-index:1; left:-4px;}

html:

Item1
Item2
Item3
Item4
Item5
AlekVolsk:

29.03.2011 в 12:54

мдаа, с html-кодом на форуме косяк(((
aus bus:

20.05.2011 в 02:08

ul {position:relative;overflow:hidden;zoom:1;}
li {float:left;border-left:1px black solid;margin-left:-1px;}

кажется, этого достаточно. нет?
grottesk:

25.11.2011 в 14:33

Отличная штука спасибо!

Продвижение сайтов
zubovd:

21.12.2011 в 17:29

Очень доступно!
Портал игр