Menu actif en CSS

Je souhaiterais savoir s'il existe un moyen purement CSS sur le menu actif.
La solution pour un menu simple sans sous-menu peut se faire en Php mais c'est assez lourd à maintenir je trouve pour des menus importants.

Pour mieux faire comprendre, voici un code très simple.
Code CSS:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

html, body { margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; } ul#vermenu { width:100px; margin:0; padding:0; list-style:none; border:none; } ul#vermenu li:hover>* { display:block; } ul#vermenu li:hover { position:relative; } ul#vermenu li { display:block; white-space:nowrap; margin:1px; margin-top:5px; } ul#vermenu a { display:block; vertical-align:middle; text-align:left; text-decoration:none; color:#fff; margin:0; padding:5px; background-color:#69F; } ul#vermenu li:hover>a { background-color:#00C; color:#fff; text-decoration:underline; }   ul#vermenu li.active a { background-color:#F60; } ul#vermenu li.active:hover a { text-decoration: none; }

---

Et le code html:

Code:

---

1 2 3 4 5 6

<ul id="vermenu"> <li><a href="#" title="">menu1</a></li> <li class="active"><a href="#" title="">menu2</a></li> <li><a href="#" title="">menu3</a></li> <li><a href="#" title="">menu4</a></li> </ul>

---

Il s'agit donc simplement d'indiquer par une couleur ou autre, quelle est la page active.

Le résultat dans: http://codepen.io/anon/pen/amvCH
Evidement dans l'exemple la page active est toujours la même.
Si quelqu'un a une idée, merci d'avance.

Citation:

---

Envoyé par JefReb

La solution pour un menu simple sans sous-menu peut se faire en Php mais c'est assez lourd à maintenir je trouve pour des menus importants.

---

Bonjour,
vous avez des menus-simple sans sous-menu, mais php est pas bon pour vous , pour des menus importants ?

Vous demandez une gestion dynamique du menu, donc normalement il faut passer par du code coté serveur ou client.

Il est impossible de répondre car on a aucune idée de la structure du site. Par exemple, avec php une page categorie, ou produit va être utilisée facilement dans 99 menus différents, donc le même page physique a 99 menus différents!

Une solution, la plus simple ?

c'est de mettre un id a chaque menu

Code:

---

1 2	<li id="m1"><a href="#" title="">menu3</a></li> <li id="m2"><a href="#" title="">menu4</a></li>

---

et en début de chaque page générer un code css inline avec une fonction (php..js)

Code:

---

1 2 3 4 5 6

<?php function setMenuActif($id) { echo '<style>#m'.$id.' { background-color:#000; }</style>'; } echo setmenuActif(44); ?>

---

ou bien sur si une page est statique, simplement écrire ce code css ou une function js :)

Bonjour,

il y a la solution en Javascript sinon.

Le sujet est souvent abordé sur le forum...

Sur google vous aurez des résultats en utilisant la requête suivante :"menu highlight css" ou "menu highlight current page"

Un tuto de DVP pour expliquer le fonctionnement : Créer une boîte d'onglets avec CSS et jQuery

Merci pour les orientations.
Je vais creuser. La solution de papajoker me plait aussi.
Je vais voir dans les sujet aborder dans les forum par rodolphebrd.
Je clos le topic, inutile de vous faire perdre du temps.