menu.js
4.51 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
113
114
115
116
117
118
119
120
121
122
123
define(['jquery', 'superfish', 'superclick'], function ($) {
var Menu = function (elem) {
this.elems = $(elem);
this.mainMenu = $(elem).find('.sf-menu');
this.mobileMenu = $('#primary-nav-mobile').find('.sf-click');
};
Menu.prototype.setup = function () {
var $this = this;
// For jMenu default class setting
this.elems.find('ul.sf-menu').superfish({
animation: {height: 'show'},
animationOut: {height: 'hide'},
speed: 'fast',
speedOut: 'fast',
delay: 150
});
// Mobile menu script
// ==================
$('#primary-nav-mobile .sf-click').find('ul.sub-menu').parent().addClass('has-children').append('<span class="parent-button"><span class="subnav-button"></span></span>');
// Open sub nav with slide animation
$('#primary-nav-mobile .sf-click').find('.parent-button').click(function (e) {
if($(this).parent().hasClass('menu-item-depth-0')) {
if($(this).hasClass('open')) {
$(this).toggleClass('open');
$(this).parent().find('> .sub-menu').slideUp(250);
} else {
$(this).toggleClass('open');
$(this).parent().find('> .sub-menu').slideToggle(250);
$('#primary-nav-mobile .sf-click > li').not($(this).parent()).filter(function (index) {
$(this).find('> .parent-button.open').removeClass('open');
$(this).find('> .sub-menu').slideUp(250);
});
}
} else {
$(this).toggleClass('open');
$(this).parent().find('> .sub-menu').slideToggle(250);
}
});
// If any sub nav is selected, the menu is open
$('#primary-nav-mobile .sf-click').find(
'.current-menu-item > .parent-button, ' +
'.current-menu-parent > .parent-button, ' +
'.current-page-parent > .parent-button'
).addClass('open');
//this.menuHover();
};
Menu.prototype.menuHover = function () {
var shadeColor = function (color, percent) {
var R = parseInt(color.substring(1, 3), 16);
var G = parseInt(color.substring(3, 5), 16);
var B = parseInt(color.substring(5, 7), 16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R < 255) ? R : 255;
G = (G < 255) ? G : 255;
B = (B < 255) ? B : 255;
var RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16));
var GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16));
var BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16));
return "#" + RR + GG + BB;
},
oriColor,
darkenColor;
this.mainMenu.find('li').bind({
'mouseenter': function () {
oriColor = $(this).css('backgroundColor');
darkenColor = shadeColor(oriColor, -40);
$(this).css('background-color', darkenColor);
$(this).find('li').css('background-color', oriColor);
$(this).find('li:hover').css('background-color', darkenColor);
$(this).parent().css('overflow', 'visible');
},
'mouseleave': function () {
$(this).css('background-color', oriColor);
$(this).parent().css('overflow', 'hidden');
}
});
};
$.cssHooks.backgroundColor = {
get: function (elem) {
var bg;
if (elem.currentStyle) {
bg = elem.currentStyle["backgroundColor"];
} else if (window.getComputedStyle) {
bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
}
if (bg.search("rgb") == -1) {
return bg;
}
else {
bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
}
};
return Menu;
});