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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
| /**
* HoverAccordion - jQuery plugin for intuitively opening accordions and menus
* http://berndmatzner.de/jquery/hoveraccordion/
* Copyright (c) 2008 Bernd Matzner
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires jQuery 1.2.1 or higher
* Version: 0.5.0
*
* Usage:
* $('#YourUnorderedListID').hoverAccordion();
* or
* $('.YourUnorderedListClass').hoverAccordion({
* speed: 'slow',
* activateitem: '1',
* active: 'current',
* header: 'title',
* hover: 'highlight',
* opened: 'arrowdown',
* closed: 'arrowup'
* keepheight: 'true'
* });
*/
(function($){
$.fn.hoverAccordion = function(options){
// Setup options
options = jQuery.extend({
speed: 'fast', // Speed at which the subitems open up - valid options are: slow, normal, fast
activateitem: 'true', // 'true': Automatically activate items with links corresponding to the current page, '2': Activate item #2
active: 'active', // Class name of the initially active element
header: 'header', // Class name for header items
hover: 'hover', // Class name for hover effect
opened: 'opened', // Class name for open header items
closed: 'closed', // Class name for closed header items
keepheight: 'true' // 'true': Set the height of each accordion item to the size of the largest one, 'false': Leave height as is
}, options);
// Current hover status
var thislist = this;
// Current URL
var thisurl = window.location.href;
// Interval for detecting intended element activation
var i = 0;
// Change display status of subitems when hovering
function doHover(obj){
if ($(obj).html() == undefined)
obj = this;
// Change only one display status at a time
if (!thislist.is(':animated')) {
var newelem = $(obj).parent().children('ul');
var oldelem = $(obj).parent().parent().children('li').children('ul:visible');
if (options.keepheight == 'true') {
thisheight = maxheight;
}
else {
thisheight = newelem.height();
}
// Change display status if not already open
if (!newelem.is(':visible')) {
newelem.children().hide();
newelem.animate({
height: thisheight
}, {
step: function(n, fx){
newelem.height(thisheight - n);
},
duration: options.speed
}).children().show();
oldelem.animate({
height: 'hide'
}, {
step: function(n, fx){
newelem.height(thisheight - n);
},
duration: options.speed
}).children().hide();
// Switch classes for headers
oldelem.parent().children('a').addClass(options.closed).removeClass(options.opened);
newelem.parent().children('a').addClass(options.opened).removeClass(options.closed);
}
}
};
var itemNo = 0;
var maxheight = 0;
// Setup initial state and hover events
$(this).children('li').each(function(){
var thisitem = $(this);
itemNo++;
// Set current link to current URL to 'active' and disable anchor links
var thislink = thisitem.children('a');
if (thislink.length > 0) {
// Hover effect for all links
thislink.hover(function(){
$(this).addClass(options.hover);
}, function(){
$(this).removeClass(options.hover);
});
var thishref = thislink.attr('href');
if (thishref == '#') {
// Add a click event if the header does not contain a link
thislink.click(function(){
doHover(this);
this.blur();
return false;
});
}
else
if (options.activateitem == 'true' && thisurl.indexOf(thishref) > 0 && thisurl.length - thisurl.lastIndexOf(thishref) == thishref.length) {
thislink.parent().addClass(options.active);
}
}
var thischild = thisitem.children('ul');
// Initialize subitems
if (thischild.length > 0) {
if (maxheight < thischild.height())
maxheight = thischild.height();
// Change appearance of the header element of the active item
thischild.children('li.' + options.active).parent().parent().children('a').addClass(options.header);
// Bind hover events to all subitems
thislink.hover(function(){
var t = this;
i = setInterval(function(){
doHover(t);
clearInterval(i);
}, 400);
}, function(){
clearInterval(i);
});
// Set current link to current URL to 'active'
if (options.activateitem == 'true') {
thischild.children('li').each(function(){
var m = $(this).children('a').attr('href');
if (m) {
if (thisurl.indexOf(m) > 0 && thisurl.length - thisurl.lastIndexOf(m) == m.length) {
$(this).addClass(options.active).parent().parent().children('a').addClass(options.opened);
}
}
});
}
else
if (parseInt(options.activateitem) == itemNo) {
thisitem.addClass(options.active).children('a').addClass(options.opened);
}
}
// Close all subitems except for those with active items
thischild.not($(this).parent().children('li.' + options.active).children('ul')).not(thischild.children('li.' + options.active).parent()).hide().parent().children('a').addClass(options.closed);
});
return this;
};
})(jQuery); |
Menu hoveraccordion - Garder le menu ouvert
Répondre avec citation
Partager