• Edit
  • Delete

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>