18041 sujets

Questions générales et questions de débutants

Menu

Bonjour a tous
Je voudrais adapter un menu horizontal en css sur mon site, je l ai recupere de ce site http://webdesigninfo.wordpress.com/. Et voici le code :

.menub{
	position:relative;
	padding:0 0 0 34px;
	margin:0 auto 0 auto;
	background:url(menub_bg.png) repeat-x;
	*background:url(menub_bg.gif) repeat-x;/* for IE browser due to png hacks */
	height:46px;
	list-style:none;
	width:92%;
}
.menub li{
	float:left;
}
.menub li a{
	float:left;
	display:block;
	color:#000;
	text-decoration:none;
	font-family:sans-serif;
	font-size:13px;
	font-weight:bold;
	padding:0 0 0 18px;
	height:46px;
	line-height:46px;
	text-align:center;
	cursor:pointer;	
}
.menub li a b{
	float:left;
	display:block;
	padding:0 36px 0 18px;
}
.menub li.current a{
	color:#fff;
	background:url(menub_hover_left.png) no-repeat;	
	*background:url(menub_hover_left.gif) no-repeat;/* for IE browser due to png hacks */
	background-position:left;
}
.menub li.current a b{
	color:#fff;
	background:url(menub_hover_right.png) no-repeat right top;	
	*background:url(menub_hover_right.gif) no-repeat right top;/* for IE browser due to png hacks */
}
.menub li a:hover{
	color:#fff;
	background:url(menub_hover_left.png) no-repeat;
	*background:url(menub_hover_left.gif) no-repeat;/* for IE browser due to png hacks */
	background-position:left;
}
.menub li a:hover b{
	color:#fff;
	background:url(menub_hover_right.png) no-repeat right top;
	*background:url(menub_hover_right.gif) no-repeat right top;/* for IE browser due to png hacks */
}


J 'ai un problem avec le "current" quand je clique sur un lien l'onglet correspondant a la page qui s'affiche ne se distingue pas des autres ?
Quelque m a echape ? Je ne suis pas du tout expert en css
Merci de tout conseil
yaz
Bonjour,

yazyaz a écrit :
J 'ai un problem avec le "current" quand je clique sur un lien l'onglet correspondant a la page qui s'affiche ne se distingue pas des autres ?

Dans ton code HTML, tu as bien une classe "current" pour marquer le li correspondant à la page ou rubrique en cours?

Si non, le problème vient de là. Smiley cligne 

<ul class="menub">
	<li class="current"><a href="menub.html"><b>Home</b></a></li>
	<li><a href="menub1.html"><b>About Me</b></a></li>
	<li><a href="menub2.html"><b>Show Case</b></a></li>	
	<li><a href="menub3.html"><b>Web 2.0</b></a></li>	
	<li><a href="menub4.html"><b>Web Templates</b></a></li>	
	<li><a href="menub5.html"><b>Contact Me</b></a></li>			
</ul>

Das le code au dessus, j 'ai effectivement un current (premier len) mais comment faire pour que cet effet sur les autres liens (mis a part rajouter class="current" sur chaque lien..). Je veux faire en sorte que quand je clique sur un lien, une page s'affiche avec l'effet determine par current s'applique au lien sur correspondant a la page en question.
merci de votre aide
yaz
Que les pages soient faites une par une en HTML, ou générées via PHP ou autre langage côté serveur, chaque page du site est un document HTML spécifique. Donc chaque document spécifique devrait avoir sa classe "current" sur le bon élément.

Si tu as tout fait en HTML directement, il faut éditer chaque page.
Si ton site est généré en PHP ou autre langage côté serveur, il faut prévoir de générer la classe current pour le bon li.

Pas de solution miracle ici.
Resalut,
J' ai reussi a avoir l'affichage desire en definissant ma classe selon les conditions ecrites dans le code ci dessous. Mais cela ne risque t il pas d'alourdir le chargement de ma page 

<li class="<?php 		if(!preg_match("/\/page1.php/",$_SERVER['SCRIPT_NAME'])&& !preg_match("/\/page1-1.php/",$_SERVER['SCRIPT_NAME'])&& !preg_match("/\/page1-2.php/",$_SERVER['SCRIPT_NAME']))
				{ echo "";} 
				else
				{ echo "current"; }
				?>
				">

Si je dois faire ce type de requete pour chaque lien de mon menu
cela risque d'etre lourd a la fin...
un conseil ? un avis ? Merci encore de votre aide Smiley biggrin
Yaz
yazyaz a écrit :
Si je dois faire ce type de requete pour chaque lien de mon menu
cela risque d'etre lourd a la fin...

Ça rendra surtout ton code source plus difficile à lire. Mais par contre le serveur devrait se débrouiller sans problème avec ce genre de chose (ça calcule vite, un ordinateur...).

Tu pourrais rendre ton code plus lisible en utilisant une boucle, ou bien définir une fonction PHP qui serait appelé à chaque fois.
Là, ça demande quelques connaissances de base (et un peu plus...) en PHP.
Sujet clos
Aller à