Discussion :

[nddvlp]

Bonjour à tous,

débutant en bootstrap, j'essaye de réaliser un menu sur 2 lignes de la forme suivante :


ligne 1 : Logo item1 item2 item3
ligne 2 : sous-item1 sous-item2 sous-item3

J'ai donc écrit le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<header>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse col-md-12">
            <div class="navbar-header col-md-2 col-lg-2">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            <div class="col-md-10 col-lg-10"> 
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                </ul>
            </div>
        </nav>
        <nav class="navbar navbar-default navbar-static-top col-md-12" >
            <div class="col-md-10 col-lg-10"> 
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">sous item 1</a></li>
                    <li><a href="#">sous item 2</a></li>
                    <li><a href="#">sous item 3</a></li>
                </ul>
            </div>
        </nav>
</header>

Aucun CSS particulier n'est associé à ma page à part Bootstrap.
Le problème est qu'il n'y a que le premier menu qui s'affiche. Je ne vois pas du tout le deuxième.

J'ai essayé en entourant chaque nav par un <div class="row"> mais ça ne fonctionne pas non plus. Faut-il passer par du CSS particulier dans ce cas?
Je pensais (peut-être à tord) qu'avec Bootstrap et la gestion des rows, celà permettait de gérer cette mise en page.

Merci d'avance.

[Invité]

Bonjour,

revois le Grid system Bootstrap, ainsi que Navs.

...here’s how it works :

• Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.
• Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.
• Content should be placed within columns, and only columns may be immediate children of rows.
• ...

[nddvlp]

Merci je suis parvenu à ce que je voulais faire.

[otmanboy]

<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usuarios <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="{{URL::to('createusuario')}}">Crear</a></li>
<li><a href="#">Modificar</a></li>
<li><a href="#">Reportar</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">Informes</a></li>
</ul>
</li>
<li ><a href="#">Libros<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>
<li ><a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
</ul>
</div>
</div>
</nav>
cssss------------------>
body,html{
height: 100%;
}

nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}

.main{
padding: 10px 10px 0 10px;
}

@media (min-width: 765px) {

.main{
position: absolute;
width: calc(100% - 40px);
margin-left: 40px;
float: right;
}

nav.sidebar:hover + .main{
margin-left: 200px;
}

nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}

nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}

nav.sidebar a{
padding-right: 13px;
}

nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}

nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}

nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}

nav.sidebar{
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
margin-bottom: 0px;
}

nav.sidebar li {
width: 100%;
}

nav.sidebar:hover{
margin-left: 0px;
}

.forAnimate{
opacity: 0;
}
}

@media (min-width: 1330px) {

.main{
width: calc(100% - 200px);
margin-left: 200px;
}

nav.sidebar{
margin-left: 0px;
float: left;
}

nav.sidebar .forAnimate{
opacity: 1;
}
}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}

nav:hover .forAnimate{
opacity: 1;
}
section{
padding-left: 15px;
}