CSS: menu dropdown con effetti dinamici senza JavaScript

  • CSS
  • Gabriele Romanato

In questo articolo vedremo come creare un menu dropdown con effetti dinamici senza l'ausilio di JavaScript. Aggiungeremo un marcatore per segnalare la presenza del sottomenu e lo modificheremo quando l'utente passa con il mouse sulla voce attiva. Il tutto con i soli CSS.

Partiamo dalla seguente struttura HTML:


<ul id="navigation">
  <li class="sub"><a href="#">Nav 1</a>
          <ul class="sub-navigation">
                <li><a href="#">SubNav 1</a></li>
                <li><a href="#">SubNav 2</a></li>
                <li><a href="#">SubNav 3</a></li>
          </ul>
  </li>
  <li><a href="#">Nav 2</a></li>
  <li><a href="#">Nav 3</a></li>
  <li><a href="#">Nav 4</a></li>
</ul>​

Per prima cosa formattiamo il menu principale e il sottomenu:


#navigation {
    height: 2em;
    background: #333;
}

#navigation > li {
    float: left;
    height: 100%;
    margin-right: 0.5em;
    position: relative;
}

#navigation > li > a {
    float: left;
    height: 100%;
    line-height: 2;
    color: #ddd;
    text-decoration: none;
    padding: 0 1em;
}

#navigation > li > a:hover {
    background: #000;
    color: #fff;
}

#navigation ul.sub-navigation {
    width: 12em;
    background: #000;
    position: absolute;
    top: 2em;
    left: 0;
    display: none;
    z-index: 1000;
}

#navigation ul.sub-navigation li {
    display: block;
    margin-bottom: 0.4em;
}

#navigation ul.sub-navigation li:last-child {
    margin-bottom: 0;
}

#navigation ul.sub-navigation li a {
    display: block;
    padding: 0.4em 0.5em;
    color: #fff;
    text-decoration: none;
}

#navigation ul.sub-navigation li a:hover {
    background: #333;
    color: #ddd;
}

Il sottomenu è inizialmente nascosto. Per mostrarlo al passaggio del mouse aggiungiamo il seguente codice:


#navigation > li.sub:hover ul.sub-navigation {
    display: block;
}

Quindi usiamo il contenuto generato per creare il marcatore da aggiungere alla voce con il sottomenu:


#navigation > li.sub > a:after {
    content: '+';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    margin-left: 5px;
}

In pratica abbiamo creato un icona con un segno più. Ora cambiamo il segno più in meno quando l'utente apre il sottomenu:


#navigation > li.sub:hover > a:after {
    content: '-';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    margin-left: 5px;
}

Potete visionare l'esempio finale in questa pagina.

Torna su