Reszponziv menü Javascript

Reszponziv menü Javascript
2018-03-05T20:21:31+01:00
2018-03-06T07:12:44+01:00
2022-08-18T20:30:35+02:00
Vatap
Sziasztok!

Van egy Javascriptes reszponziv menü.
A gondom az, hogy amikor mobilnézetben rámegyek valamelyik menüpontra nem csukja össze a menüt, hanem nyitva hagyja. Hogyan tudnám megoldani, hogy összecsukja?

(function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>'); $(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); } else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenu.find('ul').show(); } if ($(window).width() <= 768) { cssmenu.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $("#cssmenu").menumaker({ title: "Menu", format: "multitoggle" }); }); })(jQuery);
Mutasd a teljes hozzászólást!
Azért kicsit több infó jó lenne a JQ-s menüdről a konkrétabb segítség érdekében...
Esetleg, hogy hol találtad és az ottani example jól működik-e, ha már responsíve "Free jQuery Drop Down Menu Plugins"...
Megj: Lehet, hogy van a linken több is... A kereső kifejezés: "multiple menu from jquery"

************ Kiegészítés ***************
1. Ha megnézed a 2. link forráskodját (jobb klikk oldal forrása) láthatod mennyivel átláthatóbb és jobban látszik miről is van szó =>

$(document).ready(function() { $('.navbar a.dropdown-toggle').on('click', function(e) { var elmnt = $(this).parent().parent(); if (!elmnt.hasClass('nav')) { var li = $(this).parent(); var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2; var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10; if(!li.hasClass('open')) li.addClass('open') else li.removeClass('open'); $(this).next().css('top', heightParent + 'px'); $(this).next().css('left', widthParent + 'px'); return false; } }); });
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd