Создание универсального выпадающего меню

Создание универсального выпадающего меню Одной из проблем как начинающих, так и уже довольно опытных веб-мастеров становится создание так называемого выпадающего меню. Еще проблемнее становится вопрос создания такого же меню, но...
Алексей Сивин MostInfo.net 09-06-2004	печать

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

Что необходимо?
Для начала нам понадобится непосредственно сама страничка, куда мы будем вставлять меню и скрипт, который будет управлять отображением/скрытием будущего меню.

Для примера возьмем обыкновенную html страничку, с несколькими ссылками:

<HTML><HEAD><TITLE>Страница с универсальным выпадающим меню</TITLE></HEAD>

<BODY><table width=100%><tr><td align=center><a href="link1.htm">link1</a> 
| <a href="link2.htm">link2</a> | <a href="link3.htm">link3</a></td></tr>

<tr><td width=100%>Содержание страницы<br><br><br><br><br><br></td></tr>

</table></BODY></HTML>

Назовем получившуюся страницу 1.htm

И собственно код скрипта:

<!--

function mouseOverPopup (obj) {

obj.style.backgroundColor="#74B3D3";

obj.className="";

}

function mouseOutPopup (obj) {

obj.style.backgroundColor="#fafafa"

obj.className="p_menu";

}

function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) 
{

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; 
}}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

function MM_findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) 
{

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) 
x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && document.getElementById) x=document.getElementById(n); return 
x;

}

function P7_autoLayers() { var g,b,k,f,args=P7_autoLayers.arguments;

var a = parseInt(args[0]);if(isNaN(a))a=0;

if(!document.p7setc) {p7c=new Array();document.p7setc=true;

for (var u=0;u<10;u++) {p7c[u] = new Array();}}

for(k=0; k<p7c[a].length; k++) {

if((g=MM_findObj(p7c[a][k]))!=null) {

b=(document.layers)?g:g.style;b.visibility="hidden";}}

for(k=1; k<args.length; k++) {

if((g=MM_findObj(args[k])) != null) {

b=(document.layers)?g:g.style;b.visibility="visible";f=false;

for(j=0;j<p7c[a].length;j++) {

if(args[k]==p7c[a][j]) {f=true;}}

if(!f) {p7c[a][p7c[a].length++]=args[k];}}}

}

//-->

Думаю, описание его не требуется, так как это, в принципе не главное :)
Назовем этот скрипт menu.js. После, чтобы его вызвать, следует прописать на будущей странице строку <SCRIPT language=javascript src="menu.js"></SCRIPT> сразу после тега

</HEAD>

Что нужно делать дальше?
Теперь надо бы нам написать слой, внутри него - табличку, которая и будет отображаться при наведении курсора на ссылку, этим и займемся:

<div id=msa style="Z-INDEX: 9; LEFT: 400px; VISIBILITY: hidden; 
WIDTH: 80px; POSITION: absolute; TOP: 40px; HEIGHT: 45px">

<table width=115 border=0 bgcolor=#f1f1f1><tr><td><a href="podl1.htm">podlink_1</a></td></tr>

<tr><td><a href="podl2.htm">podlink_2</a></td></tr><tr><td><a 
href="podl3.htm">podlink_3</a></td></tr></table></div>

Таблица, которая находится внутри слоя (между <DIV></DIV>) изначально невидима за счет параметра VISIBILITY: hidden, и следует заметить, что у каждого такого слоя (их может быть несколько, для отображения нужного из нескольких, при наведении курсора на определенную ссылку) есть свой id. В нашем случае id=msa. Для остальных таблиц слоев писать id=msb, id=msc и т.д. в порядке возрастания по алфавиту. Теперь засовываем этот слой куда-нибудь вниз нашей страницы (лучше сразу перед тегом </BODY>).

Как же отобразить этот слой?
Чтобы отобразить нужный нам слой, следует в ссылке прописать параметр ONMOUSEOVER=P7_autoLayers(0,"msa","Closer"), где "msa" указывает на id отображаемого слоя.

"Привяжем" к ссылке link1 наш слой:

<a href="link1.htm" ONMOUSEOVER=P7_autoLayers(0,"msa","Closer")>link1</a>

Теперь при наведении курсора мыши на link1 у нас будет появляться табличка!

А как сделать, чтобы табличка появлялась в нужном месте?
Для этого существуют параметры LEFT и TOP, которые указываются в стиле слоя. LEFT - отступ от левого края страницы, TOP - отступ от верхнего края страницы. Чтобы настроить отображение слоя в нужном месте, надо поэкспериментировать со значениями этих параметров и добиться желаемого эффекта ;) Также есть еще некоторые параметры стиля слоя: WIDTH - ширина слоя, HEIGHT - высота слоя.
Благодаря параметрам LEFT и TOP мы можем строить как горизонтальное, так и вертикальное выпадающее меню! Для этого нам необходимо просто указать нужные значения.

А как сделать, чтобы слой исчезал, когда курсор не на сссылке?
Для этого нам надо прописать новый параметр в ячейках таблицы, "окружающих" наши ссылки. Т.е. следует прописывать параметр onmouseover=P7_autoLayers(0) в теге <td> ячейки таблицы, которая находится слева/справа/сверху/снизу наших ссылок (за исключением ячейки, где собственно находятся ссылки). В итоге, при наведении курсора на ячейку, в параметрах которой прописано onmouseover=P7_autoLayers(0), слой будет исчезать! Пропишем этот параметр в нужных местах нашей страницы:

<td width=100% onmouseover=P7_autoLayers(0)>Содержание страницы<br><br><br><br><br><br></td>

Теперь, при наведении курсора на ячейку, где написано "Содержание страницы", слой, независимо какой у него id, будет исчезать!

А как сделать другие слои, чтобы они отображались при наведении курсора на другую ссылку?
Элементарно! А точней, аналогично :) Создаем новый слой с другим id:

<div id=msb style="Z-INDEX: 9; LEFT: 475px; VISIBILITY: 
  hidden; WIDTH: 80px; POSITION: absolute; TOP: 40px; HEIGHT: 45px">

  <table width=80 border=0 bgcolor=#f1f1f1><tr><td><a href="podl4.htm">podlink_4</a></td></tr>

  <tr><td><a href="podl5.htm">podlink_5</a></td></tr></table></div>

И прописываем новый параметр в ссылке:

<a href="link2.htm" ONMOUSEOVER=P7_autoLayers(0,"msb","Closer")>link2</a>

А если не для всех ссылок нужно подменю?
Тогда, чтобы слой, отображенный при наведении на другую ссылку, не оставался видимым кодга мы наведем курсор на ссылку, для которой подменю не требуется, следует прописать новый параметр скрытия всех слоев в свойствах этой ссылки:

<a href="link3.htm" onmouseover=P7_autoLayers(0)>link3</a>

Пример данного творения, а также его "скрипт-родитель" можно увидеть здесь.
Получившееся меню отлично работает (проверено лично!) в разных браузерах - Internet Explorer, Opera, Mozilla.

Ну вот, в принципе и усе :) Думаю, теперь проблема построения универнсального выпадающего меню отпадет! Если у Вас все же еще остались (или только возникли) какие-либо вопросы по поводу этого меню - пишите мне, отвечу на все вопросы!

Удачи в нелегком деле веб-мастера!

	Комментарии		Оставить комментарий
Margarita \| 18-10-04 10:53 Привет IsleX! У меня возникли небольшие проблемы с меню. Чтобы меню выпало, нужно ткнуть мышкой, а само не выпадает при наведении и то же самое надо проделать, чтобы меню свернулось. Что можете посоветовать? Можете посмотреть на freedoom.r IsleX \| 21-06-04 21:16 Тока вот если делать выравнивание по центру ссылок, при наведении на которых срабатывает меню, при смене разрешения тама оно глючит.... Дык что делайте выравнивание по левому краю ;)			Имя: E-mail: Сообщение: :

	ПРОГРАММ: 649 \| СТАТЕЙ: 104 \| КОДОВ: 3433