18041 sujets

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

Menu vertical et l'état "visited" !?

merci pour cette première réponse !
Lorsque je parlais de "visited" c'etait donc l'état a:visited...
Mais en réalité il se trouve que ce qui serait encore plus approprié à mes besoins,
c'est a:active qui je crois correspond au fait que lorsque l'on clique sur une rubrique pour aller sur une page, et bien cette rubrique prend une couleur particulière afin de savoir laquelle on est en train de regarder ?
Mais encore faut-il que le menu conserve cet état d'une page à l'autre.
Suis-je clair ?
Merci pour ces aiguillages !
Mais je suis un peu neuneu, et je ne suis pas certain de pouvoir mettre en pratique les exemples du forum.
Voici ma situation personnelle :

Mon code HTML
<body>
<ul>
<li class="menu" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><a href="index.php">WELCOME</a></li>
</ul>


<li class="menu" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">REPORTAGES</li>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="/modules/galerie10/">01</a></li>
<li><a href="/modules/galerie10/">02</a></li>
<li>03</li>
</ul>

<li class="menu" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">SPORTS</li>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li>01</li>
<li>02</li>
</ul>
</ul>
</body>


Mon CSS :

ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
color: #fff;
}


.menu {
clear: both; /* pour obliger le retour à la ligne des menus */
margin-top: 5px;
width: 150px;
height: 20px;
border: 0px solid #ccc;
text-align: left;
font-size: 11px;
font-weight: normal;
}


#smenu1, #smenu2, #smenu3 {
float: left;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
font-size: 11px;
padding: 5px 0 5px 0;
width: 150px;
}


Et voici le lien pour aller voir mon menu test :
http://www.chantal-sanglier.com/modules/galerie10

Le cahier des charges est :
Menu et sous menu en blanc verdana 11px
link a en bleu #003399
Et l'option active pour les rubrique en cours de consultation : #666

Et le top, serait que le sous-menu correspondant à la page consultée, reste ouvert (visible) ?!
Mais là, je sais, c'est peut-être trop demandé ?...
Encore un grand merci pour votre aide ! Smiley smile
Modifié par Florent V. (31 Oct 2007 - 12:48)
tungsten a écrit :
Mais là, je sais, c'est peut-être trop demandé ?

Ben disons que c'est à toi de voir, car c'est toi qui a (peut-être) la main sur cet aspect.

En gros, il s'agit de générer un code HTML légèrement différent pour le menu suivant la page chargée.

Si je suis sur la page d'accueil:
<ul>
<li class="encours">Welcome</a>
<li>Reportages
	<ul>
		<li>01</li>
		<li>02</li>
		<li>03</li>
	</ul>
</li>
<li>Sports
	<ul>
		<li>01</li>
		<li>02</li>
	</ul>
</li>
</ul>

Si je suis sur la page «02» dans la rubrique «Reportages»:
<ul>
<li>Welcome</a>
<li>Reportages
	<ul>
		<li>01</li>
		<li class="encours">02</li>
		<li>03</li>
	</ul>
</li>
<li>Sports
	<ul>
		<li>01</li>
		<li>02</li>
	</ul>
</li>
</ul>

Si tes pages sont générées automatiquement, ça relève de la programmation...
C'est effectivement une solution que de générer un menu différent pour chaque page, mais cela semble archaïque comme technique et surtout absolument ingérable pour le client qui va administrer une vingtaine de menus à chaque fois qu'il veut modifier une rubrique !!?

N'y aurait-il donc aucun moyen d'intégrer cela dès le CSS, afin de l'appliquer à toutes les pages en même temps ?
tungsten a écrit :
C'est effectivement une solution que de générer un menu différent pour chaque page, mais cela semble archaïque comme technique et surtout absolument ingérable pour le client qui va administrer une vingtaine de menus à chaque fois qu'il veut modifier une rubrique !!?

N'y aurait-il donc aucun moyen d'intégrer cela dès le CSS, afin de l'appliquer à toutes les pages en même temps ?

CSS n'a pas de moyen de savoir quel est l'URL de la page en cours, donc impossible de savoir si un lien pointe vers la page en cours, et encore moins s'il pointe vers la rubrique en cours. Donc non, pas de solution en CSS.

CSS se contente de mettre en forme le document existant. Si l'information "ce lien correspond à la page en cours ou à la rubrique en cours" n'est présente nulle part dans le code, il ne peut pas le deviner, et ne pourra pas le calculer (vu qu'il ne s'agit pas d'un langage de programmation).

Solution: coder un seul menu, mais dans un langage de programmation, en intégrant la problématique du "il faut une classe spéciale pour certains types de lien").
Là, c'est de la programmation, et une fois en place le client n'a pas besoin d'y toucher, même s'il rajoute ou supprime des pages à son site.

Problème: comme tu utilises un CMS (XOOPS, il me semble), il faudra probablement que ce mécanisme soit intégré au CMS en question.
Solution: poser la question sur le forum de support francophone (ou anglophone, why not...) du CMS utilisé.

Bonne continuation. Smiley smile
Merci de m'éclaircir sur le sujet !
Cependant le problème reste entier, car toujours pas de solution évidente.
Et qu'en est-il de ton intervention de ce sujet que j'ai chopé sur le forum ?
http://forum.alsacreations.com/topic-1-21667-1-Marquer-la-page-en-cours-de-consultation.html[/url]
Puis-je adapter cette technique pour mes besoins ?
En regardant ton code :
<li><a href="page2.html" class="en-cours">Deuxième page</a></li>
cela impliquerait qu'il faille créer une class particulière "en-cours" ?
J'ai effectivement déjà posé la question sur le forum de xoops France depuis 3 jours mais toujours pas de réponse...
tungsten a écrit :
cela impliquerait qu'il faille créer une class particulière "en-cours" ?

Oui.

Sinon, côté CSS, on peut envisager d'utiliser un sélecteur d'attribut généré dans la page elle-même (dans un élément style par exemple), pour repérer le ou les liens qui pointeraient très précisément vers la page en cours:
<style type="text/css">
#menu a[href="[#red]/marubrique/mapage.html[/#]"] {color: green;}
</style>

La partie en rouge dans le code ci-dessus devra être générée en PHP, par exemple via la variable $_SERVER["REQUEST_URI"].

Si correctement mis en place, ça sera compatible tous navigateurs modernes, dont IE7 (mais pas IE6).
Sujet clos
Aller à