I am having some troubles with a mobile menu. The code I will post below is supposed to work for both mouse and touchscreen. Using a mouse, the typical hover behavior is expected (and works). Using a touchscreen, clicking a top level menu item that has sub-menu items (such as Study or Tools) should show the sub-menu. I have that part working except for when touching a menu item like "Study" a second time, the sub-menu does not close. If you want to visit it live, it is at dev.thediscipleshipplace.org. The menu is dynamically made, so that might be the best way for you to see the html.
Here is the jQuery (site is using joomla, so jQuery instead of $):
/***********************************************************
* This is for the touch screen functionality. It will allow
* for double tab to show/hide the menu appropriately
***********************************************************/
jQuery(document).ready(function(){
var menuActive = false,
touched = false,
clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
$nav = jQuery('#menu > ul.nav'); //Get a commonly used element
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Name: removeActive function
*
* Purpose: To remove the class which shows the mobile
* menu, and then perform the actions of a
* function that is passed.
*
* Entry: When a li.parent > a element is clicked on AND
* the menu is already active
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function removeActive(callback){
//Remove the MenuActive class from the DOM element(s)
$nav.find('.MenuActive').removeClass('MenuActive');
//Perform the function that was passed.
callback();
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Name: newActive function
*
* Purpose: To add a class to a UL that will "show" the
* next level of menu items.
*
* Entry: When the MouseEnter event handler is fired,
* or the touchstart/click event handler is fired
* and the menu is not already active.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function newActive($this,menu){
$this.children('ul.nav-child').addClass(' MenuActive').queue(function(){
if(menu){
menuActive = true;
touched = false;
} else {
touched = true;
}
}).dequeue();
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Name: Mouseenter/Mouseleave Event Handler
*
* Purpose: On hover of the first level of LI menu items,
* add a class to show the sub menu items via
* calling a "newActive" function. Also, when the
* mouse leaves the menu, remove the class in
* order to close the menu.
*
* Entry: When a mouse pointer hovers over or leaves
* the first level of the menu.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$nav.on('mouseenter', '> li.parent', function(){
newActive(jQuery(this),true);
}).on('mouseleave', '> li.parent', function(){
removeActive(function(){
menuActive = false;
touched = false;
});
});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Name: Click/Touchstart Event Handler
*
* Purpose: On click or touchstart, prevent the default
* action and decide if the action should be a
* trueclick or not.
*
* Entry: When a li.parent > a element is clicked.
*
* Parameters: clickHandler--This is eather 'click' or
* 'touchstart', as defined at the beginning
* of the event handler.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$nav.on(clickHandler, 'li.parent > a', function(e){
e.preventDefault();
if(menuActive){
jQuery(this).trigger('trueClick',e.target.href);
}
else {
menuActive = true;
}
});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Name: TrueClick Event Handler
*
* Purpose: To remove the class which shows the mobile
* menu, and then redirect to the link that
* the user has clicked on.
*
* Entry: When a li.parent > a element is clicked on AND
* the menu is already active
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$nav.on('trueClick', function(e,$target){
jQuery(this).parents('.nav').trigger('mouseleave');
window.location.href = $target;
});
jQuery('html').on('touchstart',function(e){
if(menuActive){
$nav.trigger('mouseleave');
}
});
});
Aucun commentaire:
Enregistrer un commentaire