28172 sujets

CSS et mise en forme, CSS3

Mise en évidence du menu dynamique

WordPress : 3.5.1
Thème utilisé : suffusion
Adresse du site : http://s308989164.onlinehome.fr/WPress%20CecileB/ :

Bonjour, ai créé ( grâce à vos tutos) 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 :
Editions Beaux Livres
Editions Catalogues


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

Peut on faire en sorte que pour la page active le lien prenne la position activé (avec la petite flèche).
Merci!
Merci de votre réponse, mais...
Je viens de passer la nuit sur ces pages et certainement, la fatigue et encore plus mon incompétence... mais je sèche grave!

Chez Alsa, ils disent :

1. Sur chaque page PHP, déclarer une variable comme ceci:
<?php $nav_en_cours = 'rubrique1'; ?>

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<?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>


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!
Modifié par 6l20 (10 Feb 2013 - 18:52)
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 Smiley rolleyes
Modifié par 6l20 (10 Feb 2013 - 18:47)
Bonsoir,

C'est une fausse bonne idée : vous perdez le contenu textuel de votre menu si pour une raison ou une autre les images ne s'affichent pas (et les raisons sont nombreuses !)
Servez-vous de la documentation de Wordpress pour afficher cette page courante, il fait ça très bien !
Il existe également des plugins pour le faire...
Il faut dormir !!! Smiley cligne
a écrit :
C'est une fausse bonne idée :

Les sprites?
a écrit :
Il existe également des plugins pour le faire...

Ai pourtant cherché!!! Un nom?

Vais dormir je reprendrais demain, merci et bonne fin de dimanche!
Bonsoir. Comme exemple d'une class "active" appliquée à un onglet cliqué, sur Wordpress ça pourra ressembler à ceci :
<ul>
		<li<?php if (is_home()) echo ' class="active"'; ?>><a href="<?php bloginfo('url'); ?>/"><span aria-hidden="true" data-icon="&#xe054;"></span>Accueil</a></li>
		<li<?php if (is_page('sommaire')) echo ' class="active"'; ?>><a href="<?php bloginfo('url'); ?>/sommaire/"><span aria-hidden="true" data-icon="&#xe19a;"></span>Sommaire</a></li>
		<li<?php if (is_page('a-propos')) echo ' class="active"'; ?>><a href="<?php bloginfo('url'); ?>/a-propos/"><span aria-hidden="true" data-icon="&#xe17a;"></span>À propos</a></li>
		<li<?php if (is_page('maps')) echo ' class="active"'; ?>><a href="<?php bloginfo('url'); ?>/maps/"><span aria-hidden="true" data-icon="&#xe021;"></span>Où sommes nous ?</a></li>
		<li<?php if (is_page('contact')) echo ' class="active"'; ?>><a href="<?php bloginfo('url'); ?>/contact/"><span aria-hidden="true" data-icon="&#xe1b2;"></span>Nous contacter</a></li>
	</ul>

Le span avec aria, c'est un système proposant des icônes vectorielles, une différente par lien, sans passer par des sprites (avec icomoon).
Modifié par Olivier C (11 Feb 2013 - 17:40)
Sujet clos
Aller à