Changer de couleur le menu actif

Version imprimable

04/06/2013, 17h50
Jah73

1 pièce(s) jointe(s)

Changer de couleur le menu actif

Bonjour à tous,

Je souhaiterais changer de couleur le menu qui est actif, je m'explique :

Dans mon Site.master, j'ai des onglets (communs entre chaque page) qui me permettent de naviguer entre les menus. Voici un exemple test ci-dessous :

http://www.developpez.net/forums/att...1&d=1370357518

Ici on ne le voit pas, mais le curseur est sur l'onglet2.

Je voudrais changer la couleur de l'onglet en fonction de celui qui est activé. Je sais faire ca en PHP mais pas en ASP.NET. Après plusieurs recherches sur le net, j'ai trouvé la propriété Menu.DynamicSelectedStyle :

http://msdn.microsoft.com/fr-fr/libr...code-snippet-2

Le problème, c'est que je n'arrive pas à m'en servir. Quand je place ma balise, j'ai cette erreur :

Citation:

Avertissement 1 Validation (HTML5) : L'élément 'dynamicselectedstyle' n'est pas pris en charge. H:\Workspace Visual Studio\WebSites\SiteWebTest\Site.master 75 27 SiteWebTest

Je place le dynamicselectedstyle dans la balise

Code:

<ul id="menu">

de mon Site.master

Si je peux donner tout autre renseignement, n'hésitez pas à me demander :ccool:

Merci d'avance !
05/06/2013, 10h24
yinyang

Bonjour,

Il faudrait que tu expliques comment tu as fait pour faire tes onglets (ul/li ou un full webcontrol).

Si chaque onglet pointe vers 1 page unique, un peu de CSS/JS devrait suffire.
Pour le webcontrol, le lien MSDN que tu as donné ne t'aide vraiment pas (donne nous le code de ton WebControl).

Bonjour yinyang,

Voila le code dans mon Site.master pour mes onglets

Code:

1
2
3
4
5
6
7
8
9
<nav>
     <ul id="menu">
          <li><a runat="server" href="~/onglet1.aspx">Onglet1</a></li>
          <li><a runat="server" href="~/onglet2.aspx">Onglet2</a></li>
          <li><a runat="server" href="~/onglet3.aspx">Onglet3</a></li>
          <li><a runat="server" href="~/onglet4.aspx">Onglet4</a></li>
          <li><a runat="server" href="~/onglet5.aspx">Onglet5</a></li>
     </ul>
</nav>

Merci !

Tu n'utilises pas le webcontrol Menu d'ASP.Net pour réaliser tes onglets, donc un petit peu de Javascript/Jquery et de CSS te permettront de mettre en surbrillance le menu actif.

Un truc comme ça doit te permettre de trouver la balise "LI" de la page actuellement affiché :
Code:

1 2 3 4 5 6 7 8 9 var href = window.location.href; var tmpArray = href.split('/'); var pageEnCours = tmpArray[tmpArray.length - 1]; if (pageEnCours == "EnConstruction.aspx") return; var liParent = $("#sousMenus a[href *= '" + pageEnCours + "']").parents("li");
La propriété "DynamicSelectedStyle" ne fonctionne qu'avec le webcontrol "Menu" donc normal que tu obtiennes une erreur.

05/06/2013, 12h55
Jah73

Merci pour ta réponse yinyang :ccool:

J'aurais besoin d'un peu d'aide par contre ..

- A quel endroit je dois placer ce bout de code ?

- A quoi sert la condition if (pageEnCours == "EnConstruction.aspx") ?

:D
C'est un copier/coller rapide donc tout n'est pas utile pour toi.
Tu peux supprimer les lignes 6 et 7.

Pour être complet dans ma réponse :
tu charges Jquery dans les balises HEAD
et tu places le code suivant juste avec "</body>"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> $(document).ready(function() { // Pour supprimer la classe "selectionne" de la précédente page $("li.selectionne").removeClass("selectionne"); var href = window.location.href; var tmpArray = href.split('/'); var pageEnCours = tmpArray[tmpArray.length - 1]; var liTrouve = $("#menu a[href *= '" + pageEnCours + "']"); if (liTrouve) $(liTrouve).addClass("selectionne"); }); </script>
Normalement, si j'ai bien écrit la partie Jquery, la classe CSS "selectionne" devrait être ajouté à la balise "LI" de ta page en cours, il te restera à écrire un style pour cette classe.