28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je viens requérir votre aide car je me suis perdu dans un menu un peu trop compliqué pour moi.
Je cherche à réaliser un menu du type suivant:
Ce menu, généré dynamiquement, affiche toutes les pages enfant d'une page de "top-level" qui fait office de catégorie. Ca, ca va, Wordpress me le fait.
Mais ce menu doit n'afficher que les enfants de 2ème niveau, ainsi que les frères et enfants de la page active.

Voici un exemple concret :
https://www.univ-lille3.fr/universite/
En haut, on a les pages de top-level (université, etudes, etc) et à gauche, on a les enfants de la page top-level sur laquelle on a cliqué.
Si je rentre dans "découvrir l'université", j'ai ses enfants qui s'affichent, mais bien sûr pas les enfants des autres. Je garde le même menu si je rendre dans "Historique de Lille 3".
Je recherche donc une solution pour obtenir un menu de ce style. Le soucis étant que mon menu est généré dynamiquement, je ne sais donc pas comment agir sur sa structure et ses classes. J'ai donc la structure suivante :
<ul id="menu-rubrique">
	<li><a href="">Formations</a></li>
	<li class="page_item page_item_has_children current_page_item"><a href="">Parent avec enfants, page active</a>
		<ul class="children">
			<li class="page_item"><a href="">Enfant</a></li>
			<li class="page_item"><a href="">Enfant</a></li>
			<li class="page_item"><a href="">Enfant</a></li>
		</ul>
	</li>
	<li class="page_item"><a href="">Parent sans enfants</a></li>
	<li class="page_item page_item_has_children"><a href="">Parent avec enfants</a>
		<ul class="children">
				<li class="page_item"><a href="">Enfant</a></li>
				<li class="page_item"><a href="">Enfant</a></li>
				<li class="page_item"><a href="">Enfant</a></li>
		</ul>
	</li>
	<li class="page_item page_item_has_children"><a href="">Parent avec petits enfants</a>
		<ul class="children">
			<li class="page_item"><a href="">Enfant</a></li>
			<li class="page_item"><a href="">Enfant</a>
				<ul class="children">
					<li class="page_item"><a href="">Petit Enfant</a></li>
					<li class="page_item"><a href="">Petit Enfant</a></li>
					<li class="page_item"><a href="">Petit Enfant</a></li>
				</ul>
			</li>
			<li class="page_item"><a href="">Enfant</a></li>
		</ul>
	</li>
</ul>

J'ai essayé de faire ca avec du display:none, mais je cache tous les enfants sauf le lien actif.
J'ai tenté de me dépatouiller avec du JQuery et les selecteurs .parents() mais je n'arrive toujours pas à sélectionner les frères...
Quelqu'un aurait-il une astuce quelconque?

D'avance un grand merci...
Modifié par Seiden (06 Mar 2015 - 15:18)