Hamburger menu - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
OVERLAY MENU
con sottolivelli cliccabili


PRO:
Facile da inserire (copia incolla)
Effetto gradevole e personalizzabile
Dimensioni personalizzabili
Colore personalizzabile
Infiniti sottomenù per ogni livello principale
Apertura a tendina dei sottomenù
Effetto hover sul passaggio del mouse
Occultabile a certe risoluzioni con le opzioni website x5 (nascondi oggetto)

CONTRO:
Personalizzabile solo da codice
Richiede esperienza in programmazione


COSA CI SERVE?
Un oggetto HTML incomedia posto sulla styky bar o sull'header o su entrambi.

SEI PRONTO?
Incomedia tra i suoi oggetti in vendita ha overlay menù. Sebbene di gradevole effetto con back-end per l'impostazione degli stili e degli effetti, ha una pecca su cui ancora oggi, nonostante tanti post IDEA che l'hanno richiesto, l'oggetto in se per stesso agisce solo sul livello e non sui sottomenù. Il che vuol dire che lo sviluppatore deve far puntare il livello di solito a pagine nascoste o ad una pagina che solitamente sostituisce la pagina  SERVIZI. Lo smanettone ha ben pensato che si potrebbe intervenire con del codice extra cercando di unire l'esperienza utente con sobrietà senza strafare con effetti strabilianti, che pure si possono ottenere ma a discapito della velocità di esecuzione. Lo smanettone è intervenuto su un rapporto di compromesso che potrà piacere o meno. Ma lo smanettone ha fatto ancora di più. Vi da la possibilità di di provarlo in anteprima  e se vi piace di scaricarlo già pronto. Ma in pratica cosa è stato fatto?
Semplice! Su una pagina test inserite un oggetto html sull'header o sul footer. Fate doppio click sull'oggetto e in CODICE inserite tutto il listato di seguito indicato:

CODICE DA INSERIRE IN OGGETTO HTML
"codice"
<!-- Font Awesome (opzionale ma utile per compatibilità) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<style>
/* hamburger con sottolivelli by max 2025 losmanettone.it */
* {
 font-family: 'Poppins', sans-serif;
}

.hamburger {
  position: relative;
  width: 40px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 99999;
}

.hamburger span {
  display: block;
  height: 4px;
  background: white;
  border-radius: 2px;
  transition: 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Overlay */
.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(5px);
  color: white;
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.overlay-menu.active {
 display: flex;
 animation: zoomFadeIn 0.4s ease;
}

@keyframes zoomFadeIn {
 from {
   opacity: 0;
   transform: scale(0.9);
 }
 to {
   opacity: 1;
   transform: scale(1);
 }
}

ul {
 position: relative;
 right: 25px; /* Sposta il contenitore 25px a sinistra */
}

.overlay-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.overlay-menu li {
  margin: 20px 0;
  font-size: 1.6rem;
  cursor: pointer;
  transition: color 0.3s;
}

.overlay-menu li:hover {
  color: #00ffff;
}

.has-submenu::after {
 content: ' ▼';
 font-size: 0.8rem;
 margin-left: 5px;
}

.has-submenu.expanded::after {
 content: ' ▲';
}


.submenu {
  max-height: 0;
  overflow: hidden;
  font-size: 1.2rem;
  transition: max-height 0.4s ease;
}
.submenu {
 position: relative;
 left: 0px; /* Sposta solo i sottomenù */
}
.overlay-menu .submenu li {
font-size: 1.2rem !important;
}

.submenu li {
  margin: 8px 0;
}
.submenu li a:hover {
 color: red; /* Cambia il colore del testo */
 font-weight: bold; /* Rende il testo in grassetto */
 transition: color 0.1s ease-in-out, font-weight 0.1s ease-in-out; /* Effetto fluido */
}

.expanded > .submenu {
  max-height: 500px;
}

.overlay-menu a {
  color: white;
  text-decoration: none;
}
</style>

<!-- Bottone hamburger -->
<div style="z-index:99999; position:relative;">
<div class="hamburger" onclick="toggleOverlay(this)">
  <span></span>
  <span></span>
  <span></span>
</div>
</div>

<!-- Overlay menu -->
<div class="overlay-menu" id="overlayMenu">
<ul>
  <li><a href="index.html">Home Page</a></li>
  <li class="has-submenu" onclick="toggleSubmenu(this)">
    Servizi
    <ul class="submenu">
      <li><a href="page1.html">pagina 1</a></li>
      <li><a href="page2.html">pagina 2</a></li>
      <li><a href="page3.html">pagina 3</a></li>
    </ul>
  </li>
  <li class="has-submenu" onclick="toggleSubmenu(this)">
    Chi siamo
    <ul class="submenu">
      <li><a href="page4.html">pagina 4</a></li>
      <li><a href="page5.html">pagina 5</a></li>
    </ul>
  </li>
  <li><a href="contatti.html">Contatti</a></li>
</ul>
</div>

<script>
function toggleOverlay(button) {
  const overlay = document.getElementById('overlayMenu');
  overlay.classList.toggle('active');
  button.classList.toggle('active');
}

function toggleSubmenu(el) {
  const allItems = document.querySelectorAll('.has-submenu');
  allItems.forEach(item => {
    if (item !== el) item.classList.remove('expanded');
  });
  el.classList.toggle('expanded');
}
</script>
DOMANDE FREQUENTI:
D:Come faccio ad inserire un nuovo menu con sottolivelli?
R: Molto semplice individua il blocco sotto indicato e aggiungi questo frammento di codice:






























<div class="overlay-menu" id="overlayMenu">
<ul>
  <li><a href="index.html">Home Page</a></li>

  <!-- Aggiungi qui -->
  <li class="has-submenu" onclick="toggleSubmenu(this)">
    Portfolio
    <ul class="submenu">

      <li><a href="fotografia.html">Fotografia</a></li>
      <li><a href="grafica.html">Grafica</a></li>
      <li><a href="video.html">Video</a></li>
    </ul>
  </li>

  <li class="has-submenu" onclick="toggleSubmenu(this)">
    Servizi
    <ul class="submenu">
      <li><a href="page1.html">pagina 1</a></li>
      <li><a href="page2.html">pagina 2</a></li>
      <li><a href="page3.html">pagina 3</a></li>
    </ul>
  </li>
  <li class="has-submenu" onclick="toggleSubmenu(this)">
    Chi siamo
    <ul class="submenu">
      <li><a href="page4.html">pagina 4</a></li>
      <li><a href="page5.html">pagina 5</a></li>
    </ul>
  </li>
  <li><a href="contatti.html">Contatti</a></li>
</ul>
</div>
D: E se io volessi lavorare solo sul primo livello?
R: replichi questo percorso con il nuovo indirizzo della pagina da aprire
<li><a href="index.html">Home Page</a></li>
D: se io volessi fare in modo che se clicco su un link tutto si chiuda in automatico come faccio?
R: sulla parte finale dello script aggiungi questa funzione




// Chiudi overlay cliccando su un link
document.querySelectorAll('.overlay-menu a').forEach(link => {
 link.addEventListener('click', () => {
   document.getElementById('overlayMenu').classList.remove('active');
   document.querySelector('.hamburger').classList.remove('active');
 });
});
D: E se io volessi servirmi di ESC o cliccare in un punto qualsiasi per chiudere il menu?
R: aggiungi sempre all'ultimo sullo script questa funzione


















// Chiudi il menu con tasto ESC
document.addEventListener('keydown', function (e) {
 if (e.key === 'Escape') {
   document.getElementById('overlayMenu').classList.remove('active');
   document.querySelector('.hamburger').classList.remove('active');
 }
});

// Chiudi il menu cliccando fuori
document.addEventListener('click', function (e) {
 const overlay = document.getElementById('overlayMenu');
 const hamburger = document.querySelector('.hamburger');
 
 // Se il menu è attivo, e il click NON è sull'hamburger né dentro il menu
 if (overlay.classList.contains('active') &&
     !overlay.contains(e.target) &&
     !hamburger.contains(e.target)) {
   overlay.classList.remove('active');
   hamburger.classList.remove('active');
 }
});

D: Per regolare la trasparenza dello sfondo dove agisco?
R: Individua la parte del listato dove si può pilotare la trasparenza



















Ora tu hai      background: rgba(0, 0, 0, 0.95);

Tieni presente queste gradazioni:
  • Più trasparente: rgba(0, 0, 0, 0.7)
  • Molto trasparente: rgba(0, 0, 0, 0.5)
  • Semi-opaco elegante: rgba(0, 0, 0, 0.85)

Quindi per modificare la trasparenza sostituisci il background con questa:

.overlay-menu {
 background: rgba(0, 0, 0, 0.8); /* Regola qui */
}

In neretto i punti su cui intervenire per vostre personalizzazioni e per inserire i link delle vostre pagine e dei sottolivelli.
Bene. Ora non ti rimane che provare un'anteprima del progetto, fare le tue giuste valutazioni e nel caso scaricartelo sul tuo PC.

SCARICA L'INTERO PROGETTO
▼
COMMENTA ▼
5.0 / 5
1 recensione
5 
1
4 
0
3 
0
2 
0
1 
0

CARLO G.
Mercoledì 07 Mag 2025
Mitico MAX sei proprio uno smanettone allo stato puro!!

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti