Page 1 sur 1

menu dynamique

Posté : 21 nov. 2013, 12:42
par Théo
Je vous décris mon souci:

j'ai une BDD avec plusieurs tables dont une table categorie(idCAteg, nomCateg)

Pour le moment j'ai codé mon menu en HTML pure de la façon suivante (un logo avec un nom en dessous pour chacune des 3 catégories de mon menu) :
<div class="main-nav">				
	<ul>
		<li>
			<a href="#"> <img src="/images/logo1.png" alt="" /> <span>CATEG 1</span> </a>
               </li>
		<li>
			<a href="#"> <img src="/images/logo2.png" alt="" /> <span>CATEG 2</span> </a>
		</li>
		<li>
			<a href="#"> <img src="/images/logo3.png" alt="" /> <span>CATEG 3</span> </a>
		</li>
	</ul>
</div>

Je cherche maintenant à le transformer en menu dynamique avec une petite particularité:

J'ai une page index.php qui inclut mon menu.php. Ce menu.php comporte 3 logos (ce sont 3 images indépendantes de couleur grise)
J'ai 3 autres logos (de couleurs rouge) qui me servent à changer l'apparence du logo lorsque je clique dessus et que j'atterri
sur la page qui lui correspond.
/!\ CEPENDANT : je n'ai pas une page dédiée à chacune de mes catégories. C'est mon index.php qui change dynamiquement le contenu de chaque catégorie.

Ce que je souhaite c'est donc de faire en sorte que lorsque je clique sur un de ces 3 logos (logos gris) et que j'atteri "sur la page" lui correspondant, ce logo soit différent (logo rouge) des 2 autres et qu'il le reste tant que l'utilisateur ne clique pas sur un autre logo.

Voici un exemple: http://www.cssplay.co.uk/layouts/
Je voudrais réaliser à peu près la même chose en php, html et css, à l'exception que mon hover doit être différent pour chacune des catégories.

Merci

Re: menu dynamique

Posté : 21 nov. 2013, 16:49
par soft1ne
Dans l'exemple que tu fournis, dans l'URL tu vois Layout et si tu change de page, tu vois dans l'url le label du lien du menu, c'est comme ca qu'il sais sur quelle page il est.

Dans ton cas tu doit passer en argument un ID correspondat a la page courante.

Exemple :

http://www.monsite.fr/index.php?categ=1
// ceci correspondra a la categorie 1

et ensuite tu fait un :
<div class="main-nav">                         
        <ul>
                <li class="<?php echo (isset($_GET['categ']) && ($_GET['categ'] == 1))?'actif':'nonActif'; ?>">
                        <a href="#"> <img src="/images/logo1.png" alt="" /> <span>CATEG 1</span> </a>
               </li>
                <li>
                        <a href="#"> <img src="/images/logo2.png" alt="" /> <span>CATEG 2</span> </a>
                </li>
                <li>
                        <a href="#"> <img src="/images/logo3.png" alt="" /> <span>CATEG 3</span> </a>
                </li>
        </ul>
</div>