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
| $(function() {
//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
/**
bind the mouseenter, mouseleave to each item:
- shows / hides image and submenu
bind the click event to the list elements (submenu):
- hides all items except the clicked one,
and shows the content for that item
*/
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
/**
mouseenter function for the items
the timeout is used to prevent this event
to trigger if the user moves the mouse with
a considerable speed through the menu items
*/
function m_enter(){
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
$this.find('.cc_title').stop().animate({'top':'449px'},400).css('background','#3c824e');
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'81px'},400);
},200);
}
//mouseleave function for the items
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
$this.find('.cc_title').stop().animate({'top':'267px'},400).css('background','none');
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
//back to menu button - unfolds the menu
$('#cc_back').bind('click',unfold);
$('#cc_back1').bind('click',unfold);
/**
hides all the menu items except the clicked one
after that, the content is shown
*/
function fold($li_e){
var $item = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-231px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}
/**
shows all the menu items
also hides any item's image / submenu
that might be displayed
*/
function unfold(){
$('#cc_content').stop().animate({'left':'-693px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200)
.andSelf()
.find('.cc_title')
.stop()
.animate({'top':'267px'},200).css('background','none');
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}
//function to show the content
function showContent(idx){
$('#cc_content').stop().animate({'left':'231px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}
//function to hide the content
function hideContent(){
$('#cc_content').find('div.block').hide();
}
}); |
