[Bootstrap3] navbar con sottomenu orizzontale

**Alhazred** · 27-03-2016, 12:21

Sto cercando di realizzare un menu strutturato in questo modo: le voci principali del menu su una riga e l'eventuale sottomenu con i suoi link sulla riga sottostante uno di fianco all'altro.
Per spiegare cosa intendo ecco 2 immagini

menu esteso

menu compresso

Ecco i problemi:
- per visualizzare su una riga il sottomenu quando la pagina è abbastanza larga, ho dovuto impostare una larghezza fissa, quegli 890px del css, quando il menu è compresso, per visualizzare il sottomenu con i link impilati ho la degola @media che vedete nel css, però a causa di quegli 890px mi vengono fuori le barre di scorrimento, cosa che chiaramente vorrei evitare.
- vorrei che aprendo il sottomenu quando è visualizzato esteso, questo sia allineato tutto a sinistra, quindi che parta da sotto da "Menu 1" anche se ad essere aperto è "Menu 2", adesso invece appare allineato con la voce del menu a cui si riferisce.

Ecco il codice che sto usando e che potete usare così com'è per avere il menu funzionante (il css è ridotto all'osso per non appesantire il codice, quello che manca sono solo colori di sfondo, immagini di background e roba simile).

CSS
Usate bootstrap standard e poi questo CSS che fa un po' di overriding

codice:

/*** Per avere il sottomenu impilato quando il menu è compresso ***/
@media (max-width: 767px) {
    #top-menu li { width:100%; }
}
/**********/

.navbar {
    padding:0;
    margin-bottom:0;
}
.navbar-default {
    padding:0;
}
.navbar-nav li {
    margin-right:6px;
    font-weight:bold;
    font-size:1.1em;
    background-color: transparent;
}
ul.multi-level {
    padding:0 !important;
    margin-top: 5px !important;
    padding-bottom: 4px !important;
    border:none !important;
    box-shadow: none !important;
}
.navbar-nav > li > a {
    padding: 10px;
}
ul.multi-level > li > a {
    padding: 5px 3px 5px 7px !important;
    font-size:0.9em !important;
}
/**** Per avere il sottomenu in linea ****/
ul.multi-level {
    width:890px !important;
}
ul.multi-level > li {
    display: inline-block !important;
}
/*******************************/

HTML

codice:

<!DOCTYPE HTML>
<html lang='it'>
    <head>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-menu">
                        <span class="sr-only">Espandi barra di navigazione</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">LOGO</a>
                </div>

                <div class="collapse navbar-collapse" id="top-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1 </a></li>
                        <li><a href="#">Link 2</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-level pull-left">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </body>
</html>

Come posso ottenere il comportamento desiderato?

**Alhazred** · 27-03-2016, 20:04

Per quanto riguarda la posizione del sottomenu quando il menu è espanso ho risolto con una funzione jquery, questa:

codice:

$('.dropdown').click(function(){
    // posizione della prima voce del menu (Menu 1 in questo caso)
    var ref_position = $('.dropdown:first').position();

    // posizione della voce di menu sulla quale si clicca
    var this_position = $(this).position();

    // di quanto devo spostarmi verso sinistra per allinearmi alla prima voce del menu
    var posleft = ref_position.left - this_position.left;

    //  modifico la posizione del sottomenu che devo mostrare
    $('ul.multi-level').css({"left":posleft+"px"});
});

Mi rimane il problema di come fa apparire il sottomenu su una riga, senza interferire con la larghezza del sottomenu quando il menu è compresso.

**Alhazred** · 28-03-2016, 12:37

Ho rispolto tutto, almeno penso, per ora sembra funzionare.
Questa è la modifica apportata al css

codice:

@media (max-width: 767px) {
    #top-menu li { width:95%; }
    ul.multi-level { left:0; }
}

Discussione: [Bootstrap3] navbar con sottomenu orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

[Bootstrap3] navbar con sottomenu orizzontale

Permessi di invio