JQuery Accordion Menu Widget - Version 2.0

Version Description

  • Added : Ability to select either hover or click to activate menu
  • Added : Hover delay setting for hover event
  • Added : Close menu option for hover event
Download this release

Release Info

Developer remix4
Plugin Icon wp plugin JQuery Accordion Menu Widget
Version 2.0
Comparing to
See all releases

Code changes from version 1.1 to 2.0

dcwp_jquery_accordion.php CHANGED
@@ -2,10 +2,10 @@
2
/*
3
Plugin Name: jQuery Vertical Accordion Menu
4
Plugin URI: http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/
5
- Tags: jquery, dropdown, menu, vertical accordion, animated, css, navigation
6
- Description: Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery. Features include - handles multiple levels & saved state using cookies.
7
Author: Lee Chestnutt
8
- Version: 1.1
9
Author URI: http://www.designchemical.com
10
*/
11
@@ -22,8 +22,9 @@ class dc_jqaccordion {
22
23
// Scripts
24
wp_enqueue_script( 'jquery' );
25
wp_enqueue_script( 'jquerycookie', dc_jqaccordion::get_plugin_directory() . '/js/jquery.cookie.js', array('jquery') );
26
- wp_enqueue_script( 'dcjqaccordion', dc_jqaccordion::get_plugin_directory() . '/js/jquery.dcjqaccordion.js', array('jquery') );
27
}
28
add_action( 'wp_footer', array('dc_jqaccordion', 'footer') );
29
2
/*
3
Plugin Name: jQuery Vertical Accordion Menu
4
Plugin URI: http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/
5
+ Tags: jquery, dropdown, menu, vertical accordion, animated, css, navigation, accordion
6
+ Description: Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery. Features include - handles multiple levels, saved state using cookies and option of selecting "click" or "hover" events for triggering the menu.
7
Author: Lee Chestnutt
8
+ Version: 2.0
9
Author URI: http://www.designchemical.com
10
*/
11
22
23
// Scripts
24
wp_enqueue_script( 'jquery' );
25
+ wp_enqueue_script( 'jqueryhoverintent', dc_jqaccordion::get_plugin_directory() . '/js/jquery.hoverIntent.minified.js', array('jquery') );
26
wp_enqueue_script( 'jquerycookie', dc_jqaccordion::get_plugin_directory() . '/js/jquery.cookie.js', array('jquery') );
27
+ wp_enqueue_script( 'dcjqaccordion', dc_jqaccordion::get_plugin_directory() . '/js/jquery.dcjqaccordion.2.0.js', array('jquery') );
28
}
29
add_action( 'wp_footer', array('dc_jqaccordion', 'footer') );
30
dcwp_jquery_accordion_widget.php CHANGED
@@ -27,10 +27,13 @@ class dc_jqaccordion_widget extends WP_Widget {
27
'title' => '',
28
'classParent' => 'dcjq-parent',
29
'classActive' => 'active',
30
'autoClose' => 'on',
31
'saveState' => 'on',
32
- 'disableLink' => 'on',
33
'speed' => 'slow',
34
'skin' => 'demo.css'
35
);
36
}
@@ -60,13 +63,9 @@ class dc_jqaccordion_widget extends WP_Widget {
60
61
<div class="dcjq-accordion" id="<?php echo $this->id.'-item'; ?>">
62
63
- <?php
64
-
65
-
66
-
67
- wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu, 'container' => false ) );
68
-
69
- ?>
70
71
</div>
72
<?php
@@ -79,6 +78,7 @@ class dc_jqaccordion_widget extends WP_Widget {
79
$instance['title'] = strip_tags( stripslashes($new_instance['title']) );
80
$instance['nav_menu'] = (int) $new_instance['nav_menu'];
81
$instance['autoClose'] = $new_instance['autoClose'];
82
$instance['saveState'] = $new_instance['saveState'];
83
$instance['disableLink'] = $new_instance['disableLink'];
84
$instance['classParent'] = strip_tags( stripslashes($new_instance['classParent']) );
@@ -86,6 +86,7 @@ class dc_jqaccordion_widget extends WP_Widget {
86
$instance['event'] = strip_tags( stripslashes($new_instance['event']) );
87
$instance['skin'] = $new_instance['skin'];
88
$instance['speed'] = $new_instance['speed'];
89
90
return $instance;
91
}
@@ -96,12 +97,14 @@ class dc_jqaccordion_widget extends WP_Widget {
96
$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
97
if(! isset($instance['autoClose']) ){ $instance['autoClose'] = 'false'; }
98
if(! isset($instance['saveState']) ){ $instance['saveState'] = 'false'; }
99
if(! isset($instance['disableLink']) ){ $instance['disableLink'] = 'false'; }
100
$classParent = isset( $instance['classParent'] ) ? $instance['classParent'] : '';
101
$classActive = isset( $instance['classActive'] ) ? $instance['classActive'] : '';
102
$event = isset( $instance['event'] ) ? $instance['event'] : '';
103
$skin = isset( $instance['skin'] ) ? $instance['skin'] : '';
104
$speed = isset( $instance['speed'] ) ? $instance['speed'] : '';
105
106
$widget_options = wp_parse_args( $instance, $this->defaults );
107
extract( $widget_options, EXTR_SKIP );
@@ -130,17 +133,45 @@ class dc_jqaccordion_widget extends WP_Widget {
130
?>
131
</select>
132
</p>
133
<p>
134
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('autoClose'); ?>" name="<?php echo $this->get_field_name('autoClose'); ?>"<?php checked( $autoClose, 'true' ); ?> />
135
<label for="<?php echo $this->get_field_id('autoClose'); ?>"><?php _e( 'Auto Close Open Menus' , 'dcjq-accordion' ); ?></label><br />
136
-
137
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('saveState'); ?>" name="<?php echo $this->get_field_name('saveState'); ?>"<?php checked( $saveState, 'true'); ?> />
138
<label for="<?php echo $this->get_field_id('saveState'); ?>"><?php _e( 'Save Menu State (uses cookies)' , 'dcjq-accordion' ); ?></label><br />
139
140
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('disableLink'); ?>" name="<?php echo $this->get_field_name('disableLink'); ?>"<?php checked( $disableLink, 'true' ); ?> />
141
<label for="<?php echo $this->get_field_id('disableLink'); ?>"><?php _e( 'Disable Parent Links' , 'dcjq-accordion' ); ?></label><br />
142
</p>
143
-
144
<p><label for="<?php echo $this->get_field_id('skin'); ?>"><?php _e('Skin:', 'dcjq-accordion'); ?> <?php
145
146
// http://www.codewalkers.com/c/a/File-Manipulation-Code/List-files-in-a-directory-no-subdirectories/
@@ -162,16 +193,6 @@ class dc_jqaccordion_widget extends WP_Widget {
162
closedir($dh);
163
echo "</select>"; ?> </label><br />
164
</p>
165
-
166
- <p><label for="<?php echo $this->get_field_id('speed'); ?>"><?php _e('Animation Speed:', 'dcjq-accordion'); ?>
167
- <select name="<?php echo $this->get_field_name('speed'); ?>" id="<?php echo $this->get_field_id('speed'); ?>" >
168
- <option value='slow' <?php selected( $speed, 'slow'); ?> >Slow</option>
169
- <option value='normal' <?php selected( $speed, 'normal'); ?> >Normal</option>
170
- <option value='fast' <?php selected( $speed, 'fast'); ?> >Fast</option>
171
- </select>
172
- </label>
173
- </p>
174
- <input type="hidden" id="<?php echo $this->get_field_id('event'); ?>" name="<?php echo $this->get_field_name('event'); ?>" value="click" />
175
<input type="hidden" id="<?php echo $this->get_field_id('classParent'); ?>" name="<?php echo $this->get_field_name('classParent'); ?>" value="dcjq-parent" />
176
<input type="hidden" id="<?php echo $this->get_field_id('classActive'); ?>" name="<?php echo $this->get_field_name('classActive'); ?>" value="active" />
177
<div class="widget-control-actions alignright">
@@ -185,8 +206,7 @@ class dc_jqaccordion_widget extends WP_Widget {
185
function styles(){
186
187
if(!is_admin()){
188
-
189
-
190
$all_widgets = $this->get_settings();
191
192
foreach ($all_widgets as $key => $wpdcjqaccordion){
@@ -207,22 +227,28 @@ class dc_jqaccordion_widget extends WP_Widget {
207
208
if(!is_admin()){
209
210
- $all_widgets = $this->get_settings();
211
212
- foreach ($all_widgets as $key => $wpdcjqaccordion){
213
214
- $widget_id = $this->id_base . '-' . $key;
215
216
- if(is_active_widget(false, $widget_id, $this->id_base)){
217
218
- $autoClose = $wpdcjqaccordion['autoClose'];
219
- if($autoClose == ''){$autoClose = 'false';};
220
221
- $saveState = $wpdcjqaccordion['saveState'];
222
- if($saveState == ''){$saveState = 'false';};
223
224
- $disableLink = $wpdcjqaccordion['disableLink'];
225
- if($disableLink == ''){$disableLink = 'false';};
226
227
?>
228
<script type="text/javascript">
@@ -230,7 +256,9 @@ class dc_jqaccordion_widget extends WP_Widget {
230
jQuery('#<?php echo $widget_id.'-item'; ?> .menu').dcAccordion({
231
classParent: '<?php echo $wpdcjqaccordion['classParent']; ?>',
232
classActive: '<?php echo $wpdcjqaccordion['classActive']; ?>',
233
- event: '<?php echo $wpdcjqaccordion['event']; ?>',
234
autoClose: <?php echo $autoClose; ?>,
235
saveState: <?php echo $saveState; ?>,
236
disableLink: <?php echo $disableLink; ?>,
@@ -240,7 +268,6 @@ class dc_jqaccordion_widget extends WP_Widget {
240
</script>
241
242
<?php
243
-
244
}
245
}
246
}
27
'title' => '',
28
'classParent' => 'dcjq-parent',
29
'classActive' => 'active',
30
+ 'event' => 'click',
31
+ 'hoverDelay' => '300',
32
+ 'menuClose' => 'on',
33
'autoClose' => 'on',
34
'saveState' => 'on',
35
'speed' => 'slow',
36
+ 'disableLink' => 'on',
37
'skin' => 'demo.css'
38
);
39
}
63
64
<div class="dcjq-accordion" id="<?php echo $this->id.'-item'; ?>">
65
66
+ <?php
67
+ wp_nav_menu( array( 'fallback_cb' => '', 'menu' => $nav_menu, 'container' => false ) );
68
+ ?>
69
70
</div>
71
<?php
78
$instance['title'] = strip_tags( stripslashes($new_instance['title']) );
79
$instance['nav_menu'] = (int) $new_instance['nav_menu'];
80
$instance['autoClose'] = $new_instance['autoClose'];
81
+ $instance['menuClose'] = $new_instance['menuClose'];
82
$instance['saveState'] = $new_instance['saveState'];
83
$instance['disableLink'] = $new_instance['disableLink'];
84
$instance['classParent'] = strip_tags( stripslashes($new_instance['classParent']) );
86
$instance['event'] = strip_tags( stripslashes($new_instance['event']) );
87
$instance['skin'] = $new_instance['skin'];
88
$instance['speed'] = $new_instance['speed'];
89
+ $instance['hoverDelay'] = $new_instance['hoverDelay'];
90
91
return $instance;
92
}
97
$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
98
if(! isset($instance['autoClose']) ){ $instance['autoClose'] = 'false'; }
99
if(! isset($instance['saveState']) ){ $instance['saveState'] = 'false'; }
100
+ if(! isset($instance['menuClose']) ){ $instance['menuClose'] = 'false'; }
101
if(! isset($instance['disableLink']) ){ $instance['disableLink'] = 'false'; }
102
$classParent = isset( $instance['classParent'] ) ? $instance['classParent'] : '';
103
$classActive = isset( $instance['classActive'] ) ? $instance['classActive'] : '';
104
$event = isset( $instance['event'] ) ? $instance['event'] : '';
105
$skin = isset( $instance['skin'] ) ? $instance['skin'] : '';
106
$speed = isset( $instance['speed'] ) ? $instance['speed'] : '';
107
+ $hoverDelay = isset( $instance['hoverDelay'] ) ? $instance['hoverDelay'] : '';
108
109
$widget_options = wp_parse_args( $instance, $this->defaults );
110
extract( $widget_options, EXTR_SKIP );
133
?>
134
</select>
135
</p>
136
+ <p>
137
+ <input type="radio" id="<?php echo $this->get_field_id('event1'); ?>" name="<?php echo $this->get_field_name('event'); ?>" value="click"<?php checked( $event, 'click' ); ?> />
138
+ <label for="<?php echo $this->get_field_id('event1'); ?>"><?php _e( 'Click' , 'dcjq-accordion' ); ?></label>
139
+ <input type="radio" id="<?php echo $this->get_field_id('event2'); ?>" name="<?php echo $this->get_field_name('event'); ?>" value="hover"<?php checked( $event, 'hover' ); ?> />
140
+ <label for="<?php echo $this->get_field_id('event2'); ?>"><?php _e( 'Hover' , 'dcjq-accordion' ); ?></label>
141
+ </p>
142
<p>
143
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('autoClose'); ?>" name="<?php echo $this->get_field_name('autoClose'); ?>"<?php checked( $autoClose, 'true' ); ?> />
144
<label for="<?php echo $this->get_field_id('autoClose'); ?>"><?php _e( 'Auto Close Open Menus' , 'dcjq-accordion' ); ?></label><br />
145
+
146
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('saveState'); ?>" name="<?php echo $this->get_field_name('saveState'); ?>"<?php checked( $saveState, 'true'); ?> />
147
<label for="<?php echo $this->get_field_id('saveState'); ?>"><?php _e( 'Save Menu State (uses cookies)' , 'dcjq-accordion' ); ?></label><br />
148
149
<input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('disableLink'); ?>" name="<?php echo $this->get_field_name('disableLink'); ?>"<?php checked( $disableLink, 'true' ); ?> />
150
<label for="<?php echo $this->get_field_id('disableLink'); ?>"><?php _e( 'Disable Parent Links' , 'dcjq-accordion' ); ?></label><br />
151
+
152
+ <input type="checkbox" value="true" class="checkbox" id="<?php echo $this->get_field_id('menuClose'); ?>" name="<?php echo $this->get_field_name('menuClose'); ?>"<?php checked( $menuClose, 'true' ); ?> />
153
+ <label for="<?php echo $this->get_field_id('menuClose'); ?>"><?php _e( 'Close Menu (hover only)' , 'dcjq-accordion' ); ?></label>
154
+ </p>
155
+ <p>
156
+ <label for="<?php echo $this->get_field_id('hoverDelay'); ?>"><?php _e('Hover Delay:', 'dcjq-accordion'); ?>
157
+ <select name="<?php echo $this->get_field_name('hoverDelay'); ?>" id="<?php echo $this->get_field_id('hoverDelay'); ?>" >
158
+ <option value='0' <?php selected( $hoverDelay, '0'); ?> >No Delay</option>
159
+ <option value='200' <?php selected( $hoverDelay, '200'); ?> >0.2 sec</option>
160
+ <option value='400' <?php selected( $hoverDelay, '400'); ?> >0.4 sec</option>
161
+ <option value='600' <?php selected( $hoverDelay, '600'); ?> >0.6 sec</option>
162
+ <option value='800' <?php selected( $hoverDelay, '800'); ?> >0.8 sec</option>
163
+ <option value='1000' <?php selected( $hoverDelay, '1000'); ?> >1.0 sec</option>
164
+ </select>
165
+ </label>
166
+ </p>
167
+ <p><label for="<?php echo $this->get_field_id('speed'); ?>"><?php _e('Animation Speed:', 'dcjq-accordion'); ?>
168
+ <select name="<?php echo $this->get_field_name('speed'); ?>" id="<?php echo $this->get_field_id('speed'); ?>" >
169
+ <option value='slow' <?php selected( $speed, 'slow'); ?> >Slow</option>
170
+ <option value='normal' <?php selected( $speed, 'normal'); ?> >Normal</option>
171
+ <option value='fast' <?php selected( $speed, 'fast'); ?> >Fast</option>
172
+ </select>
173
+ </label>
174
</p>
175
<p><label for="<?php echo $this->get_field_id('skin'); ?>"><?php _e('Skin:', 'dcjq-accordion'); ?> <?php
176
177
// http://www.codewalkers.com/c/a/File-Manipulation-Code/List-files-in-a-directory-no-subdirectories/
193
closedir($dh);
194
echo "</select>"; ?> </label><br />
195
</p>
196
<input type="hidden" id="<?php echo $this->get_field_id('classParent'); ?>" name="<?php echo $this->get_field_name('classParent'); ?>" value="dcjq-parent" />
197
<input type="hidden" id="<?php echo $this->get_field_id('classActive'); ?>" name="<?php echo $this->get_field_name('classActive'); ?>" value="active" />
198
<div class="widget-control-actions alignright">
206
function styles(){
207
208
if(!is_admin()){
209
+
210
$all_widgets = $this->get_settings();
211
212
foreach ($all_widgets as $key => $wpdcjqaccordion){
227
228
if(!is_admin()){
229
230
+ $all_widgets = $this->get_settings();
231
232
+ foreach ($all_widgets as $key => $wpdcjqaccordion){
233
234
+ $widget_id = $this->id_base . '-' . $key;
235
236
+ if(is_active_widget(false, $widget_id, $this->id_base)){
237
238
+ $autoClose = $wpdcjqaccordion['autoClose'];
239
+ if($autoClose == ''){$autoClose = 'false';};
240
+
241
+ $saveState = $wpdcjqaccordion['saveState'];
242
+ if($saveState == ''){$saveState = 'false';};
243
244
+ $disableLink = $wpdcjqaccordion['disableLink'];
245
+ if($disableLink == ''){$disableLink = 'false';};
246
247
+ $menuClose = $wpdcjqaccordion['menuClose'];
248
+ if($menuClose == ''){$menuClose = 'false';};
249
+
250
+ $hoverDelay = $wpdcjqaccordion['hoverDelay'];
251
+ if($hoverDelay == ''){$hoverDelay = 600;};
252
253
?>
254
<script type="text/javascript">
256
jQuery('#<?php echo $widget_id.'-item'; ?> .menu').dcAccordion({
257
classParent: '<?php echo $wpdcjqaccordion['classParent']; ?>',
258
classActive: '<?php echo $wpdcjqaccordion['classActive']; ?>',
259
+ eventType: '<?php echo $wpdcjqaccordion['event']; ?>',
260
+ hoverDelay: <?php echo $hoverDelay; ?>,
261
+ menuClose: <?php echo $menuClose; ?>,
262
autoClose: <?php echo $autoClose; ?>,
263
saveState: <?php echo $saveState; ?>,
264
disableLink: <?php echo $disableLink; ?>,
268
</script>
269
270
<?php
271
}
272
}
273
}
js/jquery.dcjqaccordion.2.0.js ADDED
@@ -0,0 +1,205 @@
1
+ /*
2
+ * DC jQuery Accordion - jQuery accordion menu widget
3
+ * Copyright (c) 2011 Design Chemical
4
+ *
5
+ * Dual licensed under the MIT and GPL licenses:
6
+ * http://www.opensource.org/licenses/mit-license.php
7
+ * http://www.gnu.org/licenses/gpl.html
8
+ *
9
+ */
10
+ (function($){
11
+
12
+ //define the new for the plugin ans how to call it
13
+
14
+ $.fn.dcAccordion = function(options) {
15
+ //set default options
16
+ var defaults = {
17
+ classParent : 'dcjq-parent',
18
+ classActive : 'active',
19
+ eventType : 'click',
20
+ hoverDelay : 300,
21
+ menuClose : true,
22
+ autoClose : true,
23
+ speed : 'slow',
24
+ saveState : true,
25
+ disableLink : true
26
+ };
27
+
28
+ //call in the default otions
29
+ var options = $.extend(defaults, options);
30
+ var $dcAccordionItem = this;
31
+
32
+ //act upon the element that is passed into the design
33
+ return $dcAccordionItem.each(function(options){
34
+
35
+ setUpAccordion();
36
+
37
+ if(defaults.saveState == true){
38
+ cookieId = $(this).parent().attr('id');
39
+ checkCookie();
40
+ }
41
+ resetAccordion();
42
+
43
+ if(defaults.eventType == 'hover'){
44
+
45
+ var config = {
46
+ sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
47
+ interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
48
+ over: linkOver, // function = onMouseOver callback (REQUIRED)
49
+ timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
50
+ out: linkOut // function = onMouseOut callback (REQUIRED)
51
+ };
52
+ $('li a',$dcAccordionItem).hoverIntent(config);
53
+
54
+ var configMenu = {
55
+ sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
56
+ interval: 1000, // number = milliseconds for onMouseOver polling interval
57
+ over: menuOver, // function = onMouseOver callback (REQUIRED)
58
+ timeout: 1000, // number = milliseconds delay before onMouseOut
59
+ out: menuOut // function = onMouseOut callback (REQUIRED)
60
+ };
61
+ $($dcAccordionItem).hoverIntent(configMenu);
62
+
63
+ // Disable parent links
64
+ if(defaults.disableLink == true){
65
+ $('li a',$dcAccordionItem).click(function(e){
66
+ if($(this).next('ul').length >0){
67
+ e.preventDefault();
68
+ }
69
+ });
70
+ }
71
+
72
+ } else {
73
+
74
+ $('li a',$dcAccordionItem).click(function(e){
75
+
76
+ $activeLi = $(this).parent('li');
77
+ $parentsLi = $activeLi.parents('li');
78
+ $parentsUl = $activeLi.parents('ul');
79
+
80
+ // Prevent browsing to link if has child links
81
+ if(defaults.disableLink == true){
82
+ if($(this).next('ul').length >0){
83
+ e.preventDefault();
84
+ }
85
+ }
86
+
87
+ // Auto close sibling menus
88
+ if(defaults.autoClose == true){
89
+ autoCloseAccordion($parentsLi, $parentsUl);
90
+ }
91
+
92
+ if ($('> ul',$activeLi).is(':visible')){
93
+ $('ul',$activeLi).slideUp(defaults.speed);
94
+ $('a',$activeLi).removeClass(defaults.classActive);
95
+ } else {
96
+ $(this).next().slideToggle(defaults.speed);
97
+ $('> a',$activeLi).addClass(defaults.classActive);
98
+ }
99
+
100
+ // Write cookie if save state is on
101
+ if(defaults.saveState == true){
102
+ createCookie();
103
+ }
104
+ });
105
+ }
106
+ // Set up accordion
107
+ function setUpAccordion(){
108
+ $arrow = '<span class="dcjq-icon"></span>';
109
+ $('> ul',$dcAccordionItem).show();
110
+ $('li',$dcAccordionItem).each(function(){
111
+ var classParentLi = defaults.classParent+'-li';
112
+ if($('> ul',this).length > 0){
113
+ $(this).addClass(classParentLi);
114
+ $('> a',this).addClass(defaults.classParent).append($arrow);
115
+ }
116
+ });
117
+ $('> ul',$dcAccordionItem).hide();
118
+ }
119
+ });
120
+
121
+ function linkOver(){
122
+
123
+ $activeLi = $(this).parent('li');
124
+ $parentsLi = $activeLi.parents('li');
125
+ $parentsUl = $activeLi.parents('ul');
126
+
127
+ // Auto close sibling menus
128
+ if(defaults.autoClose == true){
129
+ autoCloseAccordion($parentsLi, $parentsUl);
130
+ }
131
+
132
+ if ($('> ul',$activeLi).is(':visible')){
133
+ $('ul',$activeLi).slideUp(defaults.speed);
134
+ $('a',$activeLi).removeClass(defaults.classActive);
135
+ } else {
136
+ $(this).next().slideToggle(defaults.speed);
137
+ $('> a',$activeLi).addClass(defaults.classActive);
138
+ }
139
+
140
+ // Write cookie if save state is on
141
+ if(defaults.saveState == true){
142
+ createCookie();
143
+ }
144
+
145
+ }
146
+
147
+ function linkOut(){
148
+ }
149
+
150
+ function menuOver(){
151
+ }
152
+
153
+ function menuOut(){
154
+ if(defaults.menuClose == true){
155
+ $('ul',$dcAccordionItem).slideUp(defaults.speed);
156
+ // Reset active links
157
+ $('a',$dcAccordionItem).removeClass(defaults.classActive);
158
+ createCookie();
159
+ }
160
+ }
161
+
162
+ // Auto-Close Open Menu Items
163
+ function autoCloseAccordion($parentsLi, $parentsUl){
164
+ $('ul',$dcAccordionItem).not($parentsUl).slideUp(defaults.speed);
165
+ // Reset active links
166
+ $('a',$dcAccordionItem).removeClass(defaults.classActive);
167
+ $('> a',$parentsLi).addClass(defaults.classActive);
168
+ }
169
+
170
+ // Retrieve cookie value and set active items
171
+ function checkCookie(){
172
+ var cookieVal = $.cookie(cookieId);
173
+ if(cookieVal != null){
174
+ // create array from cookie string
175
+ var activeArray = cookieVal.split(',');
176
+ $.each(activeArray, function(index,value){
177
+ var $cookieLi = $('li:eq('+value+')',$dcAccordionItem);
178
+ $('> a',$cookieLi).addClass(defaults.classActive);
179
+ var $parentsLi = $cookieLi.parents('li');
180
+ $('> a',$parentsLi).addClass(defaults.classActive);
181
+ });
182
+ }
183
+ }
184
+
185
+ // Reset accordion using active links
186
+ function resetAccordion(){
187
+ $('ul',$dcAccordionItem).hide();
188
+ $allActiveLi = $('a.'+defaults.classActive,$dcAccordionItem);
189
+ $allActiveLi.next().show();
190
+ }
191
+
192
+ // Write cookie
193
+ function createCookie(){
194
+ var activeIndex = [];
195
+ // Create array of active items index value
196
+ $('li a.active',$dcAccordionItem).each(function(i){
197
+ var $arrayItem = $(this).parent('li');
198
+ var itemIndex = $('li',$dcAccordionItem).index($arrayItem);
199
+ activeIndex.push(itemIndex);
200
+ });
201
+ // Store in cookie
202
+ $.cookie(cookieId, activeIndex, { path: '/' });
203
+ }
204
+ };
205
+ })(jQuery);
js/jquery.dcjqaccordion.js DELETED
@@ -1,122 +0,0 @@
1
- /*
2
- * DC jQuery Accordion - jQuery accordion menu widget
3
- * Copyright (c) 2011 Design Chemical
4
- *
5
- * Dual licensed under the MIT and GPL licenses:
6
- * http://www.opensource.org/licenses/mit-license.php
7
- * http://www.gnu.org/licenses/gpl.html
8
- *
9
- */
10
- (function($){
11
-
12
- //define the function for the plugin and how to call it
13
-
14
- $.fn.dcAccordion = function(options) {
15
- //set default options
16
- var defaults = {
17
- classParent : 'dcjq-parent',
18
- classActive : 'active',
19
- eventType : 'click',
20
- autoArrow : true,
21
- canClose : true,
22
- autoClose : true,
23
- speed : 'slow',
24
- saveState : true,
25
- activate : 'click',
26
- disableLink : true
27
- };
28
-
29
- //call in the default otions
30
- var options = $.extend(defaults, options);
31
- var $dcAccordionItem = this;
32
-
33
- //act upon the element that is passed into the design
34
- return $dcAccordionItem.each(function(options) {
35
-
36
- setUpAccordion();
37
-
38
- if(defaults.saveState == true){
39
- var cookieId = $(this).parent().attr('id');
40
- checkCookie();
41
- }
42
- resetAccordion();
43
-
44
- $('li a',$dcAccordionItem).click(function(e){
45
-
46
- var $activeLi = $(this).parent('li');
47
- var $parentsLi = $activeLi.parents('li');
48
- var $parentsUl = $activeLi.parents('ul');
49
-
50
- // Prevent browsing to link if has child links
51
- if(defaults.disableLink == true){
52
- if($(this).next('ul').length >0){
53
- e.preventDefault();
54
- }
55
- }
56
-
57
- // Auto close sibling menus
58
- if(defaults.autoClose == true){
59
- $('ul',$dcAccordionItem).not($parentsUl).slideUp(defaults.speed);
60
- // Reset active links
61
- $('a',$dcAccordionItem).removeClass(defaults.classActive);
62
- $('> a',$parentsLi).addClass(defaults.classActive);
63
- }
64
-
65
- if ($('> ul',$activeLi).is(':visible')){
66
- $('ul',$activeLi).slideUp(defaults.speed);
67
- $('a',$activeLi).removeClass(defaults.classActive);
68
- } else {
69
- $(this).next().slideToggle(defaults.speed);
70
- $('> a',$activeLi).addClass(defaults.classActive);
71
- }
72
-
73
- // Write cookie if save state is on
74
- if(defaults.saveState == true){
75
- var activeIndex = [];
76
- // Create array of active items index value
77
- $('li a.active',$dcAccordionItem).each(function(i){
78
- var $arrayItem = $(this).parent('li');
79
- var itemIndex = $('li',$dcAccordionItem).index($arrayItem);
80
- activeIndex.push(itemIndex);
81
- });
82
- // Store in cookie
83
- $.cookie(cookieId, activeIndex, { path: '/' });
84
- }
85
- });
86
-
87
- // Set up accordion
88
- function setUpAccordion(){
89
- $arrow = '<span class="dcjq-icon"></span>';
90
- $('li',$dcAccordionItem).each(function(){
91
- var classParentLi = defaults.classParent+'-li';
92
- if($('> ul',this).length > 0){
93
- $(this).addClass(classParentLi);
94
- $('> a',this).addClass(defaults.classParent).append($arrow);
95
- }
96
- });
97
- }
98
-
99
- // Retrieve cookie value and set active items
100
- function checkCookie(){
101
- var cookieVal = $.cookie(cookieId);
102
- if(cookieVal != null){
103
- // create array from cookie string
104
- var activeArray = cookieVal.split(',');
105
- $.each(activeArray, function(index,value){
106
- var $cookieLi = $('li:eq('+value+')',$dcAccordionItem);
107
- $('> a',$cookieLi).addClass(defaults.classActive);
108
- var $parentsLi = $cookieLi.parents('li');
109
- $('> a',$parentsLi).addClass(defaults.classActive);
110
- });
111
- }
112
- }
113
-
114
- // Reset accordion using active links
115
- function resetAccordion(){
116
- $('ul',$dcAccordionItem).hide();
117
- $allActiveLi = $('a.'+defaults.classActive,$dcAccordionItem);
118
- $allActiveLi.next().show();
119
- }
120
- });
121
- };
122
- })(jQuery);
js/jquery.hoverIntent.minified.js ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
3
+ * <http://cherne.net/brian/resources/jquery.hoverIntent.html>
4
+ *
5
+ * @param f onMouseOver function || An object with configuration options
6
+ * @param g onMouseOut function || Nothing (use configuration options object)
7
+ * @author Brian Cherne <brian@cherne.net>
8
+ */
9
+ (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
readme.txt CHANGED
@@ -4,23 +4,28 @@ Donate link: http://www.designchemical.com
4
Tags: jquery, dropdown, menu, vertical accordion, animated, css, navigation, widget
5
Requires at least: 3.0
6
Tested up to: 3.1
7
- Stable tag: 1.1
8
9
Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery.
10
11
== Description ==
12
13
- Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery. Features include - handles multiple levels & saved state using cookies. Uses the jquery cookie plugin by [Klaus Hartl](http://www.stilbuero.de).
14
15
= Menu Options =
16
17
The widget has several parameters that can be configured to help cutomise the vertical accordion menu:
18
19
* Auto-close open menus - If checked this will allow only one menu item to be expanded at any time. Clicking on a new menu item will automatically close the previous one.
20
* Save menu state (uses cookies) - Selecting this will allow the menu to remember its open/close state when browsing to a new page.
21
* Disable parent links - If selected, any menu items that have child elements will have their links disabled and will only open/close their relevant sub-menus. Do not select this if you want the user to still be able to browse to that item's page.
22
- * Skin - Several sample skins are available to give examples of css that can be used to style your accordion menu
23
* Animation Speed - The speed at which the menu will open/close
24
25
[__See demo__](http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/)
26
@@ -48,6 +53,11 @@ Another likely cause is due to other non-functioning plugins, which may have err
48
49
== Changelog ==
50
51
= 1.1 =
52
* Fixed : Duplicate ID with themes adding ID to widget container
53
* Fixed : Set cookie path
4
Tags: jquery, dropdown, menu, vertical accordion, animated, css, navigation, widget
5
Requires at least: 3.0
6
Tested up to: 3.1
7
+ Stable tag: 2.0
8
9
Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery.
10
11
== Description ==
12
13
+ Creates a widget, which allows you to create vertical accordion menus from any Wordpress custom menu using jQuery. Features include - handles multiple levels, saved state using cookies and option of selecting "click" or "hover" events for triggering the menu. Uses the jquery cookie plugin by [Klaus Hartl](http://www.stilbuero.de).
14
15
= Menu Options =
16
17
The widget has several parameters that can be configured to help cutomise the vertical accordion menu:
18
19
+ * Click/Hover - Selects the event type that will trigger the menu to open/close
20
* Auto-close open menus - If checked this will allow only one menu item to be expanded at any time. Clicking on a new menu item will automatically close the previous one.
21
* Save menu state (uses cookies) - Selecting this will allow the menu to remember its open/close state when browsing to a new page.
22
* Disable parent links - If selected, any menu items that have child elements will have their links disabled and will only open/close their relevant sub-menus. Do not select this if you want the user to still be able to browse to that item's page.
23
+ * Close menu (hover only) - If checked the menu will automatically fully close after 1 second when the mouse moves off the menu - only available if event type is "hover"
24
+ * Hover delay - This setting adds a delay to the hover event to help prevent the menu opening/closing accidentally. A higher number means the cursor must stop moving for longer before the menu action will trigger
25
* Animation Speed - The speed at which the menu will open/close
26
+ * Skin - Several sample skins are available to give examples of css that can be used to style your accordion menu
27
+
28
+ Note: care should be taken when selecting the hover event as this may impact useability - adding a hover delay and reducing the animation speed may help reduce problems with useability
29
30
[__See demo__](http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/)
31
53
54
== Changelog ==
55
56
+ = 2.0 =
57
+ * Added : Ability to select either hover or click to activate menu
58
+ * Added : Hover delay setting for hover event
59
+ * Added : Close menu option for hover event
60
+
61
= 1.1 =
62
* Fixed : Duplicate ID with themes adding ID to widget container
63
* Fixed : Set cookie path
screenshot-1.png CHANGED
Binary file
skins/clean.css CHANGED
@@ -2,7 +2,7 @@
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 15px; background: #fff url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase; text-decoration:none; display: block; color: #222; border-bottom: 1px solid #cfcfcf;}
4
#dc_jqaccordion_widget-%ID%-item ul ul a {padding: 10px 10px 10px 25px; background: #fff; font-weight: normal; text-transform: capitalize;}
5
- #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent {padding: 10px 15px; background: #fff url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase;}
6
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #fff url(skins/images/bg_clean_on.png) repeat-x top center;}
7
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
8
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #ececec; color: #990000;}
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 15px; background: #fff url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase; text-decoration:none; display: block; color: #222; border-bottom: 1px solid #cfcfcf;}
4
#dc_jqaccordion_widget-%ID%-item ul ul a {padding: 10px 10px 10px 25px; background: #fff; font-weight: normal; text-transform: capitalize;}
5
+ #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent {padding: 10px 15px; background: #efefef url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase;}
6
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #fff url(skins/images/bg_clean_on.png) repeat-x top center;}
7
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
8
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #ececec; color: #990000;}
skins/graphite.css CHANGED
@@ -1,10 +1,10 @@
1
#dc_jqaccordion_widget-%ID%-item{font: bold 14px Arial, sans-serif; border-top: 1px solid #111; border-right: 1px solid #111; border-left: 1px solid #111;}
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
- #dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 50px; background: #000 url(skins/images/bg_black.png) repeat-x 0 -1px; text-decoration:none; display: block; color: #ddd; border-bottom: 1px solid #222; border-top: 1px solid #777; position: relative;}
4
#dc_jqaccordion_widget-%ID%-item ul ul a {background: #424549;}
5
- #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #000 url(skins/images/bg_black.png) repeat-x 0 -1px;}
6
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
7
- #dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 0; left: 12px; width: 34px; height: 34px; background: url(skins/images/arrow_black_right.png) no-repeat 0 center;}
8
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arrow_black_down.png) no-repeat 0 center;}
9
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #232323; color: #fff;}
10
#dc_jqaccordion_widget-%ID%-item ul a:active{}
1
#dc_jqaccordion_widget-%ID%-item{font: bold 14px Arial, sans-serif; border-top: 1px solid #111; border-right: 1px solid #111; border-left: 1px solid #111;}
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
+ #dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 50px; background: #0C0C0C url(skins/images/bg_black.png) repeat-x 0 -1px; text-decoration:none; display: block; color: #ddd; border-bottom: 1px solid #222; border-top: 1px solid #777; position: relative;}
4
#dc_jqaccordion_widget-%ID%-item ul ul a {background: #424549;}
5
+ #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #0C0C0C url(skins/images/bg_black.png) repeat-x 0 -1px;}
6
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
7
+ #dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; background: url(skins/images/arrow_black_right.png) no-repeat 0 center;}
8
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arrow_black_down.png) no-repeat 0 center;}
9
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #232323; color: #fff;}
10
#dc_jqaccordion_widget-%ID%-item ul a:active{}
skins/grey.css CHANGED
@@ -1,9 +1,9 @@
1
#dc_jqaccordion_widget-%ID%-item{font: bold 14px Arial, sans-serif; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 50px; background: #ececec; text-decoration:none; display: block; color: #333; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; position: relative; text-shadow: 1px 1px 1px #fff;}
4
- #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #ececec url(skins/images/bg_grey.png) repeat-x 0 -1px;}
5
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
6
- #dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 0; left: 12px; width: 34px; height: 34px; background: url(skins/images/arrow_grey_right.png) no-repeat 0 center;}
7
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arrow_grey_down.png) no-repeat 0 center;}
8
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #fff; color: #990000;}
9
#dc_jqaccordion_widget-%ID%-item ul a:active{}
1
#dc_jqaccordion_widget-%ID%-item{font: bold 14px Arial, sans-serif; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
2
#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none;}
3
#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 50px; background: #ececec; text-decoration:none; display: block; color: #333; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; position: relative; text-shadow: 1px 1px 1px #fff;}
4
+ #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #D7D4D4 url(skins/images/bg_grey.png) repeat-x 0 -1px;}
5
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {}
6
+ #dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; background: url(skins/images/arrow_grey_right.png) no-repeat 0 center;}
7
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arrow_grey_down.png) no-repeat 0 center;}
8
#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #fff; color: #990000;}
9
#dc_jqaccordion_widget-%ID%-item ul a:active{}