Partager via

Procédure pas à pas : affichage d'un menu sur des pages Web

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas illustre comment placer et configurer un contrôle Menu ASP.NET sur une page Web.

Le menu de navigation est un aspect courant des sites Web quel que soit leur niveau de complexité. Vous pouvez utiliser le contrôle Menu dans ASP.NET à configurer facilement un menu de navigation complexe sans écrire du code.

Le contrôle Menu propose de nombreuses options d'affichage, y compris un affichage statique où le menu est exposé pleinement et un affichage dynamique où des parties du menu apparaissent lorsque le pointeur de la souris passe sur l'élément de menu parent. Le contrôle fournit également une combinaison d'affichages statique et dynamique permettant une série d'éléments racines statiques, mais avec des éléments de menu enfants qui apparaissent dynamiquement.

Vous pouvez configurer le contrôle Menu ASP.NET dans le concepteur avec des liens statiques vers vos pages, ou vous pouvez le lier automatiquement à une source de données hiérarchique telle qu'un contrôle XmlDataSource ou SiteMapDataSource.

Cette procédure pas à pas illustre les tâches suivantes :

  • création d'un menu de base et configuration statique de celui-ci pour établir un lien vers vos pages ;

  • création d'un menu plus complexe qui est lié à un fichier XML Web.sitemap ;

  • ajustement de l'orientation d'un menu ;

  • configuration de plusieurs niveaux d'affichage statique ou d'affichage dynamique.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

  • Microsoft Visual Web Developer (Visual Studio).

  • .NET Framework

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante, « Création d'un menu de base ». Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

    Par exemple, tapez le nom du dossier C:\SitesWeb.

  5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx.

Création d'un menu de base

La première étape pour créer un menu pour votre page consiste à positionner un contrôle Menu.

Pour ajouter un contrôle Menu à la page

  1. Basculez vers la page Default.aspx ou ouvrez-la, puis basculez en mode Design.

  2. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle Menu et un contrôle dans la page.

Pour cet exemple, vous orienterez le menu horizontalement plutôt que verticalement.

Pour positionner le contrôle Menu horizontalement

  • Cliquez avec le bouton droit sur le contrôle Menu, cliquez sur Propriétés, puis affectez Horizontal à Orientation.

Configuration d'un menu de base

Dans cette section, vous définirez les éléments de menu en utilisant l'Éditeur d'éléments de menu.

Pour modifier les éléments du contrôle Menu

  1. Cliquez avec le bouton droit sur le contrôle Menu, puis cliquez sur Modifier les éléments de menu.

    L'Éditeur d'éléments de menu s'affiche.

  2. Sous Éléments, cliquez sur l'icône Ajouter un élément racine.

  3. Sous Propriétés pour le nouvel élément, affectez Home à Text et Default.aspx à href.

  4. Sous Éléments, cliquez sur l'icône Ajouter un élément racine.

  5. Sous Propriétés, affectez Products à Text et Products.aspx à href.

  6. Sous Éléments, cliquez sur l'icône Ajouter un élément racine.

  7. Sous Propriétés, affectez Services à Text et Services.aspx à href.

  8. Cliquez sur OK.

Si vous recherchez Default.aspx à la source, vous verrez que les éléments de menu et les liens sont déclarés de manière déclarative dans le contrôle.

Pour créer les pages cibles

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la racine de votre site Web, puis cliquez sur Ajouter un nouvel élément.

  2. Cliquez sur Formulaire Web, nommez le fichier Products.aspx, puis cliquez sur Ajouter.

  3. Répétez les étapes précédentes et créez un fichier nommé Services.aspx.

Test du menu

Une fois vos pages et votre menu en place, vous pouvez l'essayer.

Pour tester le contrôle Menu

  1. Cliquez sur Default.aspx dans l'Explorateur de solutions, puis appuyez sur CTRL+F5 pour exécuter la page Default.aspx.

  2. Déplacez le pointeur sur les éléments ; la barre d'état du navigateur en bas de la page (si visible) affichera la page liée.

  3. Cliquez sur un lien pour accéder à la page.

Création d'un menu lié à un plan de site

Dans la dernière section, vous avez créé un menu statique simple configuré de manière déclarative dans la page. Dans cette section, vous évitez de modifier directement les éléments du contrôle Menu, et liez, à la place, le contrôle à un fichier Web.sitemap en tant que source de données XML. Cela permet à la structure du contrôle Menu d'être conservée dans un fichier XML séparé qui peut être facilement mis à jour sans modifier la page ou utiliser le concepteur.

Pour cet exemple, vous utiliserez un deuxième contrôle Menu.

Pour créer un deuxième contrôle Menu

  • À partir du groupe Navigation de la Boîte à outils, faites glisser un deuxième contrôle Menu sur la page Default.aspx.

Ensuite, vous aurez besoin d'un fichier Web.sitemap vers lequel effectuer la liaison.

Pour créer un fichier de plan de site

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la racine de votre site Web, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément <NomSiteWeb>, cliquez sur Plan de site.

  3. Cliquez sur Ajouter.

  4. Placez le code XML suivant dans le fichier Web.sitemap.

    Le XML représente la structure du menu. Les nœuds imbriqués deviennent des éléments de menu enfants d'éléments de menu de nœuds parents.

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. Enregistrez le fichier.

Liaison à un plan de site

Vous pouvez à présent créer une source de données de navigation qui pointe vers votre fichier Web.sitemap et liez votre contrôle Menu à celle-ci.

Pour lier un contrôle Menu à un plan de site

  1. Ouvrez le fichier Default.aspx et basculez en mode Design.

  2. Cliquez sur la balise active pour afficher la boîte de dialogue Tâches Menu.

  3. Dans la boîte de dialogue Tâches Menu, dans la liste déroulante Choisir la source de données, cliquez sur Nouvelle source de données.

    La boîte de dialogue Assistant Configuration de source de données s'affiche.

  4. Cliquez sur Plan de site.

    Sous Spécifiez un ID pour la source de données, le nom par défaut, SiteMapDataSource1, apparaît.

  5. Cliquez sur OK.

Test de la liaison au plan de site

Une fois vos pages et votre menu en place, vous pouvez l'essayer.

Pour tester la liaison au plan de site

  1. Appuyez sur CTRL+F5 pour exécuter la page Default.aspx.

  2. Déplacez le pointeur sur l'élément de menu Home du deuxième menu vertical.

    Products et Services s'affichent.

  3. Déplacez le pointeur sur Products.

    Hardware et Software s'affichent.

    Si vous recherchez Default.aspx dans le code source, vous remarquerez que contrairement au premier élément de menu, les éléments ne sont pas spécifiés de manière déclarative ; à la place, la source de données est référencée par le contrôle Menu.

Ajustement des niveaux statique et dynamique

Le menu vertical créé dans la précédente section utilise un affichage complètement dynamique, avec uniquement le niveau supérieur statique. Avec le contrôle Menu, vous pouvez spécifier le comportement en fonction du passage du pointeur de la souris et si le menu doit être dynamique ou statique. Dans cette section, vous ajusterez les qualités dynamique et statique du contrôle Menu.

Pour rendre le contrôle Menu statique sur deux niveaux

  1. Dans la page Default.aspx en mode Design, cliquez avec le bouton droit sur le deuxième contrôle Menu, puis cliquez sur Propriétés.

  2. Affectez 2 à StaticDisplayLevels.

Test du menu dynamique

Une fois vos pages et votre menu en place, vous pouvez l'essayer.

Pour tester le menu dynamique

  • Appuyez sur CTRL+F5 pour exécuter la page Default.aspx.

    Les deux premiers niveaux du menu sont affichés, alors que le troisième niveau est dynamique.

Étapes suivantes

Le contrôle Menu vous permet de créer facilement des menus de navigation. Vous pouvez configurer le contrôle pour un affichage dynamique ou statique et le lier à un fichier XML de plan de site. Vous pouvez également vous familiariser avec les options supplémentaires suivantes :

Voir aussi

Tâches

Procédure pas à pas : contrôle des menus ASP.NET par programme

Concepts

Vue d'ensemble des contrôles de menu