XDforum

Объявление

Навигация

Победитель Конкурса


Конкурсы не проводились

[нет победителя]

Приветствие



Рады приветствовать Вас на развлекательном форуме
"XD".
Форум находится на стадии приостановленной работы.
Предлогаем Вам войти под своим аккаунтом или пройти несложный процесс регистрации для того что бы Вам открылась остальная часть форума.

Победитель Конкурса


Конкурсы не проводились

[нет победителя]

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

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


Вы здесь » 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