Flyout menus not accessible on any mobile browsers (not always the case on iOS)
184 | 185 | 209 | 210 |Flyout menus accessible on all mobile browsers
212 | 213 |
214 |
215 | $('#tmh1').touchMenuHover({
216 | 'forceiOS': true
217 | });
218 |
219 |
220 |
221 |
245 |
246 | Flyout menus not accessible on any mobile browsers
248 | 249 | 277 | 278 |Flyout menus accessible on all mobile browsers
280 | 281 |
282 |
283 | $('#tmh2').touchMenuHover({
284 | 'childTag': 'div'
285 | });
286 |
287 |
288 |
289 |
317 |
318 |
319 |
332 |
342 |
343 |
--------------------------------------------------------------------------------
/jquery.izilla.touchMenuHover.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Izilla touchMenuHover jQuery plugin v1.7
3 | * Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7, WP8, BlackBerry, Bada, WebOS, 3DS & WiiU
4 | *
5 | * Copyright (c) 2014 Izilla Partners Pty Ltd
6 | *
7 | * http://izilla.com.au
8 | *
9 | * Licensed under the MIT license
10 | */
11 | ;(function($) {
12 | $.fn.touchMenuHover = function(options) {
13 | var settings = $.extend({
14 | childTag: 'ul',
15 | closeElement: '',
16 | forceiOS: false,
17 | openClass: 'tmh-open'
18 | }, options);
19 |
20 | var $a = $(this).find('a'),
21 | devices = '3ds|android|bada|bb10|hpwos|iemobile|kindle fire|opera mini|opera mobi|opera tablet|rim|silk|wiiu',
22 | devicesRX,
23 | closeStr = 'html',
24 | $close;
25 |
26 | if (settings.childTag.toString().toLowerCase() !== 'ul' || settings.forceiOS)
27 | devices += '|ipad|ipod|iphone';
28 |
29 | devicesRX = new RegExp(devices, 'gi');
30 |
31 | if ($a.length > 0 && devicesRX.test(navigator.userAgent)) {
32 | $a.each(function() {
33 | var $this = $(this),
34 | $parent = $this.parent('li'),
35 | $siblings = $parent.siblings().find('a');
36 |
37 | if ($this.next(settings.childTag).length > 0)
38 | $parent.attr('aria-haspopup', true);
39 |
40 | $this.click(function(e) {
41 | var $this = $(this);
42 | e.stopPropagation();
43 | $siblings.removeClass(settings.openClass);
44 |
45 | if (!$this.hasClass(settings.openClass) && $this.nextAll(settings.childTag).length > 0) {
46 | e.preventDefault();
47 | $this.addClass(settings.openClass);
48 | }
49 | });
50 | });
51 |
52 | if (settings.closeElement.length > 1)
53 | closeStr += ',' + settings.closeElement;
54 |
55 | $close = $(closeStr);
56 |
57 | if ('ontouchstart' in window)
58 | $close.css('cursor', 'pointer');
59 |
60 | $close.click(function() {
61 | $a.removeClass(settings.openClass);
62 | });
63 | }
64 |
65 | return this;
66 | };
67 | })(jQuery);
--------------------------------------------------------------------------------
/jquery.izilla.touchMenuHover.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Izilla touchMenuHover jQuery plugin v1.7
3 | * Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7, WP8, BlackBerry, Bada, WebOS, 3DS & WiiU
4 | *
5 | * Copyright (c) 2014 Izilla Partners Pty Ltd
6 | *
7 | * http://izilla.com.au
8 | *
9 | * Licensed under the MIT license
10 | */
11 | ;(function(a){a.fn.touchMenuHover=function(d){var e=a.extend({childTag:"ul",closeElement:"",forceiOS:false,openClass:"tmh-open"},d);var g=a(this).find("a"),c="3ds|android|bada|bb10|hpwos|iemobile|kindle fire|opera mini|opera mobi|opera tablet|rim|silk|wiiu",h,b="html",f;if(e.childTag.toString().toLowerCase()!=="ul"||e.forceiOS){c+="|ipad|ipod|iphone"}h=new RegExp(c,"gi");if(g.length>0&&h.test(navigator.userAgent)){g.each(function(){var k=a(this),j=k.parent("li"),i=j.siblings().find("a");if(k.next(e.childTag).length>0){j.attr("aria-haspopup",true)}k.click(function(m){var l=a(this);m.stopPropagation();i.removeClass(e.openClass);if(!l.hasClass(e.openClass)&&l.nextAll(e.childTag).length>0){m.preventDefault();l.addClass(e.openClass)}})});if(e.closeElement.length>1){b+=","+e.closeElement}f=a(b);if("ontouchstart" in window){f.css("cursor","pointer")}f.click(function(){g.removeClass(e.openClass)})}return this}})(jQuery);
--------------------------------------------------------------------------------