Elementor widget Off Canvas: Jak automaticky zavřít menu s #kotvou

Widget Off Canvas je v nabídce Elementoru poměrně nováček a slouží k vytváření efektivních vysouvacích bloků. Díky tomuto widgetu nebudete mít již problém vytvořit např. hezké boční menu pro responzivní režim. Klasický widget WordPress Menu bohužel umožňuje pouze vysouvání směrem dolů, což nemusí každému vyhovovat – a upřímně, esteticky to také není žádná sláva.

V tomto článku se nebudeme věnovat základnímu nastavení menu (návodů na na použití Off-Canvas je spousta), ale zaměříme se na jednu drobnou chybu, na kterou jsem narazila při tvorbě webů pro své klienty.

Co je to kotva#?

Jedná se o URL odkaz, kdy stránka odkazuje na daný obsah v rámci jedné stránky, tj. stránka nemá vytvořenou vlastní stránku. Kotva má typicku podobu: https://www.urlvasistranky.cz/#kontakt. Pokud jste tento odkaz použili v responzivním režimu, stránka se sice posunula na správnou sekci, ale vysouvací menu zůstalo otevřené, což pro klienta určitě není příjemné.

Jak to vyřešit?

Chvíli mi trvalo, než jsem našla řešení, ale nakonec je to celkem jednoduché. Pokud byste chtěli tedy použít menu s kotvou pomocí Off-Canvas (funguje pěkně i v případě, že kotva v menu není), pak stačí, abyste v nabídce Elementor – Custom Code – vytvořily nový kód a vložit do něj jednoduchý JavaScript. Důležité je nastavit Location na Location nastavte na </body> End. (Alternativou je také možnost vložení JavaScript kodu pomocí HTML widgetu ve vašem bloku s menu.)

a vložte následující JavaScript kód:

<script>
document.addEventListener('click', function (event) {
    if (event.target.closest('a[href*="#"]:not([aria-haspopup="true"])') && event.target.closest('.e-off-canvas[aria-hidden="false"]')) {
        const canvasTriggers = document.querySelectorAll('[href*="canvas"][aria-expanded="true"]:not([href*="%3Aopen"]');
        canvasTriggers.forEach(canvasTrigger => canvasTrigger.click());
    }
});
</script>