XDforum

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » XDforum » Скрипты » Выпадающее меню


Выпадающее меню

Сообщений 1 страница 3 из 3

1

Для выполнения операций со слоями мы будем использовать JavaScript.
Соответствующий сценарий приведён ниже:
<Script Language="JavaScript">

//  Установка глобальных переменных
.

cm=null;                    // сюда будем запоминать
                                // видимый слой. Начальное
                               // значение - null.
hide_delay=500;       // Время задержки (в м.с.) авто-закр.
                              // меню.
tstat=0;                  // Признак активности таймера авто-закр.

// Определяем браузер пользователя

isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

// Функция отображающая и скрывающая слои

// Вход:
// objElement - идентификатор(id) слоя;
// bolVisible - булева переменная:
// true  - отобразить слой;
// false - скрыть слой.

// Выход:
// 1

// P.S: В зависимости от типа браузера
// сценарий для манипуляции с видимостью слоёв
// несколько различается.

function switchDiv(objElement,bolVisible){
if(isNS4||isIE4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }     
} else if (isIE5 || isNS6) {
      if(!bolVisible){
         objElement.style.display = "none";
         
      } else {
        objElement.style.display = "";
       
        }

      }

return 1;
}

// Функция возвращающая значение указанного ей
// свойства объекта (не обязательно слоя).

// Вход:
// el    - идентификатор элемента;
// sProp - свойство (left,top...)

// Выход:
// Значение какого-нибудь свойства объекта.

function getPos(el,sProp) {
var iPos = 0;
while (el!=null) {
    iPos+=el["offset" + sProp]
    el = el.offsetParent
}
return iPos

}

// Функция выдаёт объект с указанным
// ей названием.

// Вход:
// myid - название объекта

// Выход: объект.

function getelementbyid(myid) {
   if (isNS4){
        objElement = document.layers[myid];
     }else if (isIE4) {
        objElement = document.all[myid];
     }else if (isIE5 || isNS6) {
             objElement = document.getElementById(myid);
     }
return(objElement);
}

// Функция отображающая|скрывающая
// ,а предварительно ещё и передвигающая
// должным образом слои.

// Вход:
// el - яйчейка таблицы на которой
// находится указатель;
// m  - наименование слоя, который надо
// отобразить под этой яйчейкой.

function show(el,m) {

// Если имеется видимый слой,
// сделать его невидимым.

if (cm!=null) {
switchDiv(cm,false);
}

// Если указано название слоя для отображения,
// то:
// 1) Получаем его объект;
// 2) X слоя = X яйчейки;
// 3) Y слоя = Y яйчейки + высота яйчейки;
// 4) Делаем слой видимым;
// 5) Сохраняем копию слоя в cm. 

if (m!=null) {
m=getelementbyid(m);
m.style.left = getPos(el,"Left")+"px";
m.style.top =  getPos(el,"Top")+el.offsetHeight+"px";
switchDiv(m,true);
cm=m;
}

}

// Функция "закрывающая" меню.

// Функция ничего не принимает на вход
// и возвращает 1.

function hidemenu() {

// Устанавливаем задержку равную
// hide_delay м.с. с помощью таймера;

timer1=setTimeout("show(null,null)",hide_delay);

// Устанавливаем tstat=1 - признак, того, что таймер запущен.
tstat=1;

return 1;
}

// Функция, останавливающая таймер запущенный
// прошлой функцией. Таким образом,
// меню не пропадает.

// Функция ничего не принимает на вход
// и возвращает 1.

function cancelhide() {
if (tstat==1) {
clearTimeout(timer1);
tstat=0;
}
return 1;
}

</Script>

Когда мы знакомы со сценарием, самое время познакомиться и с актёрами для которых он написан.

В нашем сегодняшнем представлении главные роли исполняют слои (div), а также таблица, выполняющая роль основного меню. Вот пример HTML работающий со сценарием:

<TABLE WIDTH=300 BORDER=1 onMouseOut="hidemenu()" onMouseOver="cancelhide()">
<TR>
<TD width=100 align="center" onMouseOver="show(this,'submenu1')"><a href="">Меню 1</a></TD>
<TD Width=100 align="center" onMouseOver="show(this,'submenu2')"><a href="">Меню 2</a></TD>
<TD width=100 align="center" onMouseOver="show(this,'submenu3')"><a href="">Меню 3</a></TD>
</TR>
</TABLE>

Таблица - основное меню. При наведении курсора на неё (самый первый onMouseOver ) вызывается функция “cancelhide()”. Когда курсор отъезжает (первый onMouseOver) выполняется функция “hidemenu()”.

При наведении курсора на какую-нибудь из её яйчеек, вызывается функция “show(this,[id_слоя])”. Где [id_ слоя] - наименование слоя.


<DIV ID="submenu1" STYLE="LEFT: -1000px;OVERFLOW: hidden;POSITION: absolute;TOP: -1000px;" onMouseOut="hidemenu()" onMouseOver="cancelhide()">
<table cellpadding=1 cellspacing=0 BORDER=1 width=100>
<tr>
<td width=”100%”><a href="">SubMenu1_1</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_2</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_3</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_4</a></td>
</tr>
</table>
</DIV>

Один из изначально невидимых (OVERFLOW: hidden), находящихся за пределами экрана (LEFT: -1000px; TOP: -1000px) слоёв. При наведении курсора мыши на него (onMouseOver) вызывается функция “cancelhide()”, а когда курсор мыши «уходит» (onMouseOut), то “hidemenu()” (описания этих функций см. выше).

0

2

ето для php?

0

3

Никита, это подходит для форумов mybb и партнерских. На основе css и java сделано.

0


Вы здесь » XDforum » Скрипты » Выпадающее меню


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC