28172 sujets

CSS et mise en forme, CSS3

Menu liste onglet supplémentaire au dessus

Bonjour,

Voila, je me casse la tête pour réussir à faire une sorte de menu sur deux lignes mais où la deuxième ligne vient se mettre au dessus.

Je veux que ça ressemble un peu à la gestion des onglets des fenêtre de propriété de Windows sauf que la taille et le nombre d'onglet sont variable. Donc de base, c'est sur une ligne ( pas de problème ) mais si ça devient trop long, les onglets suivant viennent faire une deuxième ligne. J'ai bien se comportement mais le problème est que cette deuxième ligne viens se placer en dessous de la première ( ce qui est le comportement normal ), mais voila, j'aimerai qu'elle vienne se placer au dessus...

J'utilise une liste pour faire mon menu.

Ce que je cherche à réaliser est un menu sous forme d'onglet se chevauchant. Au survole, l'onglet vient prendre la place qu'il lui faut pour afficher son contenu. A priori j'en suis pas loin, me manque plus qu'a régler cette histoire de deuxième ligne. ( et troisième, quatrième, etc mais je doute que l'utilisateur en arrive jusque là ^^ )

Me semble pas nécessaire de mettre du code, donc j'en ai pas mis. Mais si vous en voulez, vous en aurait ;o)

D'avance merci pour vos idées ^^
Modifié par MrWhite (09 Jul 2013 - 16:05)
Alors voici les codes ^^ :

HTML :

<div class="cont_menu_fen bordure">
	<ul class="onglet bordure">
		<li><a href="">news</a></li>
		<li><a href="">Category name</a></li>
		<li><a href="">testtt</a></li>
	</ul>
			
	<div class="fenetre clear bordure">
		zer
	</div>
	<hr class="clear">
</div>


Le css :

div.cont_menu_fen{
	text-align:right;
}
ul.onglet{
	float:right;
	margin: 0px 10px 0px 10px;
	padding: 0px 0px 0px 0px;
	list-style-type:none;
	text-align:right;
}
ul.onglet li {
	position:relative;
	float:left;
	max-width:180px;
	height:30px;
	line-height:30px;
	overflow:hidden;
	background: transparent url(../img/ongletvert.png) no-repeat;
	margin:  0px 0px 0px -25px;
	padding: 0px 0px 0px 0px;
	border: solid red 1px;
	z-index:49;
}
ul.onglet li a {
	line-height:30px;
	background-color: #93bf3a;
	font: bolder 11pt verdana; 
	color:#fff;
	text-decoration:none;
	margin:  0px 0px 0px 22px;
	padding: 50px 0px 50px 0px;
	z-index:49;
}
ul.onglet li.marqueur { 
	width:auto;
	max-width:none;
	float:left;
	height:30px;
	line-height:30px;
	overflow:hidden;
	background: transparent url(../img/ongletgris.png) no-repeat;
	margin:  0px 0px 0px -25px;
	padding: 0px 0px 0px 0px;
	border: solid red 1px;
}
ul.onglet li.marqueur a {
	line-height:30px;
	background-color: #bdbcbc;
	font: bolder 11pt verdana; 
	color:#fff;
	text-decoration:none;
	margin:  0px 0px 0px 22px;
	padding: 50px 22px 50px 0px;
}
ul.onglet li:hover {
	position:relative;
	max-width:none;
	z-index:50;
}

div.fenetre{
	float:right;
	margin: 0px 10px 0px 10px;
	padding: 0px 0px 0px 0px;
}


.clear{
	clear: both;
}

.bordure{
	border: solid green 1px;
}



Le bordure sont juste là pour bien voir le comportement des blocks.

Outre le fait de faire s'afficher la deuxième ligne au dessus, j'ai encore des problème d'alignement lorsque la deuxième ligne s'affiche ( tout vien se coller à gauche plutôt qu'a droite à se moment là ). Et j'aimerai que les onglets ai une taille fixe quand ils sont 'rangé' et au survole, il passe au dessus des autres et prenne la largeur necessaire pour afficher tout leur texte, et le problème est que lors du changement de taille, ils s'agrandisse vers la gauche, ce qui fait bouger tout le reste des onglets. De plus, je devrai sans doute gérer aussi différemment le 'premier' pour qu'il ai dans tout les cas sa taille max.

Enfin voila un peu l'idée.
Sujet clos
Aller à