Lien actif dans menu.

Statut : non résolu

Ce sujet contient 19 réponses, 3 participants et a été mis à jour pour la dernière fois par Guy, le il y a 12 années et 2 mois.

15 sujets de 1 à 15 (sur un total de 20)

1 2 →

Auteur

Messages
9 février 2013 à 20 h 30 min #520513

AntoineM
Participant

Chevalier WordPress
173 contributions

Bonjour,

Ma configuration WP actuelle
– Version de WordPress : 3.5.1
– Version de PHP/MySQL :
– Thème utilisé : suffusion
– Extensions en place :
– Nom de l’hebergeur :
– Adresse du site : http://s308989164.onlinehome.fr/WPress%20CecileB/

Problème(s) rencontré(s) :

Bonjour, ai créé ( encore merci à lorenzolamas-Maître WP ) un menu à base de sprite.
Mon Pb : si dans le lien, je laisse l’instruction # le lien reste activé (petite flèche à gauche du lien).
Ex : liens
Editions Beaux Livres
Editions Catalogues

dès que je remplace le # par une adresse j’ imagine que la page se recharge et le menu reprend sa position initiale.
Ex : liens
Accueil
Presentation

Peut on faire en sorte que pour la page active le lien prenne la position activé (avec la petite flèche).
Merci!

10 février 2013 à 10 h 50 min #879144
ouistiti.net
Participant

Maître WordPress
1879 contributions
li a:active

A la ligne 874 du fichier style
```
#menugauche2 .skins2 {
    background-position: 0 -136px;
    top: 136px;
}
```
Il faut ajouter li a:active
```
li a:active #menugauche2 .skins2 {
    background-position: 0 -136px;
    top: 136px;
}
```
10 février 2013 à 11 h 25 min #879145

AntoineM
Participant

Chevalier WordPress
173 contributions

C fait…. Mais ça ne marche pas, snif!

10 février 2013 à 12 h 46 min #879146

ouistiti.net
Participant

Maître WordPress
1879 contributions

Oui vous avez raison, j’ai pourtant essayé avec firebug (1 fois sur 2 ça marche… 😕)

Vu que c’est un menu sprite en mettant « background-position: 600px 0; » la flèche apparait, mais difficile pour moi de voir l’emplacement, car à chaque fois que je clic sur un lien la page se recharge et me supprime celui-ci.

Mais voilà déjà une piste ….

10 février 2013 à 13 h 02 min #879147

Guy
Participant

Maître WordPress
14817 contributions

Il faut renseigner l’item de menu en lui ajoutant une classe « active » (ou tout autre nom représentant l’état actif) au moment de la construction du menu.

Cela n’a pas l’air d’être un menu WordPress, il faudra donc le faire manuellement en testant la page courante. Une fois le menu correctement construit, définir les css est un jeu d’enfant 🙂

10 février 2013 à 15 h 27 min #879148
AntoineM
Participant

Chevalier WordPress
173 contributions
Chez Alsa, ils disent :

1. Sur chaque page PHP, déclarer une variable comme ceci:

Donc je met ça dans chaque page via l’onglet HTML?

2. Dans le fichier PHP qui contient votre menu, le code du menu devra ressembler à ceci:
```
<ul id="navigation">
<li><a href="/rub1/">Rubrique 1</a></li>
<li><a href="/rub2/">Rubrique 2</a></li>
</ul>
```
Moi, j’ai mon menu dans un widget Page qui contient :
```
<div id="bandeau2">
<div id="menugauche2">
<ul>
<li><a href="http://s308989164.onlinehome.fr/WPress%20CecileB/" class="cv2" title="Mon CV"><span>CV</span></a></li>
<li><a href="http://s308989164.onlinehome.fr/WPress%20CecileB/?page_id=104" class="edito2" title="L'édito"><span>Edito</span></a></li>
<li><a href="#" class="skins2" title="Pour changer le skin du site"><span>Skins</span></a></li>
<li><a href="#" class="newsweblog2" title="Weblog/News"><span>Weblog/News</span></a></li>
<li><a href="#" class="realweb20" title="Mes réalisations"><span>Réalisations web</span></a></li>
<li><a href="#" class="realweb21" title="Mes réalisations"><span>Réalisations web</span></a></li>
<li><a href="#" class="realweb22" title="Mes réalisations"><span>Réalisations web</span></a></li>
</ul>
</div>

</div>
```
Merci de votre attention!
10 février 2013 à 17 h 01 min #879149
AntoineM
Participant

Chevalier WordPress
173 contributions
Ai refait mon menu.
Il est constitué d’une image (sprite).

Mon menu est déclaré dans widget texte :
```
<div id="menu">
<ul>
<li><a class="accueil" href="http://s308989164.onlinehome.fr/WPress%20CecileB/"></a></li>
<li><a class="presentation" href="http://s308989164.onlinehome.fr/WPress%20CecileB/?page_id=104"></a></li>
<li><a class="ed_bx_livres" href=" #"></a></li>
<li><a class="ed_catalogue" href="#"></a></li>
<li><a class="com_cult" href="#"></a></li>
<li><a class="com_id_visuelle" href="#"></a></li>
<li><a class="contact" href="#"></a></li>
</ul>
</div>
```
seuls accueil et presentation sont reelemnt liés.

Dans ma feuille style.css j’ai :
```
#menu {
height:500px;

}

#menu ul {
margin:0px 0 0 0px;
padding:0 0 0 0;
}

#menu ul li{
float:left;
margin: 0 0px 0 0;
padding:0;
list-style:none;
}

#menu ul li a{
height:68px;
width:190px;
display:block;
background-image:url(http://s450599025.onlinehome.fr/WordpressCBCG/wp-content/images/sprite_menu_sidebar.png);
background-repeat: no-repeat;
}

/* Normal */
#menu ul li a.accueil{
background-position:-0px -526px;
}
#menu ul li a.presentation{
background-position:-0px -594px;
}
#menu ul li a.ed_bx_livres{
background-position:-0px -662px;
}
#menu ul li a.ed_catalogue{
background-position:-0px -730px;
}
#menu ul li a.com_cult{
background-position:-0px -798px;
}
#menu ul li a.com_id_visuelle{
background-position:-0px -866px;
}
#menu ul li a.contact{
background-position:-0px -934px;
}

/* Survol */

#menu ul li a:hover.accueil{
background-position:-0px -0px;
}
#menu ul li a:hover.presentation{
background-position:-0px -68px;
}
#menu ul li a:hover.ed_bx_livres{
background-position:-0px -136px;
}
#menu ul li a:hover.ed_catalogue{
background-position:-0px -204px;
}
#menu ul li a:hover.com_cult{
background-position:-0px -272px;
}
#menu ul li a:hover.com_id_visuelle{
background-position:-0px -340px;
}
#menu ul li a:hover.contact{
background-position:-0px -408px;
}

/* Action */

#menu ul li a:active.accueil{
background-position:-0px -0px;
}
#menu ul li a:active.presentation{
background-position:-0px -68px;
}
#menu ul li a:active.ed_bx_livres{
background-position:-0px -136px;
}
#menu ul li a:active.ed_catalogue{
background-position:-0px -204px;
}
#menu ul li a:active.com_com_cult{
background-position:-0px -272px;
}
#menu ul li a:active.com_id_visuelle{
background-position:-0px -340px;
}
#menu ul li a:active.contact{
background-position:-0px -408px;
}

/* Actif */

#menu ul li a.accueil_actif{
background-position:-0px -0px;
}
#menu ul li a.presentation_actif{
background-position:-0px -68px;
}
#menu ul li a.ed_bx_livres_actif{
background-position:-0px -136px;
}
#menu ul li a.ed_catalogue_actif{
background-position:-0px -204px;
}
#menu ul li a.com_com_cult_actif{
background-position:-0px -272px;
}
#menu ul li a.com_id_visuelle_actif{
background-position:-0px -340px;
}
#menu ul li a.contact_actif{
background-position:-0px -408px;
}
```
Tout cela semble fonctionner SAUF que je n’arrive pas à mettre le lien du menu en position active (idem qu’au survol) pour la page en cours…

AntoineM +/- 36h sans dormir rolleyes
10 février 2013 à 17 h 05 min #879150

ouistiti.net
Participant

Maître WordPress
1879 contributions

Au début je faisais idem création dans l’onglet HTML (Text)

Ensuite j’ai découvert ce tuto http://wpchannel.com/creer-emplacement-menu-personnalise-wordpress/
pour donner forme au menu, gérer le CSS

ou

1. http://www.fran6art.com/tutoriels/la-creation-de-menus-sous-wordpress-3/
2. codex http://codex.wordpress.org/Function_Reference/wp_page_menu

C’est qui Alsa??

PS: Mettre le code avec le C qui se trouve ci-dessus.

10 février 2013 à 17 h 23 min #879151

ouistiti.net
Participant

Maître WordPress
1879 contributions

Ah!! alsacreations.com !!

Pourrais-tu donner le lien??

10 février 2013 à 17 h 36 min #879152

AntoineM
Participant

Chevalier WordPress
173 contributions

Alsa : c le site Alsa création.

???? —- PS: Mettre le code avec le C qui se trouve ci-dessus. —- ????
Que voulez vous dire?

10 février 2013 à 17 h 38 min #879153

AntoineM
Participant

Chevalier WordPress
173 contributions

http://www.alsacreations.com

10 février 2013 à 17 h 47 min #879154

ouistiti.net
Participant

Maître WordPress
1879 contributions

AntoineM wrote:

???? —- PS: Mettre le code avec le C qui se trouve ci-dessus. —- ????
Que voulez vous dire?.

Quand tu veux mettre un bout de code dans un message juste au-dessus il y a des pictos dont un est C

1. Un clic dessus est

s’affiche
2. Mettre le code HTM, CSS ou PHP entre

Oui, je connais le lien de alsacreations.com, mais je n’ai pas trouvé le tutoriel dont tu parles.

10 février 2013 à 17 h 48 min #879155

ouistiti.net
Participant

Maître WordPress
1879 contributions

Je me suis complétement loupée , mais je pense que tu as compris…

10 février 2013 à 18 h 08 min #879156

AntoineM
Participant

Chevalier WordPress
173 contributions

oui ok, ça oui (le c).

pour le lien vers le tuto Alsa :
http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

Pour le reste je suis un peu perdu.

Je pourrais refaire le menu classiquement en dur avec 2 images pour chaque lien, mais j’ai vu ces articles sur les sprites, cela m’a semblé pas mal et j’ai voulu expérimenter (pas compétent mais curieux .
Je suis assez content du résultat à part donc se problème de « page active ».

10 février 2013 à 18 h 27 min #879157

Guy
Participant

Maître WordPress
14817 contributions

Il te sera impossible (ou difficile) de déterminer la page active et si ton menu est dans un widget texte qui ne sait pas exécuter de code PHP.
Auteur

Messages