Acasă » Blog » Afișarea submeniurilor expandate implicit în versiunea mobil pentru meniurile de tip hamburger

Afișarea submeniurilor expandate implicit în versiunea mobil pentru meniurile de tip hamburger

  • Wordpress
  • 2 min read
Share this post on social!
Programare custom - Meniul hamburger cu submeniuri expandate

Uneori este mai prietenos pentru utilizator ca submeniurile sa fie afișate desfășurat (expandate) în mod implicit pentru versiunile de mobil a paginilor web.

Sunt diferite abordări pentru a obține acest efect, toate având ca numitor comun directivele css.

De obicei este o clasă css care se adaugă sau se elimină din lista de clase css ale elementului care conține submeniul (un “wrapper” sau direct pe elementul html al submeniului – ul, div, etc).

Abordarea noastră este rularea unui script JavaScript (pur, n u prin intermediul unui alt framework – ex. jQuery – pentru a se rula rapid, înainte de încărcarea acestuia).

Ne-am inspirat din exemplul furnizat de cei de la Theme Isle (https://docs.themeisle.com/article/1128-expand-sub-menu-items-on-mobile).

Iată scriptul. Am adaugat acest script in tag-ul head, inainte ca elementul menu sa fie incarcat in browser. Din acest motiv am apelat la evenimentul DomContentLoaded, care se petrece atunci cand DOM-ul este incarcat, dar nu si imaginile si fisierele css.

window.addEventListener('DOMContentLoaded', (event) => {
//am cules intr-un vector div-urile wrapper care contin submeniurile
        var drops = document.querySelectorAll('ul.brz-menu__ul.brz-mm-listview > li.brz-mm-menu__item > div.brz-mm-panel');
//icon-ul hamburger menu
        var toggle = document.querySelector('.brz-mm-menu__icon');
//capturam evenimentul click pe iconul menu
        toggle.addEventListener('click', function() {
//parcurgem toate submeniurile
            for (var i = 0; i < drops.length; i++) {
//daca sunt ascunse
                if (drops[i].classList.contains("brz-mm-hidden")) {
//elimnam clasa brz-mm-hidden
                    drops[i].classList.remove('brz-mm-hidden');
//afisam submeniul
                    drops[i].style.display = 'block';
                    
                }
            }
        });
    });

Scriptul nostru a fost aplicat în practică site-ului pamantulstramosesc.ro.

Dacă aveți proiecte interesante și complexe, apelați la programatorii și dezvoltatorii noștri pentru realizarea acestora.

Lasă un răspuns

Traian Constantin Predan

Traian Constantin Predan

Inginer absolvent al Politehnicii București proiectează și construiește sisteme online. Lucrează proiecte extrem de diverse, îi plac viziunile noi care provoacă la dezvoltarea unor soluții tehnice eficiente și stabile.