28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème avec menu pour onglet "actif"

Bonjour à tous,

Je fais de nouveau appel à vous car j'ai un petit souci avec un menu "à onglets".
Il provient de la liste de liens mis à disposition par AlsaCreations :
http://css.maxdesign.com.au/listamatic/horizontal05.htm[/url]

En fait, je n'arrive pas à rendre un onglet, un seul à la fois", actif ! (la couleur change et l'onglet reste de cette couleur tant qu'il est "actif").
Pour que l'onglet devienne actif, je rajoute "this.id='current'" sur l'évènement onclick() du lien.
Le problème, je n'arrive pas à faire en sorte que lorsque par exemple je clique sur l'onglet numéro 2, le premier revienne en mode "non actif", donc avec une apparence normale.

Je vous mets mon code :


<div id="conf_menu_configuration">
	<ul id="listeMenu">
		<li id="">
			<a href="#" id="" onclick="this.id='current';afficheId('conf_affichage');cacheId('conf_emprunt');cacheId('conf_apropos');"><?php echo $sLang_A_Affichage; ?></a>
		</li>
		<li id="">
			<a href="#" id="" onclick="cacheId('conf_affichage');afficheId('conf_emprunt');cacheId('conf_apropos');"><?php echo $sLang_A_Emprunt; ?></a>
		</li>
		<li id="">
			<a href="#" id="" onclick="cacheId('conf_affichage');cacheId('conf_emprunt');afficheId('conf_apropos');"><?php echo $sLang_A_Propos; ?></a>
		</li>
	</ul>
</div>


Et voici le CSS (pour l'instant, c'est le même que celui de l'exemple) :


#conf_menu_configuration {
    margin: auto;
    margin-top: 10px;
    width: 900px;
}

#listeMenu {
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font-size: 12px;
    font-weight: bold;
}

#listeMenu li {
    list-style: none;
    margin: 0;
    display: inline;
}

#listeMenu li a {
    padding: 3px 1px;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    text-decoration: none;
}

#listeMenu li a:link {
    color: #448;
}

#listeMenu li a:visited {
    color: #667;
}

#listeMenu li a:hover {
    color: #000;
    background: #AAE;
    border-color: #227;
}

#listeMenu li a#current {
clear: both;
    background: white;
    border-bottom: 1px solid white;
}


Auriez-vous une idée pour me dépanner ?
Merci d'avance de votre aide.
Modifié par Eagle2000 (16 Sep 2006 - 16:02)
ben au lieu de jouer avec id/pas d'id, tu donnes des classes à tout le monde, et tu fais switcher les classes par le onclick, non ?
c'est pas clair, ma réponse ?? rohlaha... bon, voilà, en simplifié quand même :
le html

<a href="#" id="onglet1" class="ongletOn" onclick="lepetitjavascriptquitue(this.id);">
<a href="#" id="onglet2" class="ongletOff" onclick="lepetitjavascriptquitue(this.id);">

etc.
le css :

.ongletOn {
   // le css pour l'onglet alumé
}
.ongletOff {
   // le css pour l'onglet éteint
}


et dans le javascript :

function lepetitjavascriptquitue(onglet) {
var onglet1 = getElementById("onglet1");
var onglet2 = getElementById("onglet2");
var onglet3 = getElementById("onglet3");
switch (onglet) {
case "onglet1" :
 onglet1.class="ongletOn";
onglet2.class="ongletOff";
onglet3.class="ongletOff";
case "onglet2" :
etc.
}
// et puis là, tu peux rajouter tes appels aux script d'affichage des pages, ça évite d'avoir un onclick long comme le bras.
}

Bon, ça fait longtemps que j'ai pas fait de js, donc je suis pas tout à fait sûr de la validité de ce code, mais tu comprends le principe...
Modifié par mouloud (08 Sep 2006 - 09:48)
Bonjour,

@mouloud,
Merci d'éditer tes posts pour présenter lisiblement du code dans le forum comme demandé dans les règles.
Bonjour Mouloud.

Je suis vraiment désolé pour le retard dans la réponse, mais mon boulot me prend beaucoup de temps...

J'ai essayé ce que tu m'as conseillé. Effectivement ça parait bien plus logique que ce que j'avais fait !
Toutefois, j'ai de nouveau un souci.
J'ai bien créé les 2 classes "ongletOn" et "ongletOff" et j'ai appliqué une fonction du même style que celle que tu m'as indiquée.
Au premier chargement de ma page, le premier onglet est bien celui par défaut et est donc actif.
Par contre, quand je clique sur le second onglet (ou le 3ème, 4ème...), le premier repasse bien en inactif, mais seul le dernier onglet passe en actif et pas celui sur lequel j'ai cliqué !
J'ai bien essayé de "bidouiller" le code Javascript, mais je n'arrive pas à obtenir ce que je veux !

Une idée ?
Voici le javascript :

function activeMenu(onglet) {
	var onglet1 = document.getElementById("onglet1");
	var onglet2 = document.getElementById("onglet2");
	var onglet3 = document.getElementById("onglet3");
	var onglet4 = document.getElementById("onglet4");
	var onglet5 = document.getElementById("onglet5");
	var onglet6 = document.getElementById("onglet6");

	switch (onglet) {
		case "onglet1" :
			onglet1.className="ongletOn";
			onglet2.className="ongletOff";
			onglet3.className="ongletOff";
			onglet4.className="ongletOff";
			onglet5.className="ongletOff";
			onglet6.className="ongletOff";

		case "onglet2" :
			onglet1.className="ongletOff";
			onglet2.className="ongletOn";
			onglet3.className="ongletOff";
			onglet4.className="ongletOff";
			onglet5.className="ongletOff";
			onglet6.className="ongletOff";

		case "onglet3" :
			onglet1.className="ongletOff";
			onglet2.className="ongletOff";
			onglet3.className="ongletOn";
			onglet4.className="ongletOff";
			onglet5.className="ongletOff";
			onglet6.className="ongletOff";

		case "onglet4" :
			onglet1.className="ongletOff";
			onglet2.className="ongletOff";
			onglet3.className="ongletOff";
			onglet4.className="ongletOn";
			onglet5.className="ongletOff";
			onglet6.className="ongletOff";

		case "onglet5" :
			onglet1.className="ongletOff";
			onglet2.className="ongletOff";
			onglet3.className="ongletOff";
			onglet4.className="ongletOff";
			onglet5.className="ongletOn";
			onglet6.className="ongletOff";

		case "onglet6" :
			onglet1.className="ongletOff";
			onglet2.className="ongletOff";
			onglet3.className="ongletOff";
			onglet4.className="ongletOff";
			onglet5.className="ongletOff";
			onglet6.className="ongletOn";
	}
}


Et le code du menu :

<ul id="listeMenu">
	<li id="">
		<a href="#" id="onglet1" class="ongletOn" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu1; ?></a>
	</li>
	<li id="">
		<a href="#" id="onglet2" class="ongletOff" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu2; ?></a>
	</li>
	<li id="">
		<a href="#" id="onglet3" class="ongletOff" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu3; ?></a>
	</li>
	<li id="">
		<a href="#" id="onglet4" class="ongletOff" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu4; ?></a>
	</li>
	<li id="">
		<a href="#" id="onglet5" class="ongletOff" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu5; ?></a>
	</li>
	<li id="">
		<a href="#" id="onglet6" class="ongletOff" onclick="activeMenu(this.id);"><?php echo $sLang_A_Menu6; ?></a>
	</li>
</ul>


Merci encore pour ton aide.
Bonjour Ghost.

Heu... c'est-à-dire ?
Effectivement, ça pourrait m'intéresser...
A la base, bien que travaillant dans l'informatique, je ne suis absolument pas développeur (c'est tout "autodidacte").
Et comme j'ai pu le voir auprès de différents sites, dont celui du W3C, aujourd'hui, un "bon" site est un site qui sépare normalement contenu et présentation, et passe donc par le biais des CSS.
Du coup j'ai préféré partir directement sur des bases "normalisées" et j'ai donc privilégié un menu CSS+javascript pour modifier ça facilement si besoin par la suite.

Toutefois, je me rends aussi compte que finalement, même les sites de "grosses sociétés" ne respectent pas forcément ces règles parfois très compliquées à mettre en oeuvre !

Et pour ma part, l'application que je suis en train de faire est dans un premier temps à usage personnel.
Je pense que je la proposerai au téléchargement plus tard, pas pour dire voilà c'est le top (heureusement que non Smiley biggrin et de toute façon ce sera loin d'en être le cas je pense ! Smiley confused Smiley smile , mais plus pour savoir réellement ce que vaut ma façon de développer et donc pouvoir m'améliorer !)

Bref, pour en revenir à mes moutons Smiley cligne , en gros tu fais comment en PHP ?
Bonjour,

Si j'ai bien compris tu utilises le javascript juste pour marquer tes onglets ?
Dans l'affirmative compte tenu que ton code est déjà sous php, je ne vois pas l'interêt ! Au contraire tu y perds en accessibilité.
Jete un oeil sur ce bout de code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title></title> 
   <meta name="TITLE" content="" />
   <meta name="ROBOTS" content="none" />

</head>

<style>
#conf_menu_configuration {
    margin: auto;
    margin-top: 10px;
    width: 900px;
}

#listeMenu {
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font-size: 12px;
    font-weight: bold;
}

#listeMenu li {
    list-style: none;
    margin: 0;
    display: inline;
}

#listeMenu li a {
    padding: 3px 1px;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE;
    text-decoration: none;
}

#listeMenu li a:link {
    color: #448;
}

#listeMenu li a:visited {
    color: #667;
}

#listeMenu li a:hover {
    color: #000;
    background: #AAE;
    border-color: #227;
}

 #listeMenu li .courant {  /* classe rajoutée */
    color: #000;
    background: #AAE;
    border-color: #227;
}

#listeMenu li a#current {
    clear: both;
    background: white;
    border-bottom: 1px solid white;
}

</style>
</head>
<body> 
<?php 
// affectation variables pour test
$sLang_A_Affichage='affichage';
$sLang_A_Emprunt='emprunt';
$sLang_A_Propos='A propos';
// page en cours emprunt. Pour une autre page, permuter les variables par exemple pour la page a_propos : $affichage_courant='';$emprunt_courant='';$a_propos_courant='class="courant"'; 
$affichage_courant='';$a_propos_courant='';
$emprunt_courant='class="courant"'; 

?>
<div id="conf_menu_configuration">
	<ul id="listeMenu">
		<li >
			<a href="#"<?php echo $affichage_courant.'>'.$sLang_A_Affichage; ?></a>
		</li>
		<li >
			<a href="#" <?php echo $emprunt_courant.'>'.$sLang_A_Emprunt; ?></a>
		</li>
		<li >
			<a href="#" <?php echo $a_propos_courant.'>'.$sLang_A_Propos; ?></a>
		</li>
	</ul>

</div>
</body>
</html>


Il y a sûrement mieux mais c'est ce que j'utilise, si ça peut être utile.
Salut Ghost.

Je te prie de m'excuser pour le retard dans ma réponse (comme je te l'ai dit plus avant, je suis très pris par mon boulot...).

J'ai regardé ton bout de code.
Je pense que je vais faire comme ça car ça m'évitera du javascript.

Merci encore.
Je considère donc mon post clos.
Sujet clos
Aller à