Problème avec Affichage de Sous Menu Bootstrap

**devalender** · 06/04/2017, 17h28

Bonsoir Imikado

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

Nom : CaptureMonMenu.PNG
Affichages : 1271
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

**imikado** · 06/04/2017, 23h35

Envoyé par devalender

(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

**devalender** · 07/04/2017, 10h26

Envoyé par imikado

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 !

Envoyé par imikado

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

**imikado** · 07/04/2017, 23h05

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

**imikado** · 07/04/2017, 23h23

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>

**devalender** · 08/04/2017, 12h46

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+

Problème avec Affichage de Sous Menu Bootstrap

MkFramework

Vue hybride

Discussions similaires

Partager

Partager