DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 28 !
  • Ce que vous allez apprendre dans cette leçon
  • Champs spécifiques aux agencements
Leçon 8.3. Agencements : Gestion des menus
Ce que vous allez apprendre dans cette leçon
  • Champ Barre de navigation avec son menu "Hamburger".
  • Dissociation du menu et des options de menu.
Durée de la leçon

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Champs spécifiques aux agencements
WEBDEV met à votre disposition un champ spécifique pour les agencements : le champ Barre de navigation.
Le champ Barre de navigation permet de créer notamment une zone de menu s'adaptant facilement à la taille du navigateur. Cette zone peut contenir tous les types de champs.

  • Examinons le fonctionnement du champ Barre de Navigation.
    1. Lancez WEBDEV 28 (si ce n'est déjà fait).
    2. Affichez si nécessaire la page d'accueil de WEBDEV (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 8 - Agencements", double-cliquez sur "Agencements (Exercice)".
    4. Ouvrez la page PAGE_BarreNavigation.
  • Le champ Barre de navigation est le champ situé en haut qui contient le menu.
    Champ Barre de navigation
    Ce champ Barre de navigation est divisé en 3 zones :
    • A gauche, le logo du site.
    • Au centre, le menu du site.
    • A droite, un champ de recherche avec le champ Image permettant de lancer la recherche.
  • Créons un agencement :
    1. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement à partir de la vue active".
    2. Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé. Validez la fenêtre.
    3. Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la page "PAGE_BarreNavigation". L'agencement mobile est automatiquement sélectionné et affiché sous l'éditeur.
      Champ Barre de navigation

Note

Le champ Barre de navigation est un champ avancé. La dissociation automatique n'est pas disponible pour ce champ. En effet, il est nécessaire de choisir des options spécifiques lors de la dissociation.
  • Nous allons tout d'abord configurer le champ Barre de navigation pour un affichage Mobile.
    1. Sélectionnez si nécessaire le champ Barre de navigation dans l'agencement mobile.
    2. Affichez la fenêtre de description du champ Barre de navigation (Alt + Entrée).
    3. Dans l'onglet "UI", pour le paramètre "Mode d'affichage", cliquez sur Dissocier pour dissocier le mode d'affichage par agencement.
      Champ Barre de navigation
    4. Dans la fenêtre qui s'affiche, cliquez sur l'option "Dissocier la valeur par agencement", puis dans la zone "Mobile", sélectionnez "Compact".
      Dissociation par agencement
      Validez la fenêtre de dissociation.
    5. Validez la fenêtre de description du champ.
    6. Le champ Barre de navigation apparaît en mode compact dans l'agencement mobile.
  • Voyons maintenant l'aspect du champ Barre de navigation dans les différents agencements.
    1. Affichez l'agencement "Bureau" : la barre de navigation apparaît entièrement.
    2. Affichez l'agencement "Mobile" : la barre de navigation est en mode "Compact".
    3. Dans l'agencement Mobile, cliquez sur le champ Barre de navigation pour le sélectionner : la zone centrale est hachurée.
      Champ Barre de navigation
  • Dans l'agencement Mobile, le champ Barre de navigation rend invisible la zone centrale.
    Le menu "hamburger" déroule une popup qui contient les champs de la zone centrale. Bien entendu cette popup est personnalisable, il suffit de cliquer dans le volet central. Ensuite, vous pouvez modifier cette popup comme bon vous semble.
  • Examinons le contenu de la zone centrale :
    1. Cliquez dans la zone centrale hachurée. La popup s'affiche en édition.
      Zone centrale du champ Barre de navigation
      Le contour jaune indique que le champ est en édition.
    2. Nous retrouvons le menu du site. Le menu est horizontal. Pour l'afficher verticalement, il est nécessaire de dissocier l'orientation du menu :
      • Affichez la fenêtre de description du menu (Alt + Entrée).
      • Dans l'onglet "Général", cliquez sur Dissocier pour dissocier l'orientation du menu.
        Zone centrale du champ Barre de navigation
      • Dans la fenêtre qui s'affiche :
        • Cochez l'option "Dissocier la valeur par agencement".
        • Pour l'agencement mobile, sélectionnez "Vertical pour mobile".
        • Validez.
    3. Validez la fenêtre de description.
    4. Pour sortir du mode édition de la popup, appuyez sur la touche Echap.
  • Une dernière modification consiste à modifier la taille des différentes zones de la barre de navigation pour afficher tous les éléments.
    1. Sélectionnez la barre de navigation.
      Les carrés rouges permettent de redimensionner les différentes zones du champ Barre de navigation.
    2. Diminuez la zone du menu et agrandissez la zone de recherche. Vous obtenez le résultat suivant :
  • Enregistrez la page (Ctrl + S) et lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
    1. La page s'affiche sous le navigateur.
    2. Redimensionnez le navigateur : l'agencement mobile est affiché.
  • Fermez le navigateur.
  • Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette :
    1. Déroulez l'option depuis les boutons d'accès rapide et sélectionnez "Tester depuis un téléphone (accès via un QR Code)".
    2. Une fenêtre proposant un QR code à flasher avec votre mobile.
    3. Une fois le code flashé, le site s'affiche sur le mobile.
    4. L'agencement "Mobile" est automatiquement affiché sur le mobile.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire