Oprava mobilního menu v šabloně Sydney

Upraveno 16 prosince, 2023 08:19

Na určitých webových projektech velice rád využívám pro WordPress určenou šablonu Sydney. Jsou to např. a hlavně projekty, kde potřebuji tzv. sticky header menu. Tedy menu, které je dostupné po celé délce obsahu stránky (shora -> dolů). To je vhodné hlavně u one page webů, kde je drtivá většina obsahu webu soustředěná na hlavní stránku a odkazy v horním menu se obvykle řeší formou kotev. Zde potřebujete, aby při rolování webu dolů menu zmizelo a nepřekáželo, naopak při rolování nahoru aby se opět plynule zobrazilo. Tato šablona jej má v základu (např. šablona Astra a jí podobné pouze ve verzi PRO). U této šablony jsem ale narazil na nefunkční menu v mobilním zařízení. Dnes bych se tedy chtěl podívat na to, jak se dá oprava mobilního menu v šabloně Sydney provést pomocí Javascriptu.

Oprava mobilního menu v šabloně Sydney

Nefunkční menu v mobilním zařízení

Stejně tak, jako má tato šablona své přednosti, tak má bohužel i své problémy. Tím největším, které jsem zaznamenal je menu v mobilním zařízení. To má problémy hned dva. První problém je, že po kliknutí na odkaz v menu se toto automaticky neschová a zůstává otevřené. Problém druhý je, že v něm bohužel není zcela funkční zavírací křížek. Ten z mě neznámého důvodu menu sice zavře, ale zároveň funguje jak URL odkaz na doména/#. To ve konečném důsledku znamená to, že křížkem menu sice zavřete, ale po zavření Vás toto menu přesune ihned na začátek webu namísto toho, abyste zůstali na kotvě, na kterou Vás odkaz v menu přenesl. To je velmi problematické z hlediska funkčnosti na mobilním zařízení a v tomto kontextu zároveň zcela nepoužitelné.

Jak problém odstranit

Problém má celkem jednoduché řešení a to v podobě Javascriptu, který odstraní naráz oba problémy jako jedno řešení. Jak? Konkrétně tak, že naučí mobilní menu, aby se po kliknutí na odkaz samo zavřelo. Tím se vyřeší jak problém se zavíráním menu, tak také i problém se zavíracím křížem v menu, který díky tomu není nutné použít. Tím pádem Vás kříž, který se přestane používat nebude vracet na začátek webu.

Zde je konkrétní příklad použitého Javascriptu:

				
					(function($){

    if( matchMedia('only screen and (max-width: 1024px)') ) {
        $( document ).on('click', function(e){
            if( !$( e.target ).closest('.menu-toggle').length ) {
                $('.sydney-offcanvas-menu').removeClass('toggled');
            }
        });
    }

})(jQuery);
				
			

Jak Javascript vložit do webu?

Existuje skvělý plugin, který Javascript do šablony vloží za Vás. Do svého WordPressu si tedy pro tento účel můžete nainstalovat plugin TC Custom JavaScript.

Tento plugin se poté integruje do menu vzhledu jako samostatná položka a velmi jednoduše Vám umožní daný Javascript v šabloně používat bez větších znalostí programování. Konkrétně výše uvedený kód Vám např. opraví nefunkční menu šablony Sydney na one page webu doslova během několika málo minut. Pokud tedy máte s touto šablonou stejný problém, můžete vyzkoušet toto velmi jednoduché řešení. U této šablony jsem ale narazil na problém s hlavním menu na mobilním zařízení. V tomto článku bych se tedy chtěl podívat na to, jak se dá provést oprava mobilního menu v šabloně Sydney pomocí Javascriptu.

Více článků o WordPressu

Celá kategorie je zde

Web je vytvářen s pečlivostí k obsaženým informacím. Snažím se poskytovat kvalitní a užitečný obsah, který ostatním pomáhá, nebo je inspiruje. Pokud jste spokojeni s mou prací a chtěli byste mě podpořit, můžete to udělat prostřednictvím jednoduchých možností.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

newsletter

Odebírejte Newsletter

Buďte v obraze! Připojte se k odběru newsletteru a buďte první, kdo získá nejnovější informace přímo do vaší e-mailové schránky. Sledujte aktuality, exkluzivní události a inspirativní obsah, přímo na Vašem e-mailu.  

Odebírat
Upozornit na
guest
0 Komentáře/ů
Nejstarší
Nejnovější Nejvíce hlasováno
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje