1. #1
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2004
    Messages
    1 323
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2004
    Messages : 1 323
    Points : 736
    Points
    736

    Par défaut Problème avec Affichage de Sous Menu Bootstrap

    Bonsoir Imikado

    J'ai un soucis avec mon sous menu voici une image pour bien illustrer !

    Nom : CaptureMonMenu.PNG
Affichages : 100
Taille : 6,9 Ko

    j'ai emprunter le code dans le forum en l'occurance celui de llaffont https://www.developpez.net/forums/d1...u/#post8221555

    Le code marche très bien même si je l'ai pas encore entièrement compris (je suis sur une lecture de tuto boostrap pour faire une menu verticale dont tu nous avais promis un tutoriel ).

    Le soucis est qu'en cliquant sur un option du menu elle apparaît avec le sous menu correspondant ok ! mais ce sous menu ne disparaît pas quand je clique sur une autre option du menu d'ou un chevauchement comme sur l'image

    je ne vois pas ce que j'ai raté !

    Merci de m'aider

  2. #2
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Ingénieur développement
    Inscrit en
    décembre 2006
    Messages
    4 800
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 4 800
    Points : 18 532
    Points
    18 532
    Billets dans le blog
    17

    Par défaut

    Citation Envoyé par devalender Voir le message
    (je suis sur une lecture de tuto boostrap pour faire une menu verticale dont tu nous avais promis un tutoriel ).
    Tout vient à point : http://mkframework.com/tutoriaux.html#menubootstrap

    je travaille actuellement sur la nouvelle page slides: http://mkframework.com/slides.html via slideshare

    Pour votre soucis de css bootstrap, il me faudrait le code html généré pour vous aider à corriger votre soucis
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  3. #3
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2004
    Messages
    1 323
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2004
    Messages : 1 323
    Points : 736
    Points
    736

    Par défaut

    Citation Envoyé par imikado Voir le message
    Tout vient à point : http://mkframework.com/tutoriaux.html#menubootstrap

    Je travaille actuellement sur la nouvelle page slides: http://mkframework.com/slides.html via slideshare
    Merci je vais y jeter un coup d’œil !

    Citation Envoyé par imikado Voir le message
    Pour votre soucis de css bootstrap, il me faudrait le code html généré pour vous aider à corriger votre soucis
    j'ai pas trop compris mais s'il s'agit du code source affiché par le navigateur le voila :
    Code html : 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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
     
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>rustaconnect</title>
     
    	<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/E5715FCA-D4CB-8448-B525-DF043FCB3F9D/main.js" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/D9F3BCF340FD-525B-8448-BC4D-ACF5175E/abn/main.css"/><script src="js/main.js" type="text/javascript"></script>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     
         <link rel="stylesheet" type="text/css" href="css/app.css" media="screen" />
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
     
     
    <script>
    function openMenu(id){
            var a=getById('cat'+id);
            if(a){
                    if(a.style.display==='none'){
                            a.style.display='block';
                    }else{
                            a.style.display='none';
                    }
            }
    }
    </script>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    	<div class="container">
    		<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="#">Bienvenu(e)</a>
    		</div>
    		<div class="collapse navbar-collapse">
     
    			<ul class="nav navbar-nav">
     
      <li class="active"><a href="index.php?:nav=default::index">Acceuil</a></li>
    <li class="dropdown"><a href="#" onclick="openMenu(0);return false">Ressources<ul class="dropdown-menu" style="display:none" id="cat0">
    <li><a href="index.php?:nav=t_mesecoles::list">Ecoles</a></li>
    <li><a href="index.php?:nav=t_mesfilieres::list">Filieres</a></li>
    <li><a href="index.php?:nav=t_mesniveaux::list">Niveau</a></li>
    		</ul>
                        </li>
    <li class="dropdown"><a href="#" onclick="openMenu(1);return false">Etudiants<ul class="dropdown-menu" style="display:none" id="cat1">
    <li><a href="index.php?:nav=t_mesinfos::list">Recherche Globale</a></li>
    <li><a href="index.php?:nav=t_mesinfos::list">Recherche Ecole</a></li>
    		 </ul>
                        </li>
    <li class="dropdown"><a href="#" onclick="openMenu(2);return false">Examens <ul class="dropdown-menu" style="display:none" id="cat2">
    <li><a href="index.php?:nav=t_mesresultats::list">Resulats Gblobaux</a></li>
    <li><a href="index.php?:nav=t_mesresultats::list">Resultats Détaillés</a></li>
    		</ul>
                        </li>
    <li class="dropdown"><a href="#" onclick="openMenu(3);return false">Importation<ul class="dropdown-menu" style="display:none" id="cat3">
    <li><a href="index.php?:nav=t_mesresultats::list">Etudiants</a></li>
    <li><a href="index.php?:nav=t_mesresultats::list">Resultats Globaux</a></li>
    <li><a href="index.php?:nav=t_mesresultats::list">Resultats Détailles</a></li>
    <li><a href="index.php?:nav=t_mesresultats::list">Comptes</a></li>
    		</ul>
                        </li>
    <li class="dropdown"><a href="#" onclick="openMenu(4);return false">Utilisateurs<ul class="dropdown-menu" style="display:none" id="cat4">
    <li><a href="index.php?:nav=utilisateurs::list">Liste</a></li>
    <li><a href="index.php?:nav=rightsManager::edit">Gestion</a></li>
    			 </ul>
                        </li>
    <li><a href="index.php?:nav=tracelogs::list">Voir Log</a></li>
    <li><a href="index.php?:nav=auth::logout">Se deconnecter</a></li>
    		</ul>
     
    		</div><!--/.nav-collapse -->
    	</div>
    </div>
     
    	<div class="container theme-showcase" role="main">
     
    		<div class="page-header">
     
    		</div>
     
    		vue index
    	</div>
     
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
      </body>
    </html>
    <script>
                    var activePopup='';
                    function openPopupDebug(id){
                            if(id!=activePopup){
                                    closePopup();
                            }
     
                            var a=getById(id);
                            if(!a){
                            }else if(a.style.display=="none"){
                                    a.style.display="block";
                                    activePopup=id;
                            }else if(a.style.display=="block"){
                                    a.style.display="none";
                                    activePopup=id;
                            }
                    }
                    function closePopup(){
                            if(activePopup){
                                    var b=getById(activePopup);
                                    if(b){
                                            b.style.display="none";
                                    }
                            }
                    }
                    function showHideDebugBar(){
                            var a=getById('debugBar');
                            if(a){
                                    btnName="Masquer";
     
                                    if(a.style.display=='none'){
                                            a.style.display='block';
                                            var b=getById('debugBtn');
                                            if(b){
                                                    b.style.width='100%';
                                            }
                                    }else{
                                            a.style.display='none';
                                            var b=getById('debugBtn');
                                            if(b){
                                                    b.style.width='auto';
                                            }
                                            btnName=">>";
                                    }
                                    
                                    var c=getById('btnHidebar');
                                    if(c){
                                            c.value=btnName;
                                    }
                            }
                    }

  4. #4
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Ingénieur développement
    Inscrit en
    décembre 2006
    Messages
    4 800
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 4 800
    Points : 18 532
    Points
    18 532
    Billets dans le blog
    17

    Par défaut

    Vous pouvez essayez en modifiant la fonction javascript ainsi:

    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
    <script>
    var menuActive=null;
    function openMenu(id){
    	if(menuActive){
    		getById(menuActive).style.display='none';
    	}
    
            var a=getById('cat'+id);
            if(a){
                    if(a.style.display==='none'){
                            a.style.display='block';
                            menuActive='cat'+id;
                    }else{
                            a.style.display='none';
                    }
            }
    }
    </script>
    j'ai ajouté une variable "menuActive" qui contient le dernier menu ouvert, a chaque fois que vous cliquez sur un nouveau menu, on ferme le précedent
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  5. #5
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Ingénieur développement
    Inscrit en
    décembre 2006
    Messages
    4 800
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement
    Secteur : Finance

    Informations forums :
    Inscription : décembre 2006
    Messages : 4 800
    Points : 18 532
    Points
    18 532
    Billets dans le blog
    17

    Par défaut

    En regardant sur bootstrap, j'ai vu qu'il y avait une autre methode que celle évoqué ici avec une fonction javascript "openMenu"
    Voici le code en utilisant les dropdown:

    Code html : 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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
     
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    	<div class="container">
    		<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="#">Bienvenu(e)</a>
    		</div>
    		<div class="collapse navbar-collapse">
     
    			<ul class="nav navbar-nav">
     
    			<li class="active"><a href="index.php?:nav=default::index">Acceuil</a></li>
     
     
    			<li class="dropdown">
    				<a href="#"  data-toggle="dropdown" >Ressources</a>
    				<ul class="dropdown-menu">
    					<li><a href="index.php?:nav=t_mesecoles::list">Ecoles</a></li>
    					<li><a href="index.php?:nav=t_mesfilieres::list">Filieres</a></li>
    					<li><a href="index.php?:nav=t_mesniveaux::list">Niveau</a></li>
    				</ul>
    			</li>
     
    			<li class="dropdown">
    				<a href="#"  data-toggle="dropdown" >Etudiants</a>
    				<ul class="dropdown-menu">
    					<li><a href="index.php?:nav=t_mesinfos::list">Recherche Globale</a></li>
    					<li><a href="index.php?:nav=t_mesinfos::list">Recherche Ecole</a></li>
    				</ul>
    			</li>
     
    			<li class="dropdown">
    				<a href="#"  data-toggle="dropdown" >Examens</a>
    				<ul class="dropdown-menu">
    					<li><a href="index.php?:nav=t_mesresultats::list">Resulats Gblobaux</a></li>
    					<li><a href="index.php?:nav=t_mesresultats::list">Resultats Détaillés</a></li>
    				</ul>
    			</li>
     
    			<li class="dropdown">
    				<a href="#"  data-toggle="dropdown" >Importation</a>
    				<ul class="dropdown-menu">
    					<li><a href="index.php?:nav=t_mesresultats::list">Etudiants</a></li>
    					<li><a href="index.php?:nav=t_mesresultats::list">Resultats Globaux</a></li>
    					<li><a href="index.php?:nav=t_mesresultats::list">Resultats Détailles</a></li>
    					<li><a href="index.php?:nav=t_mesresultats::list">Comptes</a></li>
    				</ul>
    			</li>
     
    			<li class="dropdown">
    				<a href="#"  data-toggle="dropdown" >Utilisateurs</a>
    				<ul class="dropdown-menu">
    					<li><a href="index.php?:nav=utilisateurs::list">Liste</a></li>
    					<li><a href="index.php?:nav=rightsManager::edit">Gestion</a></li>
    				</ul>
    			</li>
     
    			<li><a href="index.php?:nav=tracelogs::list">Voir Log</a></li>
    			<li><a href="index.php?:nav=auth::logout">Se deconnecter</a></li>
     
     
    		</ul>
     
    		</div><!--/.nav-collapse -->
    	</div>
    </div>
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

  6. #6
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2004
    Messages
    1 323
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2004
    Messages : 1 323
    Points : 736
    Points
    736

    Par défaut

    Bonjour Imikado

    Le code avec le nouveau script marche.
    Merci aussi pour le tuto sur le menu verticale et aussi pour le nouveau style de slide très bien monté.
    a+

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

Discussions similaires

  1. Problème de d'affichage de sous menu
    Par micker dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 17/06/2009, 22h12
  2. Problème d'affichage d'un menu sous IE
    Par JeBaY dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 05/02/2009, 09h55
  3. Problème d'affichage d'un menu css sous IE6 et IE7
    Par TomTom71 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 06/06/2008, 09h27
  4. problème avec z-index sous firefox ???
    Par SpaceFrog dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/09/2005, 20h39
  5. [Sybase]Problème avec le BCP sous Solaris
    Par sl dans le forum Sybase
    Réponses: 3
    Dernier message: 09/09/2004, 07h56

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