Skip to content

Commit

Permalink
Click functionality. Animations on closing submenus. Add support for …
Browse files Browse the repository at this point in the history 
…Android (thanks to @maartenmachiels for his help).
  • Loading branch information
@joeldbirch
joeldbirch committed Feb 13, 2013
1 parent b69a61c commit e8971be
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 73 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,9 @@

Please use the [existing Superfish documentation](http://users.tpg.com.au/j_birch/plugins/superfish/).

**Important note:** As of Superfish v1.5.1 if you wish to use hoverIntent you will need to use a [patched version that supports event delegation](https://github.com/joeldbirch/onHoverIntent).
**Important note:** As of Superfish v1.5.1 if you wish to use hoverIntent you will need to use a [patched version that supports event delegation](https://github.com/joeldbirch/onHoverIntent).

## Big new features in v1.5.2
- You can now require a click to open submenus, and click again to close them. Just set `useClick` option to `true` (is `false` by default).
- Support for animations when closing submenus. Added `animationOut` and `speedOut` options.
- Has always worked on iOS, but now supports Android and (possibly) other touch screens, too. Behaves like it does on iOS: first tap acts as hover and opens submenu, second follows link (unless using the new `useClick` option, in which case the second click closes the submenu). Keyboard and hover functionality works as normal. Thanks to [Maarten Machiels](https://github.com/maartenmachiels) for his valuable feedback on this.
112 changes: 57 additions & 55 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>A very basic Superfish menu example</title>
<title>Testing Superfish touch support</title>
<link rel="stylesheet" href="css/superfish.css" media="screen">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/hoverIntent.js"></script>
Expand All @@ -11,111 +11,113 @@

// initialise plugins
jQuery(function(){
jQuery('#example').superfish();
jQuery('#example').superfish({
//useClick: true
});
});

</script>
</head>
<body>
<ul class="sf-menu" id="example">
<li class="current">
<a href="#a">menu item</a>
<a href="followed.html">menu item 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
<a href="followed.html">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
<li class="current"><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item 2</a>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item 3</a>
<ul>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="followed.html">short</a></li>
<li><a href="followed.html">short</a></li>
<li><a href="followed.html">short</a></li>
<li><a href="followed.html">short</a></li>
<li><a href="followed.html">short</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
<li><a href="followed.html">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<a href="followed.html">menu item 4</a>
</li>
</ul>

Expand Down
69 changes: 53 additions & 16 deletions js/superfish.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

/*
* Superfish v1.5.1 - jQuery menu widget
* Superfish v1.5.2 - jQuery menu widget
* Copyright (c) 2013 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
Expand All @@ -16,21 +16,33 @@
c = sf.c,
$arrow = $('<span class="'+c.arrowClass+'"> &#187;</span>'),
over = function(e){
e.stopPropagation();
var $$ = $(this), menu = getMenu($$);
if (e.type === 'mouseenter' || e.type==='focusin'){
$$.children('a').data('follow',true);
}
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
out = function(e){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
var close = function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents('li.'+o.hoverClass).length<1){
o.onIdle.call(this);
over.call(o.$path);
o.onIdle.call();
$.proxy(over,o.$path,e)();
}
},o.delay);
};
if (e.type !== 'mouseleave' && e.type !== 'focusout'){
close();
} else {
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(close,o.delay);
}
if (e.type === 'mouseleave' || e.type === 'focusout'){
$$.children('a').data('follow',false);
}
},
getMenu = function($child){
if ($child.hasClass(c.menuClass)){
Expand All @@ -42,14 +54,31 @@
},
applyHandlers = function($menu){
var targets = 'li:has(ul)';
if ($.fn.hoverIntent && !sf.op.disableHI){
$menu.hoverIntent(over, out, targets);
} else {
$menu.on('mouseenter', targets, over);
$menu.on('mouseleave', targets, out);
if (!sf.op.useClick){
if ($.fn.hoverIntent && !sf.op.disableHI){
$menu.hoverIntent(over, out, targets);
} else {
$menu.on('mouseenter', targets, over);
$menu.on('mouseleave', targets, out);
}
}
$menu.on('focusin', targets, over);
$menu.on('focusout', targets, out);
$menu.on('click', 'a', clickHandler);
},
clickHandler = function(e){
var $a = $(this);
var $submenu = $a.next('ul');
var follow = $a.data('follow');

if ( $submenu.length && (sf.op.useClick || !follow) ){
e.preventDefault();
if ($submenu.is(':visible')){
$.proxy(out,$(this).parent(),e)();
} else {
$.proxy(over,$(this).parent(),e)();
}
}
},
addArrows = function($li,o){
if (o.autoArrows) {
Expand Down Expand Up @@ -97,9 +126,12 @@
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
animationOut: {opacity:'hide'},
speed : 'normal',
speedOut : 'fast',
autoArrows : true,
disableHI : false, // true disables hoverIntent detection
useClick : false,
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
Expand All @@ -111,17 +143,22 @@
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $('li.'+o.hoverClass,this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
var $ul = $('li.'+o.hoverClass,this).add(this).not(not)
.find('>ul').stop().animate(o.animationOut,o.speedOut,function(){
$ul = $(this);
$ul.css('visibility','hidden').parent().removeClass(o.hoverClass);
o.onHide.call($ul);
});
return this;
},
showSuperfishUl : function(){
var o = sf.op,
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ o.onShow.call($ul); });
$ul.stop().animate(o.animation,o.speed,function(){
o.onShow.call($ul);
});
return this;
}
});
Expand Down
2 changes: 1 addition & 1 deletion superfish.jquery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"menu",
"dropdown"
],
"version": "1.5.1",
"version": "1.5.2",
"author": {
"name": "Joel Birch"
},
Expand Down

0 comments on commit e8971be

Please sign in to comment.