RUPIXEL.COM - Статьи веб-мастеру. Новичкам

Вы когда-либо задавались вопросом, почему на одних web-ресурсах легко найти нужную информацию, а на других для этого приходится затратить уйму времени? Частый гость Всемирной паутины наверняка ответит утвердительно. Конечно же, причин может быть много, причем самых разных. Это и чересчур большая загруженность страницы, и навязчивая рекламная информация в самом неподходящем месте, и непривычность интерфейса. Но самое главное, что влияет на скорость и удобство поиска нужной информации, это система навигации. Она может иметь самые разнообразные формы и находиться в самых разных участках загружаемой вами страницы. Естественно, после загрузки этой самой страницы вам понадобится некоторое время, чтобы разобраться и привыкнуть к новому типу навигации. Впрочем, даже если у вас есть куча свободного времени, которое просто некуда девать, я сомневаюсь, что вы намерены тратить его таким весьма незатейливым образом, — да и Internet, по-моему, бесплатен еще далеко не везде :-). А ведь неплохо бы было создать такую систему навигации, разбираться в структуре которой и вовсе не нужно. Такая система навигации есть, и называется она гордым словом «меню».

Если вы еще не догадались, чем мы сейчас будем заниматься, тогда говорю прямо — разработкой главного меню для домашнего (впрочем, для более серьезных проектов здесь тоже нет ограничений) web-ресурса.

Итак, приступим! Первое, о чем нужно сказать, это то, что меню будет представлять собой гипертекстовую разметку с использованием каскадных таблиц стилей (CSS). Собственно внутреннюю логику управления мы напишем в виде сценария на языке JavaScript. Должен сразу заметить, что по понятным причинам меню будем разрабатывать для браузера MS Internet Explorer. Надеюсь, вас это обстоятельство сильно не смутит :-), а посему начнем.

Сначала сделаем гипертекстовую разметку страницы:

Думаю, элементы html, head и title пояснения не требуют. В элементе style с помощью нотации @import url(menu.css) мы задаем URL файла, в котором находится каскадная таблица стилей для меню. В элементе script с помощью атрибута src="menu.js" мы задаем url файла, в котором будет содержаться сценарий на языке JavaScript. Далее в элементе body задаем обработчики (функции обработки) для событий onResize (изменение размера окна браузера) и onLoad (загрузка страницы). Эти события будут обрабатываться соответственно функциями onWindowResize() и init(), которые мы определим позже в файле сценария menu.js.

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

<div id="mm" class="MainMenu">
	<a id="m1" onmouseover="mOverMain(1)" onmouseout="mOutMain(1)"
	onclick="mClick(1)">
  		ИмяПункта1
	</a>
	<a id="m2" onmouseover="mOverMain(2)" onmouseout="mOutMain(2)"
	onclick="mClick(2)">
  		ИмяПункта2
	</a>
	<a id="m3" onmouseover="mOverMain(3)" onmouseout="mOutMain(3)"
	onclick="mClick(3)" style="align: right;">
  		ИмяПункта3
	</a>
</div>

<div id="sm1" class="SubMenu">
	<a id="item1_1" href="url_11" onmouseover="mOverItem(1)" onmouseout="mOutItem(1)">
    	ИмяПункта11
	</a>
	<br>
	<a id="item1_2" href="url_12" onmouseover="mOverItem(2)" onmouseout="mOutItem(1)">
   		ИмяПункта12
	</a>
	<br>
	<a id="item1_3" href="url_13" onmouseover="mOverItem(3)" onmouseout="mOutItem(1)">
   		ИмяПункта13
	</a>
	<br>
	<a id="item1_4" href="url_14" onmouseover="mOverItem(4)" onmouseout="mOutItem(1)">
		ИмяПункта14
	</a>
	<br>
</div>

<div id="sm2" class="SubMenu">
	<a id="item2_1" href="url_21" onmouseover="mOverItem(1)" onmouseout="mOutItem(1)">
    	ИмяПункта21
	</a>
	<br>
</div>

<div id="sm3" class="SubMenu">
	<a id="item3_1" href="url_31" onmouseover="mOverItem(1)" onmouseout="mOutItem(1)">
    	ИмяПункта31
	</a>
	<br>
	<a id="item3_2" href="url_32" onmouseover="mOverItem(2)" onmouseout="mOutItem(2)">
    	ИмяПункта32
	</a>
	<br>
</div>

Давайте разбираться. Первый блочный элемент div, как видно из комментария, служит своеобразным контейнером, в котором будут находиться пункты главного меню. Другими словами, это будет панель главного меню. Здесь через атрибут id мы присваиваем этому элементу имя mm. По этому имени мы будем из сценария обращаться к соответствующему элементу. Также через атрибут class назначаем этому элементу класс свойств MainMenu, который позже определим в файле каскадной таблицы стилей menu.css.

Разберем теперь фрагмент первого элемента якоря a, который находится внутри div. Этот элемент является первым пунктом меню, а поэтому присвоим его идентификатору значение m1 (второму пункту присвоим m2, третьему — m3 и т.д.). Этот элемент содержит также обработчики событий onmouseover (указатель мыши над элементом), onmouseout (указатель мыши покинул элемент) и onclick (щелчок кнопки мыши по элементу). Функции обработки, соответственно, — mOverMain(n), mOutMain(n) и mClick(n), где n — номер пункта меню. Для первого пункта меню n равно единице (для второго — 2, третьего — 3 и т.д.). Этот номер нам понадобится при обработке. В элемент a вписываем имя пункта меню. Все остальные пункты меню строятся по той же схеме, с той лишь разницей, что идентификатор должен содержать букву m плюс точный порядковый номер пункта меню (m1, m2, …, m10, m12, …). Функции обработки должны принимать в качестве параметра точный порядковый номер текущего пункта меню.

Давайте договоримся: меню, которое выпадает при щелчке кнопки мыши на каком-нибудь пункте панели главного меню, будем называть «подменю». Теперь посмотрим на следующий блочный элемент div. Он служит контейнером для первого подменю. Для его идентификации присваиваем его идентификатору значение sm1 (для второго подменю — sm2, для третьего — sm3 и т.д.). Через свойство class назначаем этому элементу класс свойств SubMenu, который определим в файле menu.css.

Внутри блочного элемента div находятся четыре якоря a. Они играют роль пунктов первого подменю. В принципе их может быть неограниченное количество. Разберем структуру первого якоря. Его идентификатор принимает значение item1_1, а это значит, что он принадлежит первому подменю и сам выступает его первым пунктом. В общем виде для идентификации пунктов меню, принадлежащих различным подменю, идентификаторам будем присваивать значения вида itemI_J, где I — номер подменю, которому принадлежит данный пункт, J — номер пункта в данном подменю (I, J принимают значение из множества натуральных чисел). Например: значение идентификатора item21_13 означает, что этот пункт принадлежит 21-му подменю, в котором на его долю приходится 13-й порядковый номер (хотя я сомневаюсь, что кому-то понадобится панелька с 21 пунктом меню :-)). Атрибуту href нужно присвоить url, на который будет ссылаться данный пункт подменю. Хоть в принципе, вместо url можно написать какой-нибудь сценарий. Здесь уже вы решаете, что должно происходить при щелчке на данном пункте меню, и сами пишете (если нужно) обработчик (функцию обработки) этого события. Как видим, в этом элементе заданы обработчики событий onmouseover и onmouseout. Это соответственно функции обработки mOverItem(n) и mOutItem(n). Здесь n — номер пункта в данном подменю. Элемент br используется для принудительного перехода на новую строчку (следующий пункт подменю должен начинаться с новой строчки). Аналогичным образом строятся и другие подменю для каждого пункта главного меню.

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

Здесь мы задаем два класса свойств MainMenu и SubMenu для элемента div. Также для каждого элемента div, свойства которого характеризуются один из этих классов, производится каскадирование элементов a, входящих в блок данного элемента div.

Рассмотрим класс MainMenu. В нем мы задаем позиционирование в абсолютных координатах (начало координат всегда находится в левом верхнем углу, x возрастает слева направо, y сверху вниз), видимость панели главного меню (свойство visibility устанавливаем в состояние hidden (скрытый)), размеры шрифта и сам шрифт (шрифты), толщину (верхняя и нижняя один пиксель, левая и правая — ноль пикселей), цвет (задается в RGB-составляющих) и стиль (сплошная линия) рамки, указатель мыши (в форме стрелки, направленной в верхний левый угол). Для элемента a задается оформление текста (вернее, убирается, так как по умолчанию подлинкованный текст подчеркивается), указатель мыши, левый и правый отступы (задаем так, чтобы имя пункта меню не упиралось друг в друга).

Класс SubMenu задается аналогично. С каскадированием покончили :-).

Теперь нам осталось сделать последний (и, наверное, самый трудный) шаг — написать сценарий. Но не так страшен черт, как его малюют, и вы в этом сейчас сами сможете убедиться. Приступим.

Прежде всего создадим файл с названием menu.js. В него мы запишем вот такой мудреный сценарий:

//------------ Глобальные переменные -------------
var menuNumber;		//Количество пунктов меню
var itemsNumber;		//Массив. Хранит количество пунктов для каждого подменю
var subMenuVisible = 0;	//Текущее видимое подменю

//Координаты левого верхнего угола меню
var menuLeft		= 0;
var menuTop 		= 0;

//Если 0 — панель меню на всю страницу
//Если 1 — оставить собственный размер
var menuWidthAuto	= 0;

//Цвет фона
var mmBgColor 		= '"#E0E0E0"';	//Главное меню неактивно
var mmBgActiveColor 	= '"#0D62AC"';	//Главное меню активно
var smBgColor 		= '"#E0E0E0"';	//Подменю неактивно
var smBgActiveColor 	= '"#0D62AC"';	//Подменю активно

//Цвет текста
var mmTextColor 	= '"black"';		//Главное меню неактивно
var mmTextActiveColor 	= '"white"';	//Главное меню активно
var smTextColor 	= '"black"';		//Подменю неактивно
var smTextActiveColor 	= '"white"';	//Подменю активно

//------------ Функции --------------
//Инициализируем переменную menuNumber
function initMenuNumber()
{
	var i=1;
	while(eval('document.all.m' + i))
		i++;
	menuNumber = i-1;
}

//Инициализируем массив itemsNumber
function initItemsNumber()
{
	itemsNumber = new Array(menuNumber);
	for(i=1; i<=menuNumber; i++)
	{
		var j = 1;
		while(eval('document.all.item' + i + '_' + j))
			j++;
		itemsNumber[i-1] = (j-1);
		
	}
}

//Корректируем длину пунктов подменю
function correctItemsWidth()
{
	for(i=1; i<=menuNumber; i++)
	{		
		var maxItemWidth = 0;
		for(j=1; j<=itemsNumber[i-1]; j++)
			if(eval('document.all.item' + i + '_' + j + '.offsetWidth')>maxItemWidth)
				maxItemWidth = eval('document.all.item' + i + '_' + j + '.offsetWidth');
		for(j=1; j<=itemsNumber[i-1]; j++)
			eval('document.all.item' + i + '_' + j + '.style.width = ' + maxItemWidth);

}
}

//Инициализируем цвет фона и текста пунктов подменю
function initItemsColor()
{
	for(i=1; i<=menuNumber; i++)
	{		
		for(j=1; j<=itemsNumber[i-1]; j++)
		{
			eval('document.all.item' + i + '_' + j + '.style.backgroundColor =' + smBgColor);
			eval('document.all.item' + i + '_' + j + '.style.color =' + smTextColor);
		}
	}
}

//Инициализируем меню
function init()
{	
	initMenuNumber();	
	initItemsNumber();
	correctItemsWidth();
	initItemsColor();
	
	eval('document.all.mm.style.backgroundColor =' + mmBgColor);
	eval('document.all.mm.style.color =' + mmTextColor);
	for(i=1; i<=menuNumber; i++)
	{
		eval('document.all.sm' + i + '.style.backgroundColor =' + smBgColor);
		eval('document.all.sm' + i + '.style.color =' + smTextColor);
	}

if(!menuWidthAuto)
	{
		var clWidth = document.body.clientWidth;
		eval('document.all.mm.style.width = ' + clWidth);
	}
		eval('document.all.mm.style.top='+menuTop);
		eval('document.all.mm.style.left='+menuLeft);
	eval('document.all.mm.style.visibility = "visible"');
}

//Обработчик события onresize
function onWindowResize()
{
	if(!menuWidthAuto)
	{
		var clWidth = document.body.clientWidth;
		eval('document.all.mm.style.width = ' + clWidth);
	}	
}

//Скрывает все подменю
function hideAllSubs()
{
	for(i=1; i<=menuNumber; i++)
		eval('document.all.sm' + i + '.style.visibility = "hidden"');
}

//Обработчик события onClick для главного меню
function mClick(number)
{
	hideAllSubs();
	if(subMenuVisible == number)
	{		
		subMenuVisible = 0;
		return;
	}
	subMenuVisible = number;
	var sTop = menuTop + eval('document.all.mm.offsetHeight');
	eval('document.all.sm' + number + '.style.top=' + sTop);		
	var sLeft = menuLeft + eval('document.all.m' + number + '.offsetLeft');
	eval('document.all.sm' + number + '.style.left=\"' + sLeft + '\"');
	eval('document.all.sm' + number + '.style.visibility = "visible"');
}

//Активирует пункт главного меню
function activeMenu(number)
{
	eval('document.all.m' + number + '.style.backgroundColor =' + mmBgActiveColor);
	eval('document.all.m' + number + '.style.color =' + mmTextActiveColor);
}

//Деактивирует пункт главного меню
function diactiveMenu(number)
{
	eval('document.all.m' + number + '.style.backgroundColor =' + mmBgColor);
	eval('document.all.m' + number + '.style.color =' + mmTextColor);
}
//Обработчик события onMouseOver для главного меню
function mOverMain(number)
{	
	var prev_visible = subMenuVisible;
	if(subMenuVisible != 0 && subMenuVisible != number)
		mClick(number);
	if(prev_visible)
		diactiveMenu(prev_visible);
	activeMenu(number);
}
//Обработчик события onMouseOut для главного меню
function mOutMain(number)
{
	if(subMenuVisible == number)
		return;
	diactiveMenu(number);
}

//Обработчик события onMouseOver для пункта подменю
function mOverItem(number)
{
	eval('document.all.item' + subMenuVisible +'_'+ number + '.style.backgroundColor ='+ smBgActiveColor);
	eval('document.all.item' + subMenuVisible + '_' + number + '.style.color =' + smTextActiveColor);
}

//Обработчик события onMouseOut для пункта подменю
function mOutItem(number)
{
	for(j=1; j<=itemsNumber[subMenuVisible-1]; j++)
	{
		eval('document.all.item' + subMenuVisible + '_' + j + '.style.backgroundColor =' + smBgColor);
		eval('document.all.item' + subMenuVisible + '_' + j + '.style.color =' + smTextColor);
	}
}
//-------------------------------------------------

Комментарий к сценарию. В начале мы определяем глобальные переменные. Некоторые из них сразу инициализируются, другие же инициализируются в функциях инициализации. Думаю, что назначение переменных читателю ясно из комментариев в самом сценарии. Обратите внимание, как задается значение цвета — оно дважды берется в кавычки (внутренние двойные, внешние — одинарные). Здесь очень важно не допустить ошибку.

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

initMenuNumber() — инициализирует переменную menuNumber. Для этого в ней задается счетчик. Функция eval, которая получает объект, сформированный с помощью счетчика, выдает нулевое значение только в том случае, если такой объект не существует. Таким образом мы находим количество пунктов в главной панели меню;

·initItemsNumber() — инициализирует массив itemsNumber. Работает аналогично предыдущей функции. Только здесь мы ищем количество пунктов в каждом подменю.

correctItemsWidth() — корректирует длину пунктов подменю. Это необходимо, так как имена пунктов меню могут иметь различную длину. Эта функция ищет максимальную длину пункта для каждого подменю, а потом устанавливает длину каждого пункта этого подменю в найденное максимальное значение;

initItemsColor() — инициализирует цвет фона и текста пунктов подменю.

init() — инициализирует меню. Очень важная функция. Она вызывается при загрузке страницы. В ней мы вызываем все предыдущие функции, задаем цвет фона и текста для панели главного меню и ее пунктов, задаем длину и левый верхний угол панели, а также делаем панель видимой;

onWindowResize() — обработчик события onresize. Единственное, что делает эта функция, — производит корректирование длины панели меню;

hideAllSubs() — скрывает все подменю;

mClick(number) — обработчик события onClick для главного меню. Если подменю пункта главного меню, для которого сработал обработчик, является видимым, тогда мы скрываем это подменю. Иначе делаем его видимым, предварительно вычислив и задав левый верхний угол отображения подменю;

·activeMenu(number) — активирует пункт главного меню;

diactiveMenu(number) — деактивирует пункт главного меню;

mOverMain(number) — обработчик события onMouseOver для главного меню. Если какое-нибудь подменю видимо, а его номер не совпадает с номером пункта главного меню, вызвавшим данное событие, тогда мы вызываем обработчик события onClick для главного меню (функция mClick(number)), который скроет видимое подменю и сделает видимым подменю, принадлежащее пункту главного меню, вызвавшему событие onMouseOver. Чуть сам не запутался :-). В любом случае, данная функция деактивирует предыдущий активный пункт и активирует тот, для которого сработал обработчик :-).

mOutMain(number) — обработчик события onMouseOut для главного меню. Если номер видимого подменю совпадает с номером пункта главного меню, вызвавшим данный обработчик, просто выходим из функции обработки. Иначе деактивируем пункт, вызвавший обработчик.

mOverItem(number) — обработчик события onMouseOver для пункта подменю. Просто активирует пункт подменю, вызвавший этот обработчик.

mOutItem(number) — обработчик события onMouseOut для пункта подменю. Деактивирует все пункты видимого подменю.

Ну вот, разработка сценария уже позади. В принципе, и само меню уже готово. Осталось только его испытать. А для этого нужно разместить все три файла (menu.htm, menu.css, menu.js) в одну папку и открыть в MS Internet Explorer файл menu.htm.

Удачи!

Источник: http://www.mycomp.com.ua/

Комментарии