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.
Află detalii privind realizarea site-urilor pe WordPress
Creare site WordPress
Sau ia legatura cu noi aici