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.
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í.
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.
