Discussion :

[JujuPomme]

Bonjour à tous,

J'explique un peu la situation.

J'ai deux menus. J'en ai un qui est sur la gauche, classique, et l'autre est un fab. (floating action button, en bas à droite)

Le premier, est full Bootstrap. Le second, n'a pas de bootstrap, et là est le problème.

Le premier menu marche bien, quand je clique sur les liens, je navigue normalement. Or, quand je clique sur les liens du second menu (qui pointe vers les mêmes div), je perds la navigation, et reste bloqué sur la même page.

En analysant un peu Firebug, j'ai remarqué quelque chose.

Quand je clique sur les liens de mon menu qui est fait avec Bootstrap, deux classes sont générées sur ces divs, in et active. Or, sur mon fab, elles ne le sont plus, et le soucis est là. Sauf que je ne sais pas de quelle manière corriger le tout, quit à générer les classes à la main...

Voici les codes associés :

Le menu 'Bootstrap':

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
<div id="sidebar-wrapper" style="z-index:1034;">
				<ul class="sidebar-nav">
					<li class="sidebar-brand nav">
							 <a class="navbar-brand" href="<?php echo $_url_site; ?>" style="margin-left:20px">
								<img src="img/logo_b.png"  alt="logo infob" style="margin-top: -15px;"/>
							</a>
					</li>
					<li class="nav" style="margin-top: 25px;">
						<a data-toggle="tab" href="#home" class="a_menu_mobile"><i class="fa fa-home fa-fw fa-lg" style="width:100px;"></i>Accueil</a>
				   </li>
				   <li class="nav" style="margin-top: 25px;">
						<a data-toggle="tab" href="#contact" class="a_menu_mobile">
						<i class="fa fa-user fa-fw fa-lg" style="width:100px;"></i>Créer un contact</a>
				   </li>
					<li class="nav">
						<a data-toggle="tab" href="#action" class="a_menu_mobile"><i class="fa fa-list-alt fa-fw fa-lg" style="width: 100px;"></i>Créer une note</a>
					</li>
					<?php
                                        if ( isset($_SESSION['affaire']) == 1 ) { ?>
					<li class="nav">
						<a href="#affaire" data-toggle="tab" data-link="Affaires" id="test_affaire" class="a_menu_mobile"><i class="fa fa-file fa-fw fa-lg" style="width:100px;"></i>Mes affaires</a>
				   </li>
					<?php } ?>
					<li id="navTabFiche" class="nav" style="display:none;">
						<a data-toggle="tab" href="#fiche" class="a_menu_mobile" title="fiche contact"><i class="fa fa-user fa-fw fa-lg" style="width: 100px;"></i><span>Fiche</span></a>
					</li>
					<li class="nav" style="margin-left:50px;"><?php if($_access_ok == 1) {?>
									<form name="f_disconnect" role="form" action="<?php echo $_url_site; ?>" method="post" enctype="multipart/form-data"><input type="hidden" name="deconnexion" id="deconnexion" value="deconnexion"  /><button type="submit" name="validate" value="deconnexion" class="btn btn-sm btn-primary" >Déconnexion</button>
								<p style="padding:0; width:100%;"><?php echo $_SESSION['prenom']; ?> <?php echo $_SESSION['nom']; ?></p></form></li>
								<?php }?>
				</ul>
			</div>

Le fab :

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
<div class="fab-container">
		<div class="backdrop"></div>
			<ul class="sidebar-nav">
				   <li class="fab child nav" data-subitem="1" style="margin-top: 25px;">
						<a data-toggle="tab" href="#contact" id="creer_contact" class="a_menu_mobile change_localisation_site" data-link="Créer un contact" title="Créer contact">
							<i class="fa fa-user fa-fw fa-lg" style="width:28px; font-size:0.9em; margin-left:-42px; vertical-align: 60%;"></i>
						</a>
				   </li>
					<li class="fab child nav" data-subitem="2">
						<a data-toggle="tab" href="#action" id="creer_note" class="a_menu_mobile change_localisation_site" data-link="Créer une note" title="Créer note">
							<i class="fa fa-list-alt fa-fw fa-lg" style="width: 31px; font-size:0.9em; margin-left:-45px; vertical-align:60%;"></i>
						</a>
					</li>
			</ul>
		<div class="fab" id="masterfab" style="" ><span>+</span></div>
	</div>

Et enfin, la destinations des liens :

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
<div class="tab-content"><!-- tab content -->
		<div id="home" class="panel-recherche tab-pane fade  in active"><!-- #id = rechercher -->
			<!--<h4>Rechercher contact</h4>-->
			<object type="application/x-shockwave-flash" data="" style="width:640px; height:480px;width:100%;">
				<param name="movie" value="http://www.youtube.com/v/RQ" />
				<param name="allowFullScreen" value="true" />
				<param name="allowScriptAccess" value="always" />
				<param name="wmode" value="transparent" />
			</object>
		</div><!-- /#id = rechercher -->
		<div id="fiche" class="panel-fiche tab-pane fade  "><!-- #id = fiche -->
		<?php 
                        $_form_type = '_fiche';
                        include('_inc_dashboard_contact_form.php'); ?>
		</div><!-- /#id = fiche -->
		<div id="contact" class="panel-contact-creation tab-pane fade"><!-- #id = contact -->
			<h4>Créer un contact</h4>
			<?php 
                        $_form_type = '_creation';
                        include('_inc_dashboard_contact_form.php'); ?>
		</div><!-- /#id = contact -->
		<div id="action" class="panel-action-creation tab-pane fade"><!-- #id = action -->
			<h4>Créer une note</h4>
			<!-- FORM = f_action -->
			<form id="f_action" class="f_action form-horizontal" role="form" action="<?php echo $_url_site; ?>" method="post">
			<?php include('_inc_dashboard_action_form.php'); ?>
			</form>
			<!-- /FORM = f_action -->
		</div><!-- /#id = action -->
		<div id="affaire" class="panel-affaire tab-pane fade"><!-- #id = affaire -->
			<h4>Affaires</h4>
			<?php include('modules_specifiques/_inc_affaires.php'); ?>
		</div><!-- /#id = affaire -->
 
	</div><!-- /tab content -->

En résumant :

Le premier menu à 4 liens, dont 2 sont communs au fab (qui lui, en a que deux).

Le premier menu fonctionne normalement en tout point. Or, le second, quand je clique sur un des deux liens, il reste bloqué sur ces deux liens (je ne peux naviguer que sur ces deux liens) et je perds la navigation sur le reste du site.

Si quelqu'un à une idée... Je suis preneur !

EDIT : Avant tout commentaire, les attributs style dans l'html sont temporaires.

Bonne journée à tous !

[JujuPomme]

Bon, avec le peu de compréhension de ce problème (mais c'était pas facile à expliquer ),

J'ai eu une aide du Tchat avec des suggestions, et il s'avère que l'une fonctionne.

Mon fab ayant 2 liens, et mon autre menu 4, j'ai fais le même nombre de liens par menus... Et ça fonctionne.

C'est certainement très sale pour une première approche, mais il suffit de tourner le tout avec un peu de javascript après...

En tout cas, merci à ceux qui ont jeter un coup d'oeil et qui ont prit le temps de se poser quelques questions

Bonne journée à tous !