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