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

@**Recover** · 05.10.2010, 23:24

Для начинающих верстальщиков одной из наиболее сложных задач является выбор, какими элементами пользоваться, чтобы создавать меню. Встречается масса вариантов: таблицы, дивы, <p>,<br> некоторые просто записывают ссылки в одну строчку, применяя всевозможные разделители. Обычно отталкиваются от того, какой вид меню предполагается на сайте-горизонтальное или вертикальное.

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

Код:

<html><body>
<ul id="menu">
		<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>
		<li><a href="">Ссылка 8</a></li>
		<li><a href="">Ссылка 9</a></li>
	</ul>


	
</body>
</html>

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

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

Код:

<style>

ul#menu{
	margin		: 0;
	padding		: 0;
	display		: table;/*сначала заставим   ul вести себя как табличный элемент */
	width		: 100%;/*разворачиваем, к примеру, его на всю ширину страницы*/
}

#menu li{
	display		: table-cell;/*ну а затем фокус - все li будут вести себя как ячейки одной строки таблицы, то есть выстроятся наши ссылки в один ряд */
	width		: 11%;/ширина всех ячеек будет одинаковой, чтобы обеспечить резиновую верстку задаем ее в процентах - 100%/9=11,1% округляем до 11*/
	text-align	: center;/*для красоты*/
}

*html #menu li{
	display		: inline;
	zoom		: 1;/* обеспечиваем кроссбраузерность к сожалению ie6 table, table-cell не поддерживает, приходится хитрить */

}
</style>

А если еще добавить:

Код:

#menu a:link, #menu a:hover, #menu a:visited{
	display		: block;
	background      : blue;
	padding		: 5px 0;
	font		: 12px verdana;
	color		: #fff;
	text-decoration	: none;
}

 #menu a:hover{
	background      : red;	
}

Получим и эффекты при наведении. Для полной красоты можно, вставить

Код:

ul#menu{
	border-right	: 1px solid #fff;
}

#menu li{
	border-left	: 1px solid #fff;
}

И заканчивая экзотическими:

Код:

ul#menu{
	background      : url("/images/fon.jpg") center right no-repeat;
}

#menu li{
	background      : url("/images/fon.jpg") center left no-repeat;
}

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

Ниже приведен полный исходный код подобного меню:

Код:

<html><body>

<style>
ul#menu{

	margin		: 0;
	padding		: 0;
	display		: table;/*для начала заставим   ul вести себя как табличный элемент */
	width		: 100%;
	border-right	: 1px solid #fff;
}

#menu li{
	display		: table-cell;/*а затем - все li как ячейки одной строки таблицы, то есть выстроим наши картинки в один ряд, о том */
	text-align	: center;/*для красоты*/
	width		: 11%;/*100%/9=11,1% округляем до 11*/
border-left	: 1px solid #fff;
}

*html #menu li{
	display		: inline;
	zoom		: 1;/* обеспечиваем кроссбраузерность к сожалению ie6 table, table-cell не поддерживает, приходится хитрить */

}

#menu a:link, #menu a:hover, #menu a:visited{
	display		: block;
	background      : blue;
	padding		: 5px 0;
	font		: 12px verdana;
	color		: #fff;
	text-decoration	: none;
}

 #menu a:hover{
	background      : red;	
}

</style>
	<ul id="menu">
		<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>
		<li><a href="">Ссылка 8</a></li>
		<li><a href="">Ссылка 9</a></li>
	</ul>

</body></html>

@**x997** · 06.10.2010, 10:24

Recover,мегаполезное чтиво. еще в таком же духе будет инфа ?

@**tosick** · 06.10.2010, 11:42

Поддерживаю. Просим продолжения :-)

@Tosha · 06.10.2010, 18:44

Весьма интересно!
Тоже интересно о продолжении

@**Recover** · 06.10.2010, 22:27

спасибо за лестные отзывы)
продолжение планируется

@Umka · 06.10.2010, 23:21

Recover, а вот про меню, типа как на этом демо что скажете?

http://demo.rockettheme.com/?template=affinity
...имеется в виду верхнее меню.

Ну или вот:
http://www.yootheme.com/demo/oct10/

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

@**Byblik** · 07.10.2010, 00:34

Цитата:

Сообщение от umka from ufa

что то в них меня смущает, а что не пойму...

Такое меню целессобразно использовать на сайтах со сложной структурой, так как меню имеет 3 уровня вложенности, если постараться, то можно и n - уровней прикрутить.
А эффект анимации, ради которого подгружается бибилиотека mootools.js (хотя не только для него)), на старом компе довольно надоедлево лагал, в связи с чем на сайте из подписи это все выдрал с корнем, и как то легче стало... шустрее.

И еще... последние 2 пункта не спроста не имеют подразделов. Если бы последние пункты имелли вложенные пункты, ты выглядело бы это совсем не красиво. (См. Вложения)
Поэтому прикидывая меню, это стоит учитывать.

@**падаван** · 08.02.2011, 21:26

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

@Umka · 08.02.2011, 21:48

Цитата:

Сообщение от падаван

то что справа

Это accordion меню. Довольно стандартная фича.

@**падаван** · 09.02.2011, 10:51

так оно не в css делается? а как же тогда перелинковка, в таком ссылки не индексируются, или я неправильно понимаю..

@**падаван** · 10.02.2011, 11:57

..так значит говорите чтоб такое меню создать просто css не обойдешься ?

вот, взгляните на это пожалуйста
[php]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Insert title here</title>
</head>
<body>

<style>
.menu_item
{
margin: 5px 0px 0px 15px;
padding: 6px 0px 0px 0px;
cursor:pointer;
text-align: center;
font-size: 17px;
width:186px;
height:29px;
font-family:"Trebuchet MS";
background: #fff url('img/lmenu_bg1.gif') no-repeat;
}
.sub_menu
{
margin:2px;
width: 186px;
position:relative;
overflow: hidden;
}
</style>

<script>

var $expandMaxHeight = 0;
var $expandInterval;

var GROW = 1;
var SHRINK = -1;

function smoothChange(object, factor) {
var k = Math.abs((1 - object.offsetHeight/$expandMaxHeight) - object.offsetHeight/$expandMaxHeight);

if (k<0.4) {
var growth = 4*factor; //в середине элемента скорость прироста высоты быстрее
} else {
var growth = 2*factor; // чем в начале и конце элемента
}

if (
( (factor == GROW) && ((object.offsetHeight + growth) > $expandMaxHeight) ) ||
( (factor == SHRINK) && ((object.offsetHeight + growth) < 0) )
)
{
growth = factor>0 ? ($expandMaxHeight - object.offsetHeight) : 0;
clearInterval($expandInterval);
$expandInterval = null;
}

object.style.height = object.offsetHeight + growth + 'px';
if (factor == SHRINK && !$expandInterval) {
object.style.height = $expandMaxHeight + 'px';
object.style.display = 'none';
}
}

function smoothShowVertical(object) {
if ($expandInterval)
return false;

object.style.height = '0px';
$expandInterval = setInterval(function(object) { return function () { smoothChange(object, GROW) } }(object), 20);
}

function smoothHideVertical(object) {
if ($expandInterval)
return false;

$expandInterval = setInterval(function(object) { return function () { smoothChange(object, SHRINK) } }(object), 20);
}

var CURRENT_TARGET;
function show(aID) {
if ($expandInterval)
return false;

var target = document.getElementById(aID).style;
var value = target.display == 'block' ? 'none' : 'block';

if (CURRENT_TARGET && CURRENT_TARGET != target) {
CURRENT_TARGET.display = 'none';
};

if (target.display == 'none') {
CURRENT_TARGET = target;
target.display = 'block';

//---
object = document.getElementById(aID);
$expandMaxHeight = object.offsetHeight;
object.style.height = '0px';

smoothShowVertical(document.getElementById(aID));
//---
} else {
$expandMaxHeight = object.offsetHeight;
smoothHideVertical(document.getElementById(aID));
//target.display = 'none';
}

};
</script>

<div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div>
<ul class="sub_menu" id="sub_menu1" style="display: none;">
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Главная</a></li>
</ul>

<div class="menu_item" onclick="show('sub_menu2')">Пункт меню</div>
<ul class="sub_menu" id="sub_menu2" style="display: none;">
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
</ul>

</body>
</html>
[/php]
если такое со скриптом будет, то индексация ссылок в меню не пострадает, или пс не увидит их? :\

@**Cheshir** · 03.05.2011, 15:18

Огромнейшее-при-огромнейшее спасибо, милчеловек! =) 3 дня бился(!!!) не мог сделать "резиновое" меню! Еще раз гранд мерси!

05.10.2010, 23:24	#1
@Recover Основа форума Сообщений: 266 FR (активность): 8,805 Отзывы: 118 Доп. информация Регистрация: 03.03.2008	Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Для начинающих верстальщиков одной из наиболее сложных задач является выбор, какими элементами пользоваться, чтобы создавать меню. Встречается масса вариантов: таблицы, дивы, <p>,<br> некоторые просто записывают ссылки в одну строчку, применяя всевозможные разделители. Обычно отталкиваются от того, какой вид меню предполагается на сайте-горизонтальное или вертикальное. На самом же деле важно, не как будет в итоге выглядеть меню на сайте, важно то, что представляет собой меню. Ведь любое меню - это фактически список ссылок на страницы сайта, поэтому и при верстке семантически верно (семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов) использовать именно список, причем маркированный, так как явно ссылки в списке должны быть равнозначными. При этом код занимает несколько строчек, он полностью валиден: Код: <html><body> <ul id="menu"> <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> <li><a href="">Ссылка 8</a></li> <li><a href="">Ссылка 9</a></li> </ul> </body> </html> А с помощью стилей, из одного и того же списка можно реализовать любой вид меню - как горизонтальный, так и вертикальный, вставить любые разделители, обеспечить любые эффекты при наведении и т.д. При этом мы мало того, что реализуем семантически верный способ представления меню, так еще и полностью отделяем содержание сайта от его оформления! Например, для реализации горизонтального резинового меню таблица стилей может выглядеть так: Код: <style> ul#menu{ margin : 0; padding : 0; display : table;/сначала заставим ul вести себя как табличный элемент / width : 100%;/разворачиваем, к примеру, его на всю ширину страницы/ } #menu li{ display : table-cell;/ну а затем фокус - все li будут вести себя как ячейки одной строки таблицы, то есть выстроятся наши ссылки в один ряд / width : 11%;/ширина всех ячеек будет одинаковой, чтобы обеспечить резиновую верстку задаем ее в процентах - 100%/9=11,1% округляем до 11/ text-align : center;/для красоты/ } html #menu li{ display : inline; zoom : 1;/* обеспечиваем кроссбраузерность к сожалению ie6 table, table-cell не поддерживает, приходится хитрить / } </style> А если еще добавить: Код: #menu a:link, #menu a:hover, #menu a:visited{ display : block; background : blue; padding : 5px 0; font : 12px verdana; color : #fff; text-decoration : none; } #menu a:hover{ background : red; } Получим и эффекты при наведении. Для полной красоты можно, вставить Код: ul#menu{ border-right : 1px solid #fff; } #menu li{ border-left : 1px solid #fff; } И заканчивая экзотическими: Код: ul#menu{ background : url("/images/fon.jpg") center right no-repeat; } #menu li{ background : url("/images/fon.jpg") center left no-repeat; } Экспериментировать можно до бесконечности, при этом исходный код* любого меню остается одним и тем же. Ниже приведен полный исходный код подобного меню: Код: <html><body> <style> ul#menu{ margin : 0; padding : 0; display : table;/для начала заставим ul вести себя как табличный элемент / width : 100%; border-right : 1px solid #fff; } #menu li{ display : table-cell;/а затем - все li как ячейки одной строки таблицы, то есть выстроим наши картинки в один ряд, о том / text-align : center;/для красоты/ width : 11%;/100%/9=11,1% округляем до 11/ border-left : 1px solid #fff; } html #menu li{ display : inline; zoom : 1;/ обеспечиваем кроссбраузерность к сожалению ie6 table, table-cell не поддерживает, приходится хитрить / } #menu a:link, #menu a:hover, #menu a:visited{ display : block; background : blue; padding : 5px 0; font : 12px verdana; color : #fff; text-decoration : none; } #menu a:hover{ background : red; } </style> <ul id="menu"> <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> <li><a href="">Ссылка 8</a></li> <li><a href="">Ссылка 9</a></li> </ul> </body></html> Tema, seoshnickVOVA и BlackAlter: сообщение полезно Верстка сайтов - качественно и недорого.* Связь через ЛС или recover00[собака]inbox.ru
	Сказавших "Спасибо!": 11 (показать список)

06.10.2010, 10:24	#2
@x997 Друзья SEO cafe Сообщений: 2,205 FR (активность): 72,650 Отзывы: 1015 Доп. информация Регистрация: 24.06.2009 Специализация: SEO услуги Адрес: Минск	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Recover,мегаполезное чтиво. еще в таком же духе будет инфа ? Говорят,что я такое же быдло как и все!!! ха ... Господа хорошие,для системы ценностей большенства людей , Я ЗНАЧИТЕЛЬНО ХУЖЕ!!! внимание! существенная часть того что я пишу, может оказаться сарказмом!

06.10.2010, 11:42	#3
@tosick Почетный пользователь Сообщений: 105 FR (активность): 1,716 Отзывы: 3 Доп. информация Регистрация: 02.08.2010 Адрес: Гомель, Беларусь	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Поддерживаю. Просим продолжения :-) Судя по скрипу с которым продвигается моя учёба - я грызу пенопласт! Не забываем про отзывы... В офлайне до 15 марта 2011

06.10.2010, 18:44	#4
@Tosha Сообщений: 90 FR (активность): 1,537 Отзывы: 5 Доп. информация Регистрация: 08.07.2010	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Весьма интересно! Тоже интересно о продолжении

06.10.2010, 22:27	#5
@Recover Основа форума Сообщений: 266 FR (активность): 8,805 Отзывы: 118 Доп. информация Регистрация: 03.03.2008	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта спасибо за лестные отзывы) продолжение планируется Верстка сайтов - качественно и недорого. Связь через ЛС или recover00[собака]inbox.ru

06.10.2010, 23:21	#6
@Umka Winter Is Coming Сообщений: 4,143 FR (активность): 80,659 Отзывы: 1271 Доп. информация Регистрация: 26.06.2009 Грамоты: 1	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Recover, а вот про меню, типа как на этом демо что скажете? http://demo.rockettheme.com/?template=affinity ...имеется в виду верхнее меню. Ну или вот: http://www.yootheme.com/demo/oct10/ Принцип у них вроде один и выглядят они конечно симпатишно, но что то в них меня смущает, а что не пойму... В общем ни разу такое не ставил, хотя попробовать хочется....

08.02.2011, 21:26	#8
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 233 Доп. информация Регистрация: 17.10.2010	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта мило и прелестно, и было бы просто совершенством добавить к этой теме секрет создания несколько другого типа меню, не выпадающего но раскрывающегося при нажатии, например, хотябы как у них, то что справа, ну или похожее, когда при нажатии на пункт раскрываются подпункты, очень интересны способы его реализации, ну без флеш и скриптов, поделитесь пожалуйста рецептом, такое меню не менее вкусно, очень хотелось бы попробовать.. ученик SeoCafe

09.02.2011, 10:51	#10
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 233 Доп. информация Регистрация: 17.10.2010	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта так оно не в css делается? а как же тогда перелинковка, в таком ссылки не индексируются, или я неправильно понимаю.. ученик SeoCafe

10.02.2011, 11:57	#11
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 233 Доп. информация Регистрация: 17.10.2010	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта ..так значит говорите чтоб такое меню создать просто css не обойдешься ? вот, взгляните на это пожалуйста [php] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Insert title here</title> </head> <body> <style> .menu_item { margin: 5px 0px 0px 15px; padding: 6px 0px 0px 0px; cursor:pointer; text-align: center; font-size: 17px; width:186px; height:29px; font-family:"Trebuchet MS"; background: #fff url('img/lmenu_bg1.gif') no-repeat; } .sub_menu { margin:2px; width: 186px; position:relative; overflow: hidden; } </style> <script> var $expandMaxHeight = 0; var $expandInterval; var GROW = 1; var SHRINK = -1; function smoothChange(object, factor) { var k = Math.abs((1 - object.offsetHeight/$expandMaxHeight) - object.offsetHeight/$expandMaxHeight); if (k<0.4) { var growth = 4factor; //в середине элемента скорость прироста высоты быстрее } else { var growth = 2factor; // чем в начале и конце элемента } if ( ( (factor == GROW) && ((object.offsetHeight + growth) > $expandMaxHeight) ) \|\| ( (factor == SHRINK) && ((object.offsetHeight + growth) < 0) ) ) { growth = factor>0 ? ($expandMaxHeight - object.offsetHeight) : 0; clearInterval($expandInterval); $expandInterval = null; } object.style.height = object.offsetHeight + growth + 'px'; if (factor == SHRINK && !$expandInterval) { object.style.height = $expandMaxHeight + 'px'; object.style.display = 'none'; } } function smoothShowVertical(object) { if ($expandInterval) return false; object.style.height = '0px'; $expandInterval = setInterval(function(object) { return function () { smoothChange(object, GROW) } }(object), 20); } function smoothHideVertical(object) { if ($expandInterval) return false; $expandInterval = setInterval(function(object) { return function () { smoothChange(object, SHRINK) } }(object), 20); } var CURRENT_TARGET; function show(aID) { if ($expandInterval) return false; var target = document.getElementById(aID).style; var value = target.display == 'block' ? 'none' : 'block'; if (CURRENT_TARGET && CURRENT_TARGET != target) { CURRENT_TARGET.display = 'none'; }; if (target.display == 'none') { CURRENT_TARGET = target; target.display = 'block'; //--- object = document.getElementById(aID); $expandMaxHeight = object.offsetHeight; object.style.height = '0px'; smoothShowVertical(document.getElementById(aID)); //--- } else { $expandMaxHeight = object.offsetHeight; smoothHideVertical(document.getElementById(aID)); //target.display = 'none'; } }; </script> <div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div> <ul class="sub_menu" id="sub_menu1" style="display: none;"> <li><a href="#">Главная</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Главная</a></li> </ul> <div class="menu_item" onclick="show('sub_menu2')">Пункт меню</div> <ul class="sub_menu" id="sub_menu2" style="display: none;"> <li><a href="#">Главная</a></li> <li><a href="#">Главная</a></li> </ul> </body> </html> [/php] если такое со скриптом будет, то индексация ссылок в меню не пострадает, или пс не увидит их? :\ ученик SeoCafe

03.05.2011, 15:18	#12
@Cheshir Почетный пользователь Сообщений: 148 FR (активность): 2,181 Отзывы: -8 Доп. информация Регистрация: 20.02.2010 Адрес: Москва	Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта Огромнейшее-при-огромнейшее спасибо, милчеловек! =) 3 дня бился(!!!) не мог сделать "резиновое" меню! Еще раз гранд мерси! http://jino.ru/banners/468x60/c1.png Лучшее спасибо - Плюс (+) к репутации

Сообщение форума

Отменить изменения

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра	Оценка этой теме
Линейный вид Комбинированный вид Древовидный вид	Оценка этой теме:

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Бесплатный способ Поднять Максимальный Pr Для Сайта	krava0303	Google	33	03.03.2012 12:30
Неплохой способ для развития сайта и бизнеса - subscribe.ru	odaplus	Общие вопросы	2	15.06.2010 10:13
Программы для создания сайта	cvetrad	Разработка сайтов	55	09.02.2010 22:06
Самый лучший способ раскрутки сайта.	webkos	Раскрутка в общих чертах	19	19.06.2009 14:12
меню сайта и бэклинки	GarantR	Раскрутка в общих чертах	11	03.03.2009 03:34