Home / Programmazione / HTML - CSS / Twitter Bootstrap Navbar Dropdown Hover
Mattepuffo

Twitter Bootstrap Navbar Dropdown Hover

Twitter Bootstrap Navbar Dropdown Hover

Twitter Bottstrap offre di default sia una Navbar che il classico Dropdown.

Se guardate qua vedrete che è anche possibile combinare le due cose.

Il comportamento di default, però, prevede il click per aprire la lista, mentre io voglio aprirla passandoci sopra.

Vediamo come fare.

Partiamo dal codice HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <a class="brand" href="#"></a>
                    <ul id="tab" class="nav">
                        <li class="active"><a href="home.php">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">DD<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="">Voce 1</a></li>
                                <li><a href="">Voce 2</a></li>
                                <li><a href="">Voce 3</a></li>
                                <li><a href="">Voce 4</a></li>
                            </ul>
                        </li>
                        <li><a href="">Logout</a></li>
                    </ul>
                </div>
            </div>

Come vedete abbiamo una prima voce normale, poi una voce con class="dropdown" che al suo interno ha una seconda lista e prima un link che servirà per aprire la lista (è fondamentale).

Infine un'altra voce normale.

Se adesso testate la pagina dovreste avere il Dropdown attivo al click.

A questo punto, se tutto funziona, vi basta un pò di CSS.

In sostanza andiamo a sovrascrivere alcune regole di TB:

ul.nav li.dropdown:hover > ul.dropdown-menu {display: block;}
.dropdown-menu {margin:0;}

La seconda non è essenziale, ma più che altro una comodità; senza di questa la lista sarebbe leggermente staccata dalla Navbar e avrebbe un comportamento strano con il puntatore del mouse (provare per credere).

Direi che è tutto!

Ciao!!