Add mobile styling

resources/assets/js/functions/menu.js

@@ -19,23 +19,52 @@
       var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
       var pos = $menuItem.offset();
       submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
-      submenu.on( "mouseleave", function(){
+      submenu.on( "mouseleave", function() {
         $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
         $menuItem.removeClass('hover');
       } );
       $('body').append(submenu);
       submenu.children('ul.submenu').slideDown();
 
-      submenu.find('ul.submenu li.has_submenu').click(function(){
-        $(this).find('ul.submenu').slideToggle();
-        $(this).toggleClass('opened');
-      });
+      submenu.find('ul.submenu').subMenu({});
       openPlayerInNewScreen();
     });
   };
 
+  /**
+   * @param {object} _options
+   */
+  $.fn.subMenu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $container = $(this);
+
+    $container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) {
+      e.preventDefault();
+      var $li = $(this).closest('li');
+      $li.children('ul.submenu').slideToggle();
+      $li.toggleClass('opened');
+    });
+  };
+
 }(jQuery));
 
 $(function () {
-  $('.menu, .mobile-menu').menu({});
+  $('.menu').menu({});
+  $('.mobile-menu').subMenu({});
+  $('.mobile_menu_button a').click(function() {
+    $('.mobile_menu_container').show();
+  });
+  $('.mobile_close_menu_button a').click(function() {
+    $('.mobile_menu_container').hide();
+  });
+  $('.mobile_menu_container').click(function(e){
+    var $target = $(e.target);
+    if(!$target.closest('#mobile_menu_nav').length &&
+      $('.mobile_menu_container').is(":visible")) {
+      $('.mobile_menu_container').hide();
+    }
+  });
 });