SWE-ART
ГЛАВНАЯ

Управление сайтом

4.gif

Компоненты системы

4.gif

Интерфейс cms

4.gif

Оформление

4.gif

Видео архив

4.gif

Новости cms sspro

4.gif

Вопросы по cms

4.gif

Задать вопрос

4.gif

Тематические статьи

4.gif

Он - лайн демо

4.gif

Скачать CMS SSPRO

4.gif

Партнерам

4.gif

Условия

4.gif

Отправить заявку

4.gif

Обратная связь

4.gif

Вакансии

4.gif

О компании

4.gif

Реквизиты

4.gif

Он - лайн демо

4.gif

Скачать CMS SSPRO

4.gif

Управление сайтом

Компоненты системы

4.gif

Интерфейс cms

4.gif

Оформление

4.gif

Видео архив

4.gif

Обратная связь

4.gif

Вакансии

4.gif

О компании

4.gif

Реквизиты

4.gif

Партнерам

Условия

4.gif

Отправить заявку

4.gif

Новости cms sspro

4.gif

Вопросы по cms

4.gif

Задать вопрос

4.gif

Тематические статьи

4.gif

Корреспонденция

4.gif

Статистика посещений

4.gif

Список интернет провайдеров

4.gif

Схема проезда

4.gif
Применение SSPro
Сайты-визитки
Интернет-магазины
Корпоративные сайты
Внутрикорпоративные системы
Лучшее решение!

Выезд демонстратора

Удобно
Демо-версия SSPro Наглядно
Он-лайн консультация:
 ICQ#: 213-446

Сертификат 1С

Свидетельство

Создание и продвижение сайта
Cве Арт


         
  +7 (495) 988 0968, 778 83 39

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

 

Опубликовано:
24.11.05

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

 

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

Что необходимо?

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

Для примера возьмем обыкновенную 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.

Ну вот, в принципе и усе :) Думаю, теперь проблема построения универнсального выпадающего меню отпадет! Удачи в нелегком деле веб-мастера!

Автор: Алексей Сивин


Версия для печати

Назад

         
Каталог ссылок
SWE-ART
Москва, ул. Угрешская, д. 2 (Технопарк "Синтез"), стр. 31
+7 (495) 988-0968 (многоканальный), 778 83 39
Реклама: