1. #1
    Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2011
    Messages
    93
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : décembre 2011
    Messages : 93
    Points : 53
    Points
    53

    Par défaut Bootstrap menu sur 2 lignes

    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.

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 200
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 200
    Points : 20 304
    Points
    20 304

    Par défaut

    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.
    • ...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2011
    Messages
    93
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : décembre 2011
    Messages : 93
    Points : 53
    Points
    53

    Par défaut

    Merci je suis parvenu à ce que je voulais faire.

  4. #4
    Futur Membre du Club
    Homme Profil pro
    php
    Inscrit en
    août 2017
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : Maroc

    Informations professionnelles :
    Activité : php
    Secteur : Distribution

    Informations forums :
    Inscription : août 2017
    Messages : 4
    Points : 6
    Points
    6

    Par défaut Menu

    <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;
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu sur 2 lignes
    Par Pelote2012 dans le forum WordPress
    Réponses: 6
    Dernier message: 29/09/2016, 10h57
  2. Afficher un top menu sur 2 lignes
    Par steph70 dans le forum Joomla
    Réponses: 2
    Dernier message: 20/07/2010, 14h56
  3. Top Menu sur deux lignes
    Par eristofflyon dans le forum Joomla
    Réponses: 2
    Dernier message: 08/02/2009, 23h24
  4. Création d'un menu sur une ligne de JTable
    Par devAd dans le forum AWT/SWING
    Réponses: 3
    Dernier message: 16/11/2006, 10h49
  5. []Menu sur plusieurs lignes
    Par GrosQuicK dans le forum VB 6 et antérieur
    Réponses: 1
    Dernier message: 28/09/2005, 15h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo