cscotta (owner)

Revisions

gist: 24687 Download_button fork
public
Public Clone URL: git://gist.github.com/24687.git
Embed All Files: show embed
hovernav.js #
raw 
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

function hoverNavInit() {
	// Set event listeners to initialize hoverNav
	$$('#nav-container #nav li').each(function(el) { 
		el.observe('mouseover', function() { hoverNav(this) } );
		el.observe('mouseout', function() { hoverNav('off') } );
	});
 
	// Allow two seconds before resetting subnav.
	$$('#subnav ul li').each(function(el) { 
		el.observe('mouseover', function() { hoverNavClearTimeout() } );
		el.observe('mouseout', function() { hoverNavSetTimeout() } );
	});
 
	// Do not subnav after a user has clicked a link.
	$$('#subnav ul li a').each(function(el) { 
		el.observe('click', function() { hoverNavClearTimeout() } );
	});
}
 
function hoverNav(active) {
	group = '.nav-group';
	if(active != "off") {
		hoverNavOff(group);
		hoverNavClearTimeout();
		active.addClassName('on');
		$(active.id + '-group').show();
		$(active.id + '-group').setStyle({ display: 'block'});;
	} else {
		hoverNavSetTimeout(group);
	}
}
 
function hoverNavOff(group) {
	$$('#subnav ul').each(function(item) { item.setStyle({ display: 'none'}); });
	$$(group).each(function(item) { item.removeClassName('on'); });
}
 
function hoverNavReset(group) {
	// Reset hoverNav to default state if we have a channel, we're on the home page, and the current state is not the default.
	if (typeof(hovernav_channel) == "string" && hovernav_channel != "home" && !$('nav-' + hovernav_channel).hasClassName('on')) {
		$$('#nav li').each(function(item) { item.removeClassName('on') });
		$$('#subnav ul').each(function(item) { item.fade({ duration: 0.15, queue: 'front'}) });
		$('nav-' + hovernav_channel).addClassName('on');
		$('nav-' + hovernav_channel + '-group').appear({ duration: 0.15, queue: 'end'});
	} else if (hovernav_channel == "home") {
		$$('#nav li').each(function(item) { item.removeClassName('on') });
		$$('#subnav ul').each(function(item) { item.fade({ duration: 0.15, queue: 'front'}) });
	}
}
 
function hoverNavSetTimeout() { navTimeout = setTimeout( function() { hoverNavReset(group) }, 1500); }
function hoverNavClearTimeout() { if (typeof navTimeout != 'undefined') clearTimeout(navTimeout); }
 
document.observe('dom:loaded', hoverNavInit);