|
|||
JS für Mobile Menü Schließt einfach
Hallo,
Ich habe diesen Post schon im CSS Post geschrieben, da wusste ich aber noch nicht das dieses Problem mit großer Sicherheit von der JS file vom Menü ausgeht. Home Auf der Desktop Ansicht und im Chrome Mobile Emulator Funktioniert das Menü wunderbar... Wenn ich jedoch mit meinem Note 2 das Menü öffne und die Page ein klein wenig runterscrolle, schließt sich nach dem Scrollen das Menü einfach... Hat jemand eine Idee woran das liegen kann? Ich habe halt 0 Ahnung von JavaScript... Kann nur HTML und CSS Wenn das Fixen mehr arbeit ist, bezahle ich auch gerne dafür. Das hier ist die JS File: Code:
(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(){ $(document).ready(function() { $("#cssmenu").menumaker({ title: "Menü", format: "multitoggle" }); $("#cssmenu").prepend("<div id='menu-line'></div>"); var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth; $("#cssmenu > ul > li").each(function() { if ($(this).hasClass('active')) { activeElement = $(this); foundActive = true; } }); if (foundActive === false) { activeElement = $("#cssmenu > ul > li").first(); } defaultWidth = lineWidth = activeElement.width(); defaultPosition = linePosition = activeElement.position().left; menuLine.css("width", lineWidth); menuLine.css("left", linePosition); $("#cssmenu > ul > li").hover(function() { activeElement = $(this); lineWidth = activeElement.width(); linePosition = activeElement.position().left; menuLine.css("width", lineWidth); menuLine.css("left", linePosition); }, function() { menuLine.css("left", defaultPosition); menuLine.css("width", defaultWidth); }); }); }); })(jQuery); |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verhalten fixed Menü beim Verkleinern des Fensters | Yumyoko | CSS | 1 | 07.10.2011 17:54 |
Problem mit dynamischem CSS Menü | riseup | CSS | 6 | 15.09.2011 09:57 |
CSS Menü auf Internet Explorer abstimmen | raphi156 | CSS | 33 | 22.12.2010 11:10 |
Unterforen für mobile Geräte? | Robin | Fragen, Konstruktive Kritik, Lob / Bekanntmachungen | 15 | 19.11.2007 17:34 |
CSS-basiertes Menü fehlerhaft im IE7 | otomo | CSS | 0 | 16.10.2007 17:56 |