Discussion :

[Jah73]

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul id="menu">

de mon Site.master

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

Merci d'avance !

[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).

[Jah73]

Bonjour yinyang,

Voila le code dans mon Site.master pour mes onglets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[yinyang]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Jah73]

Merci pour ta réponse yinyang

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

[yinyang]

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 :

  Sélectionner tout - Visualiser dans une fenêtre à part

  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.