ullCms - javascript menu hide/unhide
Javascript Submenu Touch compatible
layout.php
-
<?php echo ullCmsHelper::renderMenuComplete('main-nebenmenue', 2) // render 2 levels ?> ... $(document).ready(function() { /* js menu */ $('ul#ull_menu_nebenmenue ul').hide(); $('ul#ull_menu_nebenmenue li').hover( function () { $(this).find('ul:contains(li)').show(); }, function () { $(this).find('ul:contains(li)').hide(); } ); /* Fix a single submenu for touch devices */ // add class to submenu. TODO: add for all menu entries $('.ull_menu_entry_xxx').addClass('tapHover'); /* * Add this code and then set class "tapHover" to elements which you would * like to work this way. First time you tap an element it will gain pseudoclass * ":hover" and class "tapped". Click event will be prevented. Second time * you tap the same element - click event will be fired. * https://stackoverflow.com/a/39367004/10944323 */ if('ontouchstart' in window) { // this will make touch event add hover pseudoclass document.addEventListener('touchstart', function(e) {}, true); // modify click event document.addEventListener('click', function(e) { // get .tapHover element under cursor var el = jQuery(e.target).hasClass('tapHover') ? jQuery(e.target) : jQuery(e.target).closest('.tapHover'); if(!el.length) return; // remove tapped class from old ones jQuery('.tapHover.tapped').each(function() { if(this != el.get(0)) jQuery(this).removeClass('tapped'); }); if(!el.hasClass('tapped')) { // this is the first tap el.addClass('tapped'); e.preventDefault(); return false; } else { // second tap return true; } }, true); } });
old / submenu stays visible:
layout.php
2 levels are displayed at max
1 level is shown by default, the other one by click
<!-- Main menu --> <div id="main_menu"> <?php echo ullCmsHelper::renderMenuComplete('main-menu', 2, 1) ?> </div>