[Résolu] Identifiant «en cours» dans le menu pour un site dynamique

Question

ezora

26 Nov 2009 à 12:53

Bonjour,

Je cherche à créer un menu ou quand on clique sur un des onglets celui-ci reste appuyer afin que la personne sache dans quel partie du site elle est.

Je ne sais pas si je suis très très clair...

J'ai trouvé quelques codes en php mais, je ne comprends pas du tout.

Si une personne pouvait m'expliquer comment faire ce type de menu svp!

Merci par avance.

Je vous mets ici le menu simplifier dans un fichier zip qui contiens le fichier HTML et CSS ainsi que le dossier images.

Puis que le code HTML et CSS en direct :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css"  />
</head>

<body>
        <!--** MENU **-->
 		<div id="menu">
        	<div id="menu_haut_gauche"></div>
            <div id="menu_haut"></div>
            <div id="menu_haut_droite"></div>
            <div id="menu_gauche"></div>
            <div id="menu_bloc_bouttons">
            	<div id="menu_boutton_appliques"><a href="#"></a></div>
              		<div class="menu_separation"></div>
                <div id="menu_boutton_plafonniers"><a href="#"></a></div>
               		<div class="menu_separation"></div>
                <div id="menu_boutton_suspensions"><a href="#"></a></div>
                	<div class="menu_separation"></div>
                <div id="menu_boutton_lampadaires"><a href="#"></a></div>
                	<div class="menu_separation"></div>
                <div id="menu_boutton_leds"><a href="#"></a></div>
                	<div class="menu_separation"></div>
                <div id="menu_boutton_exterieurs"><a href="#"></a></div>
            </div>
            <div id="menu_droite"></div>
            <div id="menu_bas_gauche"></div>
            <div id="menu_bas"></div>
            <div id="menu_bas_droite"></div>
 		</div>
        <!--** FIN DU MENU **-->
</body>

/* ----------------------------- */
/*           MENU                */
/* ----------------------------- */
/* Mise en forme du menu */
#menu { width:764px; height:auto; float:left; margin-top:2px; }
#menu_haut_gauche { width:8px; height:2px; float:left; background-image:url(images/design/menu_haut_gauche.gif); overflow:hidden; }
#menu_haut { width:748px; height:2px; float:left; background-image:url(images/design/menu_haut.gif); overflow:hidden; }
#menu_haut_droite { width:8px; height:2px; float:left; background-image:url(images/design/menu_haut_droite.gif); overflow:hidden; }
#menu_gauche { width:3px; height:35px; float:left; background-image:url(images/design/menu_gauche.gif); }
#menu_droite { width:3px; height:35px; float:left; background-image:url(images/design/menu_droite.gif); }
#menu_bas_gauche { width:8px; height:2px; float:left; background-image:url(images/design/menu_bas_gauche.gif); overflow:hidden; }
#menu_bas { width:748px; height:2px; float:left; background-image:url(images/design/menu_bas.gif); overflow:hidden; }
#menu_bas_droite { width:8px; height:2px; float:left; background-image:url(images/design/menu_bas_droite.gif); overflow:hidden; }
/* Fin de la mise en forme du menu */
/** Bloc Boutton **/
#menu_bloc_bouttons { width:758px; height:35px; float:left; }
.menu_separation { width:1px; height:35px; float:left; background-image:url(images/design/menu_separation.gif); }
/* Boutton appliques */
#menu_boutton_appliques a { width:126px; height:35px; float:left; background:url(images/design/menu_boutton_appliques.gif); }
#menu_boutton_appliques a:hover { background-position: 0 -35px; }
#menu_boutton_appliques a:active { background-position: 0 -70px; }
/* Fin boutton appliques */
/* Boutton plafonniers */
#menu_boutton_plafonniers a { width:130px; height:35px; float:left; background:url(images/design/menu_boutton_plafonniers.gif); }
#menu_boutton_plafonniers a:hover { background-position: 0 -35px; }
#menu_boutton_plafonniers a:active { background-position: 0 -70px; }
/* Fin boutton plafonniers */
/* Boutton suspensions */
#menu_boutton_suspensions a { width:120px; height:35px; float:left; background:url(images/design/menu_boutton_suspensions.gif); }
#menu_boutton_suspensions a:hover { background-position: 0 -35px; }
#menu_boutton_suspensions a:active { background-position: 0 -70px; }
/* Fin boutton suspensions */
/* Boutton lampadaires */
#menu_boutton_lampadaires a { width:125px; height:35px; float:left; background:url(images/design/menu_boutton_lampadaires.gif); }
#menu_boutton_lampadaires a:hover { background-position: 0 -35px; }
#menu_boutton_lampadaires a:active { background-position: 0 -70px; }
/* Fin boutton lampadaires */
/* Boutton leds */
#menu_boutton_leds a { width:125px; height:35px; float:left; background:url(images/design/menu_boutton_leds.gif); }
#menu_boutton_leds a:hover { background-position: 0 -35px; }
#menu_boutton_leds a:active { background-position: 0 -70px; }
/* Fin boutton leds */
/* Boutton exterieurs */
#menu_boutton_exterieurs a { width:127px; height:35px; float:left; background:url(images/design/menu_boutton_exterieurs.gif); }
#menu_boutton_exterieurs a:hover { background-position: 0 -35px; }
#menu_boutton_exterieurs a:active { background-position: 0 -70px; }
/* Fin boutton leds */
/** Fin Bloc Boutton **/
/*** FIN MENU ***/

Modifié par ezora (27 Nov 2009 - 11:18)

Mikachu

26 Nov 2009 à 13:16

Salut,

Il serait bien plus simple de mettre en ligne une page plutôt que d'envoyer des fichiers compressés... Peu de gens vont prendre la peine de télécharger et décompresser tes fichiers, tu auras peu de chance d'avoir une réponse.

Mais ton problème est relativement mal expliqué, donc je ne suis pas sur de ce que tu cherches à faire.
Peut être est-ce ceci : Créer un menu “accordéon” avec jQuery ?

Laurie-Anne

26 Nov 2009 à 13:26

Bonjour,

SI j'ai bien compris ce que tu souhaites faire, voici une petite astuce qui devrait t'éclairer.

ezora

26 Nov 2009 à 14:23

Merci de vos réponses

Pour Mikachu: Je pense aussi que peu de gens prendrons la peine de charger le zip c'est pourquoi j'ai mis les codes quand même ^^ Mais merci du conseil j'uploaderai le fichier la prochaine fois

Pour Laurie-Anne: j'ai parcouru ton lien rapidement et cela a l'air de correspondre à ce que je cherche. Seul hic : je ne connais pas le Php.

Je vais essayer de rééxpliquer:

J'ai 1 menu en include dans ma page.

Dans ce menu, chaque image a : 1 image background, 1 image hover, 1 image active et un lien.

Je souhaite quand on clique sur l'image et donc sur le lien, que celle-ci reste en hover dans la nouvelle page charger.

Pour vous donner un exemple: Comme le menu d'alsacreation où il y a une barre verte en hover et une fois cliquée sur le lien et dans la page une barre blanche qui nous indique dans quelle catégorie nous sommes.

J'ai une solution qui consisterait à modifier sur chaques pages l'id ou la classe du menu pour qu'il soit avec l'image hover mais, je voudrais que ce sois automatique.

Encore merci à vous
Modifié par ezora (26 Nov 2009 - 14:30)

juliesunset

26 Nov 2009 à 14:46

Salut,
J'ai bien compris ta demande, mais les seules méthodes que je connaissent est de le faire avec php, voir même javascript (plus compliqué à mon avis, j'y connais rien cela dit).

J'oserais te conseiller de commencé à apprend php, il s'agit d'une language relativement simple à comprendre et utilisé, et offre de nombreuses possibilités. J'ai fais mes bases ici, si tu veux tenter le coup. Il y a aussi plein d'autres tuto sur le sujet.

ezora

26 Nov 2009 à 15:11

Merci de ta réponse.

SdZ : très bon site pour apprendre je connais bien Smiley smile

J'avais déjà comme projet d'apprendre le php d'ici quelque temps. Je vais devoir m'y mettre plus vite que prévu.

Quelqu'un pourrais-t-il m'expliquer le code du lien donner par Laurie-Anne. Je pense comprendre mais je n'en suis pas sur ^^

a écrit :
Sur chaque page PHP, déclarer une variable comme ceci:
<php $nav_en_cours = 'rubrique1'; ?> 
Dans le fichier PHP qui contient votre menu, le code du menu devra ressembler à ceci:
 
<ul id="navigation">
	<li<?php if ($nav_en_cours == 'rubrique1') {echo ' id="en-cours"';} ?>><a href="/rub1/">Rubrique 1</a></li>
	<li<?php if ($nav_en_cours == 'rubrique2') {echo ' id="en-cours"';} ?>><a href="/rub2/">Rubrique 2</a></li>
</ul>

Pour que j'essaie de l'appliquer à mon cas afin d'avancer dans mon projet.

C'est le seul petit truc qui me gêne pour avancer et finir.

Promis je me mets au php après Smiley biggrin

Modifié par ezora (26 Nov 2009 - 15:17)

juliesunset

26 Nov 2009 à 15:51

Bon je ne suis pas une experte, je suis même débutante, mais voici ce que j'en comprend:

Une fois que ta variable est déclaré:

<?php $nav_en_cours = 'rubrique1'; ?>

Toujours déclarer la variable! Smiley cligne

Dans ta page à ton menu tu écris quelque chose comme ça:

 
<ul id="navigation">
	<li<?php if ($nav_en_cours == 'rubrique1') {echo ' id="en-cours"';} ?>><a href="/rub1/">Rubrique 1</a></li>
	<li<?php if ($nav_en_cours == 'rubrique2') {echo ' id="en-cours"';} ?>><a href="/rub2/">Rubrique 2</a></li>
</ul>

Ce qui veux dire si la page active est égale à rubrique1 écrit l'id "en-cours" à li
Dans ton CSS tu aura fait un #en-cours avec les paramètres désiré. Et ces paramètres s'appliqueront à la page en cours de visionnement.

En gros je crois que c'est ça.

ezora

26 Nov 2009 à 16:02

Merci

C'est ce que j'avais compris aussi.
Ca va je suis pas si bête que ca finallement Smiley lol

lol

On lui dit que si la page active est égale à rubrique 1 il a comme id "en cours"
La question que je me posais c'est :
Si la page active n'est pas égale a la rubrique 1 ? Il fait quoi ?
Modifié par ezora (26 Nov 2009 - 16:03)

juliesunset

26 Nov 2009 à 16:27

Il fais rien! Le CSS li ordinaire s'applique par défaut. S'il a une indication contraire, dans ce cas-ci l'id "en-cours", s'applique.
Modifié par juliesunset (26 Nov 2009 - 16:28)

ezora

26 Nov 2009 à 16:38

Ok Merci!

Je test ca demain et je vous tiens au courant.
Si des personnes on des conseils à apporter ou d'autre solutions n'hesitez pas Smiley smile

ezora

27 Nov 2009 à 11:17

Ça Marche !

Merci à tous !

J'ai donc fait comme ca :

J'ai déclaré ma variable sur chaque page d'appliques :

<?php $nav_en_cours = 'applique'; ?>

Puis j'ai écris ca dans mon menu:

		<!--** MENU **-->
 		<div id="menu">
        	<div id="menu_haut_gauche"></div>
            <div id="menu_haut"></div>
            <div id="menu_haut_droite"></div>
            <div id="menu_gauche"></div>
            <div id="menu_bloc_bouttons">
            	<div <?php if ($nav_en_cours == 'appliques') {echo ' id="menu_boutton_appliques_en_cours"';} else {echo ' id="menu_boutton_appliques"';} ?>><a href="#"></a></div>
              		<div class="menu_separation"></div>
                <div <?php if ($nav_en_cours == 'plafonniers') {echo ' id="menu_boutton_plafonniers_en_cours"';} else {echo ' id="menu_boutton_plafonniers"';} ?>><a href="#"></a></div>
               		<div class="menu_separation"></div>
				<div <?php if ($nav_en_cours == 'suspensions') {echo ' id="menu_boutton_suspensions_en_cours"';} else {echo ' id="menu_boutton_suspensions"';} ?>><a href="#"></a></div>
                	<div class="menu_separation"></div>
				<div <?php if ($nav_en_cours == 'lampadaires') {echo ' id="menu_boutton_lampadaires_en_cours"';} else {echo ' id="menu_boutton_lampadaires"';} ?>><a href="#"></a></div>
                	<div class="menu_separation"></div>
				<div <?php if ($nav_en_cours == 'leds') {echo ' id="menu_boutton_leds_en_cours"';} else {echo ' id="menu_boutton_leds"';} ?>><a href="#"></a></div>
                   	<div class="menu_separation"></div>
				<div <?php if ($nav_en_cours == 'exterieurs') {echo ' id="menu_boutton_exterieurs_en_cours"';} else {echo ' id="menu_boutton_exterieurs"';} ?>><a href="#"></a></div>
            </div>
            <div id="menu_droite"></div>
            <div id="menu_bas_gauche"></div>
            <div id="menu_bas"></div>
            <div id="menu_bas_droite"></div>
 		</div>
        <!--** FIN DU MENU **-->

Je ne sais pas si le code est correct et propre par contre.

Si une personne peut me dire si c'est "au norme" merci d'avance
Modifié par ezora (27 Nov 2009 - 11:21)

Sujet clos

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

[Résolu] Identifiant «en cours» dans le menu pour un site dynamique