Discussion :

[devlm]

Bonjour,

j'ai actuellement des onglets 9 ou 14 dans certains cas,
dans le cas des 14 onglets, ils ne rentrent pas dans l'interface fixée, je souhaiterais ajouter en fin de menu une image permettant au clic de glisser sur la droite ou de déplier l'intégralité du menu.

Visuel actuel :
www.arociel-logiciel.com/demo/20130521-1.PNG

Visuel souhaité par le client avec à l'extrémité droite le bouton image permettant de déplier les onglets:
www.arociel-logiciel.com/demo/20130521-2.PNG

Avez-vous une idée de la manière de réaliser cela :

Voici le HTML :

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
<div id="menu">
	<ul>
 
  	<li class="">
		<a class="onglet" style="z-index: -1" id="bout1" href="#">Données générales</a>
	</li><li class="">
		<a class="onglet" style="z-index: -2" id="bout2" href="#">Banques</a>
	</li><li class="">
		<a class="onglet" style="z-index: -3" id="bout3" href="#">Acquéreur</a>
	</li><li class="">
		<a class="onglet" style="z-index: -4" id="bout4" href="#">Description Bien</a>
	</li><li class="">
		<a class="onglet" style="z-index: -5" id="bout5" href="#">Vendeur</a>
	</li><li class="">
		<a class="onglet" style="z-index: -6" id="bout6" href="#">Bail</a>
	</li><li class="">
		<a class="onglet" style="z-index: -7" id="bout7" href="#">Comptabilité</a>
	</li><li class="">
		<a class="onglet" style="z-index: -8" id="bout8" href="#">Contrats</a>
	</li><li class="">
		<a class="onglet" style="z-index: -9" id="bout9" href="#">Social</a>
	</li><li class="current">
		<a class="onglet" style="z-index: -10" id="bout10" href="#">Métiers</a>
	</li><li class="">
		<a class="onglet" style="z-index: -11" id="bout11" href="#">Communication</a>
	</li><li class="">
		<a class="onglet" style="z-index: -12" id="bout12" href="#">Suivi</a>
	</li>
	</ul>
</div>

et le CSS :

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
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
/*****************************************/
/*			MENU            			 */
/*****************************************/	
 
	#menu {
	  float:left;
	  position:relative;
	  z-index:1;
	  }
	#menu ul {
	  margin:0;
	  list-style:none;
	  }
	#menu li {
	    float:left;
	    margin-right:0.5em;
	    padding:0 0 0 1em;
		background-color: #e4e2e0;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F2F1', endColorstr='#e4e2e0'); /* for IE */
		background-image: -moz-linear-gradient(center top , #F1F2F1, #e4e2e0);
		border-color: #FFFFFF;
		 border-color: #e4e2e0\9;
		border-radius: 0.4em 0.4em 0px 0px;
		behavior: url(/PIE.htc);
		/*border-style: solid;
		border-width: 0.2em;*/
		-moz-box-shadow: 0 0.3em 0.3em rgba(255, 255, 255, 0.1), 0 0.1em 0 #BBBBBB, 0 0.1em 0 #AAAAAA, 0 0.1em 0.1em #444444;
		-webkit-box-shadow: 0 0.2em 0.2em rgba(255, 255, 255, 0.1), 0 0.1em 0 #BBBBBB, 0 0.1em 0 #AAAAAA, 0 0.1em 0.1em #444444;
		box-shadow: 0 0.2em 0.2em rgba(255, 255, 255, 0.1), 0 0.1em 0 #BBBBBB, 0 0.1em 0 #AAAAAA, 0 0.1em 0.1em #444444;	  
	  }
	#menu a {
	  float:left;
	  display:block;
	  padding:0.5em 0.8em 0.4em 0em;
	  text-decoration:none;
	  font-size:1.2em;
	  font-weight:bold;
	  color:#000000;
	  }
	/* Commented Backslash Hack
	   hides rule from IE5-Mac \*/
	#menu li a {float:none;}
	/* End IE5-Mac hack */
	#menu a:hover {
	  color:#64625f;
	  }
 
	#menu .current {
	  background-image:url("../images/fiche-onglet-conteneur-hover.png");
	  }

[rodolphebrd]

Bonjour,

les liens vers les images sont morts...

[devlm]

c'est corrigé, mes excuses

[rodolphebrd]

C'est un comportement comme ceci?:

http://tympanus.net/codrops/2013/03/...rop-down-menu/
http://jsfiddle.net/RguMu/
http://toddmotto.com/flawless-clicka...wn-navigation/

[devlm]

Aucun des liens envoyés ne convient, il faut non pas un dépliement vers le bas, mais soit un dépliement vers la droite, soit un glisser vers la droite pour afficher les autres onglets.

[rodolphebrd]

Je mentionnais le comportement...

Quelque soit la direction c'est à adapter, non?