Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 05.10.2010, 23:24   #1
 
Аватар для Recover
 
Сообщений: 266
FR (активность): 8,805

Доп. информация
Хорошо Автор темы Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

Для начинающих верстальщиков одной из наиболее сложных задач является выбор, какими элементами пользоваться, чтобы создавать меню. Встречается масса вариантов: таблицы, дивы, <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
Recover вне форума  
Сказавших "Спасибо!": 11 (показать список)
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 06.10.2010, 10:24   #2
 
Аватар для x997
 
Сообщений: 2,205
FR (активность): 70,735

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


Говорят,что я такое же быдло как и все!!! ха ... Господа хорошие,для системы ценностей большенства людей , Я ЗНАЧИТЕЛЬНО ХУЖЕ!!!
внимание! существенная часть того что я пишу, может оказаться сарказмом!
x997 вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 06.10.2010, 11:42   #3
 
Аватар для tosick
 
Сообщений: 105
FR (активность): 1,716

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


Судя по скрипу с которым продвигается моя учёба - я грызу пенопласт!
Не забываем про отзывы...
В офлайне до 15 марта 2011
tosick вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 06.10.2010, 18:44   #4
 
Аватар для Tosha
 
Сообщений: 90
FR (активность): 1,537

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

Весьма интересно!
Тоже интересно о продолжении
Tosha вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 06.10.2010, 22:27   #5
 
Аватар для Recover
 
Сообщений: 266
FR (активность): 8,805

Доп. информация
По умолчанию Автор темы Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


Верстка сайтов - качественно и недорого.
Связь через ЛС
или recover00[собака]inbox.ru
Recover вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 06.10.2010, 23:21   #6
 
Аватар для Umka
 
Сообщений: 4,143
FR (активность): 80,659

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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

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

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

Принцип у них вроде один и выглядят они конечно симпатишно, но что то в них меня смущает, а что не пойму...
В общем ни разу такое не ставил, хотя попробовать хочется....
Umka вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 07.10.2010, 00:34   #7
 
Аватар для Byblik
 
Сообщений: 449
FR (активность): 8,658

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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

И еще... последние 2 пункта не спроста не имеют подразделов. Если бы последние пункты имелли вложенные пункты, ты выглядело бы это совсем не красиво. (См. Вложения)
Поэтому прикидывая меню, это стоит учитывать.
Миниатюры
Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта-vylez.png  
Byblik вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Umka (07.10.2010)
Старый 08.02.2011, 21:26   #8
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 21,516

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 08.02.2011, 21:48   #9
 
Аватар для Umka
 
Сообщений: 4,143
FR (активность): 80,659

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

Цитата:
Сообщение от падаван Посмотреть сообщение
то что справа
Это accordion меню. Довольно стандартная фича.
Umka вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
падаван (09.02.2011)
Старый 09.02.2011, 10:51   #10
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 21,516

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 10.02.2011, 11:57   #11
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 21,516

Доп. информация
По умолчанию 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 = 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]
если такое со скриптом будет, то индексация ссылок в меню не пострадает, или пс не увидит их? :\


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 03.05.2011, 15:18   #12
 
Аватар для Cheshir
 
Сообщений: 148
FR (активность): 2,181

Доп. информация
По умолчанию Re: Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта

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


http://jino.ru/banners/468x60/c1.png

Лучшее спасибо
- Плюс (+) к репутации
Cheshir вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Метки
вёрстка, пособие

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 2394 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесплатный способ Поднять Максимальный 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

Текущее время: 07:43. Часовой пояс GMT +3.