menu.js
4.17 KB
1
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
function prepareMenu(id, options) {
var menuCloseTimeout = options.timeout || 333;
if ( document.all ) {
// add a class for work arround msie´s css bugs
$(id).className += " msie";
}
var zIndex = 10;
$$("#" + id + " ul ul").each( function( ul ) { // para cada UL de sub-menu faça:
// Pega o link que abre este sub-menu:
var linkText = ul.parentNode.firstChild;
// Retira espaço em branco sobrando nas bordas deste:
linkText.nodeValue = linkText.nodeValue.replace( /^\s*|\s*$/g, "" );
// Create a link to open this sub-menu:
var link = document.createElement("a");
link.href = "#";
link.className = "linkSubMenu";
linkText.parentNode.insertBefore( link, linkText );
link.appendChild( linkText );
link.parentNode.style.zIndex = zIndex++;
link.subMenu = ul;
ul.linkControle = link;
link.openSubMenu =
function ( isMouseClick ) {
if( this.subMenu.style.display == "block" ) {
if( isMouseClick ) {
this.subMenu.style.display = "none";
} else {
clearTimeout(this.timeOutClose);
clearTimeout(this.subMenu.timeOutClose);
return false;
}
} else {
this.subMenu.style.display = "block";
clearTimeout(this.timeOutClose);
clearTimeout(this.subMenu.timeOutClose);
}
}
link.closeSubMenu = function(){ this.subMenu.style.display = "none" }
link.onclick = function(){ this.openSubMenu(true); return false }
// onmouseout e onmouseover manipulam o menu para pessoas normais
// onblur e onfocus manipulam o menu para pessoas que precisam navegar com tab
link.onmouseover = link.onfocus =
function () {
this.openSubMenu(false);
};
link.onmouseout = link.onblur =
function () {
this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout );
};
ul.closeSubMenu = function(){ this.style.display = "none" }
ul.onmouseover = ul.onfocus =
function () {
this.blurCalledByIEWorkArroundBug = false;
clearTimeout(this.timeOutClose);
clearTimeout(this.linkControle.timeOutClose);
};
ul.onmouseout = ul.onblur =
function () {
if ( this.blurCalledByIEWorkArroundBug ) { return false }
this.blurCalledByIEWorkArroundBug = true;
this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
};
});
// **** begin of workaround for Microsoft Internet Explorer ****
// MS IE sucks, BTW.
if ( document.all ) {
function forceUlFocusFromLink ( a ) {
var stop = false;
a.ancestors().each( function(el) {
if ( el.id == "menu" ) { stop = true }
if ( ! stop && el.onfocus ) { el.onfocus() }
} );
}
function forceUlBlurFromLink ( a ) {
var stop = false;
a.ancestors().each( function(el) {
if ( el.id == "menu" ) { stop = true }
if ( ! stop && el.onblur ) { el.onblur() }
} );
}
$$("#" + id + " ul ul a").each( function( a ) {
// os links do sub menu forçarão o foco do ul
if ( a.className == "linkSubMenu" ) {
a.onfocus = function() {
forceUlFocusFromLink(this);
this.openSubMenu(false);
};
a.onblur = function() {
forceUlBlurFromLink(this);
this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 );
};
} else {
a.onfocus = function() { forceUlFocusFromLink(this) };
a.onblur = function() { forceUlBlurFromLink(this) };
}
});
} // ** end of workaround for Microsoft Internet Explorer.
}