Creare un menu con tanti sottomenu con Bootstrap

**giannino1995** · 08-09-2016, 10:59

Sto editando un menu di un template fatto con Bootstrap ma non risco a creare delle voci aggiuntive alle linguette presenti.

Lo script originale è questo:

codice HTML:

<!--navigation-->
    <div class="top-nav">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header navbar-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <h1><a class="navbar-brand" href="index.html">Mercantile</a></h1>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <nav class="menu menu--shylock">
                        <ul class="nav navbar-nav link-effect-7" id="link-effect-7">
                            <li class="active"><a href="index.html" data-hover="Home">Home</a></li>
                            <li><a href="services.html" data-hover="Services">Services</a></li>
                            <li><a href="about.html" data-hover="About Us">About Us</a></li>
                            <li><a href="short-codes.html" data-hover="Short Codes">Short Codes</a></li>
                            <li><a href="mail.html" data-hover="Mail Us">Mail Us</a></li>
                        </ul>
                    </nav>
                </div>
            </nav>    
        </div>    
    </div>    
<!--navigation-->

mentre quello che vorrei avere io questo:

codice HTML:

<!--navigation-->
    <div class="top-nav">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header navbar-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <h1><a class="navbar-brand" href="index.html">Mercantile</a></h1>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <nav class="menu menu--shylock">
                        <ul class="nav navbar-nav link-effect-7" id="link-effect-7">
                            <li class="active"><a href="index.html" data-hover="Home">Home</a></li>
                            <li><a href="services.html" data-hover="Services">Services</a></li>
                            <li class="dropdown">
                                <a href="#" class="scroll dropdown-toggle" data-toggle="dropdown">Prova<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="recipes.php">Prova 1</a></li>
                                    <li><a href="recipes.php">Prova 2</a></li>
                                    <li><a href="recipes.php">Prova 3</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html" data-hover="About Us">About Us</a></li>
                            <li><a href="short-codes.html" data-hover="Short Codes">Short Codes</a></li>
                            <li><a href="mail.html" data-hover="Mail Us">Mail Us</a></li>
                        </ul>
                    </nav>
                </div>
            </nav>    
        </div>    
    </div>    
<!--navigation-->

Devo cambiare template oppure c'è una soluzione?

Grazie

**giannino1995** · 08-09-2016, 12:47

Sto leggendo questa pagina:

http://www.html.it/guide/img/bootstrap/ref/navbar.html

per capire qualcosa di più su questa splendida libreria ma non capisco come creare un menu a discesa dentro un altro menu a discesa.

Non capisco perché questo html non funzioni:

codice HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Menu mobile</a>
  </div>
 
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Subitem a</a></li>
            <li><a href="#">Subitem b</a></li>
            <li><a href="#">Subitem c</a></li>
          </ul>
          </li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

credo che al secondo <ul> si debba dare una seconda classe ma non saprei quale.

**fermat** · 08-09-2016, 12:51

hai provato a guardare sulla documentazione ufficiale??
http://getbootstrap.com/components/#navbar

io uso sempre questa, in quanto è la più aggiornata.

**giannino1995** · 08-09-2016, 14:18

Originariamente inviata da fermat

hai provato a guardare sulla documentazione ufficiale??
http://getbootstrap.com/components/#navbar

io uso sempre questa, in quanto è la più aggiornata.

Si, neanche li ho trovato il menu che cerco. Pensi che non sia possibile?

**fermat** · 08-09-2016, 14:42

si è possibile perchè io l'ho fatto, ma non ho il codice sotto mano.

in sostanza vuoi un sotto-menu in un sotto-menu, quindi due sotto-menu a cascata giusto??

potresti provare così:

codice:

<nav class="navbar navbar-default navbar-fixed-top"> 
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Menu mobile</a> 
  </div> 
  
  <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li class="drop2"> 
            <a href="#" class="dropdown-toggle" data-toggle="drop2">Dropdown <b class="caret"></b></a> 
            <ul class="dropdown-menu"> 
                <li><a href="#">Subitem a</a></li> 
                <li><a href="#">Subitem b</a></li> 
                <li><a href="#">Subitem c</a></li> 
            </ul> 
          </li> 
          <li><a href="#">Item 4</a></li> 
          <li><a href="#">Item 5</a></li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</nav>

**giannino1995** · 09-09-2016, 00:15

Originariamente inviata da fermat

si è possibile perchè io l'ho fatto, ma non ho il codice sotto mano.

in sostanza vuoi un sotto-menu in un sotto-menu, quindi due sotto-menu a cascata giusto??

potresti provare così:

codice:

<nav class="navbar navbar-default navbar-fixed-top"> 
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Menu mobile</a> 
  </div> 
  
  <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li class="drop2"> 
            <a href="#" class="dropdown-toggle" data-toggle="drop2">Dropdown <b class="caret"></b></a> 
            <ul class="dropdown-menu"> 
                <li><a href="#">Subitem a</a></li> 
                <li><a href="#">Subitem b</a></li> 
                <li><a href="#">Subitem c</a></li> 
            </ul> 
          </li> 
          <li><a href="#">Item 4</a></li> 
          <li><a href="#">Item 5</a></li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</nav>

Non funziona

**SerenaGrafic@** · 09-09-2016, 08:59

Ciao, hai provato a vedere qua?
http://bootsnipp.com/

Buona giornata!

**giannino1995** · 10-09-2016, 22:13

Originariamente inviata da SerenaGrafic@

Ciao, hai provato a vedere qua?
http://bootsnipp.com/

Buona giornata!

Non so cosa sia. Fermat, dato che ci sei riuscito ti andrebbe di spiegarmi come hai fatto?
Grazie

**giannino1995** · 11-09-2016, 22:42

Ho provato questo snippet ma non funziona bene:

http://bootsnipp.com/snippets/featur...pdown-menu-bs3

le scritte dei submenu escono fuori dal tag a o li.

codice HTML:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="index.php">GGG</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Software</a></li>
        <li><a href="#">Software</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu"><a href="#">Software</a>
            <ul class="dropdown-menu">
                <li><a href="#">Software Software</a></li>
                <li><a href="#">Software Software</a></li>
                <li><a href="#">Software Software</a></li>
                <li><a href="#">Software Software</a></li>
                <li><a href="#">Software Software</a></li>
            </ul>
        </li>
    </ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Software Software</a></li>
        <li><a href="#">Software Software</a></li>
    </ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->

</div>
<!-- /.container -->
</nav>

**fermat** · 12-09-2016, 17:44

Originariamente inviata da giannino1995

Non so cosa sia. Fermat, dato che ci sei riuscito ti andrebbe di spiegarmi come hai fatto?
Grazie

ciao!

si mi andrebbe anche, ma non trovo più quel menu (era un progetto vecchio).
al momento non ho molto tempo di provare.
se lo ritrovo te lo mando...

Discussione: Creare un menu con tanti sottomenu con Bootstrap

Strumenti discussione

Ricerca discussione

Visualizza

Creare un menu con tanti sottomenu con Bootstrap

Permessi di invio