Пример за DropDown меню
Като начало, както винаги целия пример и след това детайлирано обяснение по него.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/javascript" src="drop_down_dhtml.js"></script>
<body onLoad="init();" >
<div style="position : absolute; left : 50%; ">
<a href="#" id="layer1" onMouseOver="hideAll(); showLayer('rel_layer1'); stopTime(); return showStatus('Menu 1')" onMouseOut="startTime(); return showStatus('')">Menu 1</a>
<a href="#" id="layer2" onMouseOver="hideAll(); showLayer('rel_layer2'); stopTime(); return showStatus('Menu 2')" onMouseOut="startTime(); return showStatus('')">Menu 2</a>
<a href="#" id="layer3" onMouseOver="hideAll(); showLayer('rel_layer3'); stopTime(); return showStatus('Menu 3')" onMouseOut="startTime(); return showStatus('')">Menu 3</a>
<a href="#" id="layer4" onMouseOver="hideAll(); showLayer('rel_layer4'); stopTime(); return showStatus('Menu 4')" onMouseOut="startTime(); return showStatus('')">Menu 4</a>
</div>
<script>
getCSS('layer1');
getCSS('layer2');
getCSS('layer3');
getCSS('layer4');
</script>
<div id="rel_layer1" >
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
</div>
<div id="rel_layer2" >
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 2')" onMouseOut="startTime(); return showStatus('')">Under_Menu 2</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 2')" onMouseOut="startTime(); return showStatus('')">Under_Menu 2</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 2')" onMouseOut="startTime(); return showStatus('')">Under_Menu 2</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 2')" onMouseOut="startTime(); return showStatus('')">Under_Menu 2</a>
</div>
<div id="rel_layer3" >
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 3')" onMouseOut="startTime(); return showStatus('')">Under_Menu 3</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 3')" onMouseOut="startTime(); return showStatus('')">Under_Menu 3</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 3')" onMouseOut="startTime(); return showStatus('')">Under_Menu 3</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 3')" onMouseOut="startTime(); return showStatus('')">Under_Menu 3</a>
</div>
<div id="rel_layer4" >
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 4')" onMouseOut="startTime(); return showStatus('')">Under_Menu 4</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 4')" onMouseOut="startTime(); return showStatus('')">Under_Menu 4</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 4')" onMouseOut="startTime(); return showStatus('')">Under_Menu 4</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 4')" onMouseOut="startTime(); return showStatus('')">Under_Menu 4</a>
</div>
</body>
</html> |
Нека да започнем с обяснението по примера. Първият важен ред за този пример е:
CODE1
| <script language="JavaScript" type="text/javascript" src="drop_down_dhtml.js"></script> |
чрез него вмъквате скрипта за управление на менютата. Друго важно нещо е извикването на функцията init в <body> тага.
Следва показването на менютата:
Нахите родителски менюта се поставят в един layer, на който му задаваме дадени координати и по този начин го позиционираме някъде в страницата. Може и да не слагате менютата в layer, това не е задължително, тъй като обръщението на скрипта става директно към всеки елемент по отделно.
CODE1
2
3
4
5
6
| <div style="position : absolute; left : 50%; ">
<a href="#" id="layer1" onMouseOver="hideAll(); showLayer('rel_layer1'); stopTime(); return showStatus('Menu 1')" onMouseOut="startTime(); return showStatus('')">Menu 1</a>
<a href="#" id="layer2" onMouseOver="hideAll(); showLayer('rel_layer2'); stopTime(); return showStatus('Menu 2')" onMouseOut="startTime(); return showStatus('')">Menu 2</a>
<a href="#" id="layer3" onMouseOver="hideAll(); showLayer('rel_layer3'); stopTime(); return showStatus('Menu 3')" onMouseOut="startTime(); return showStatus('')">Menu 3</a>
<a href="#" id="layer4" onMouseOver="hideAll(); showLayer('rel_layer4'); stopTime(); return showStatus('Menu 4')" onMouseOut="startTime(); return showStatus('')">Menu 4</a>
</div> |
Какво представлява един елемент от тази родителска навигация:
CODE1
| <a href="#" id="layer1" onMouseOver="hideAll(); showLayer('rel_layer1'); stopTime(); return showStatus('Menu 1')" onMouseOut="startTime(); return showStatus('')">Menu 1</a> |
- id - маркер , чрез който се идентифицира това родителско меню
- onMoseOver - при минаване чрез мишката върху него се извършва следното:
- скриват се всички други менюта, ако има отворени
- показване на дъщерното меню
- изтриване на таймера
- изпринтиране на даден текст в лентата за състояние
- on MouseOut - тук се извършва следното:
- стартиране на таймера
- и изтриване на текста от лентата за състояние
След зададеното от вас време дъщерното меню ще се скрие автоматично.
Следващото нещо в нашия пример е създаване на нашите
CSS настройки за дъщерните менюта. За тази цел извикваме толкова пъти функцията getCSS, колкото са и родителските менюта, като предаваме тяхното id, като параметър.
CODE1
2
3
4
5
6
| <script>
getCSS('layer1');
getCSS('layer2');
getCSS('layer3');
getCSS('layer4');
</script> |
Като последна стъпка дефинираме нашите дъщерни менюта:
CODE1
2
3
4
5
6
| <div id="rel_layer1" >
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
<a href="#" onMouseOver="stopTime(); return showStatus('Under_Menu 1')" onMouseOut="startTime(); return showStatus('')">Under_Menu 1</a>
</div> |
Тук вече е задължително, менютата да са в
Layer, защото това е елемент, който лесно можем да скриваме и показваме и той не е зависим от други елементи на страницата. Важно тук е идентификацията на този
layer. Тя трябва да е уникална и да съответства на параметъра, който е зададен във функцията
showLayer, при съответното родителско
меню.
Това е в общи линии
DropDown менюто. Надявам се да ви свърши работа и да ви спести малко време, ако трябва сами да си го пишете. Всеки има право да допълва този скрипт и да го модифицира. Ще се радвам да видя различни модификации, защото има още неща, които могат да се допълнят. Това е вече въпрос на интерес и малко занимавка!
