navbar

Mattepuffo's logo
Navbar collpase on scroll in Twitter Bootstrap

Navbar collpase on scroll in Twitter Bootstrap

In pratica su alcune pagine ho la necessità di eseguire il collapse della navbar di Twitter Bootstrap quando si scrolla la pagina.

Quando un componente si espande, viene aggiunta la classe show, ed il componente viene visualizzato.

Quindi basta intercettare l'evento scroll e levare la classe CSS.

Mattepuffo's logo
Nascondere la navbar in Ionic

Nascondere la navbar in Ionic

Ho creato un nuovo progetto con Ionic di tipo sidemenu.

La struttura iniziale è molto comoda, in quanto ci sono molte cose pre-confezionate; come ad esempio la navbar comune a tutte le pagine.

Solo che insieme alla navbar c'è anche l'icona per il menu laterale; menu che non si deve vedere se l'utente non ha eseguito il login.

Mattepuffo's logo
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.