PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation du champ Barre de navigation
  • Champ d'une page statique ou dynamique
  • Créer un champ Barre de navigation
  • Caractéristiques du champ créé par défaut
  • Caractéristiques du champ Barre de navigation
  • Choix du mode d'affichage
  • Options de style disponibles
  • Manipulations sous l'éditeur
  • Manipulation du champ sous l'éditeur
  • Personnalisations par tranche disponibles
  • Affichage de la zone déroulée en exécution
  • Utilisation d'une action prédéfinie
  • Utilisation de la propriété ..Enroulé par programmation
Produits
WINDEVWEBDEV - Code ServeurWEBDEV - Code NavigateurWINDEV MobileEtats et Requêtes
Plateformes
WindowsLinuxWindows MobileUniversal Windows 10 AppAndroidWidget AndroidiPhone/iPadApple Watch
Langages
JavaPHPAjaxCode Utilisateur (MCU)Langage Externe
Bases de données
HFSQLHFSQL Client/ServeurProcédures stockéesOLE DBODBCAccès Natifs
Présentation du champ Barre de navigation

Champ d'une page statique ou dynamique

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.
Deux modes d'affichage sont disponibles :
  • Le mode Etendu : La barre de navigation est composée de 3 zones : Gauche, Centre, Droite. Les 3 zones sont affichées.
    Une barre de navigation en mode étendu
    Une barre de navigation en mode étendu
  • Le mode Compact : La barre de navigation est composée des zones Gauche et Droite et la zone Centre peut être déroulée (par exemple lors de l'appui sur un bouton).
    Une barre de navigation en mode compact
    Une barre de navigation en mode compact
    Une barre de navigation en mode compact, avec la zone centrale déroulée
    Une barre de navigation en mode compact, avec la zone centrale déroulée
Remarque : Ce champ est disponible uniquement pour les pages en mode "Responsive Web Design".
Créer un champ Barre de navigation
Pour créer un champ de type Barre de navigation :
  1. Créez ou ouvrez une page en mode "Responsive Web Design".
  2. Sous le volet "Création", dans le groupe "Navigation", cliquez sur "Barre de navigation".
  3. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.

Caractéristiques du champ créé par défaut

Par défaut, le champ Barre de navigation est automatiquement adapté au mode Responsive Web Design :
  • Dans la plus grande tranche :
    • le champ est affiché en mode "Etendu",
    • le bouton "Hamburger" permettant de dérouler la zone centrale de la barre de navigation est masqué.
  • Dans les tranches inférieures :
    • le champ Barre de navigation est surchargé pour être affiché en mode "Compact".
    • le bouton "Hamburger" permettant de dérouler la zone centrale de la barre de navigation est affiché. Ce champ a pour action "Enrouler/Dérouler la barre de navigation". Cette action permet d'afficher la zone centrale sous forme de popup.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Caractéristiques du champ Barre de navigation

Choix du mode d'affichage

Pour configurer le mode d'affichage du champ Barre de navigation :
  1. Affichez la fenêtre de description du champ Barre de navigation.
  2. Dans l'onglet "IHM", configurez le mode d'affichage du champ :
  3. Validez.
Remarque : Le mode d'affichage peut être surchargé par tranche. Par défaut, lors de la création du champ Barre de navigation, cette surcharge est effectuée pour toutes les tranches inférieures.

Options de style disponibles

Dans l'onglet "Style" de la fenêtre de description du champ Barre de navigation, il est possible de paramétrer :
  • Le style CSS de la barre de navigation,
  • Le style CSS du volet déroulé.
  • Les effets utilisés pour le déroulé : déroulé en recouvrant, déroulé en poussant, ...
Manipulations sous l'éditeur

Manipulation du champ sous l'éditeur

Le champ Barre de navigation est un champ conteneur dont l'aspect varie selon le mode d'affichage utilisé.
Sous l'éditeur, le champ Barre de navigation est divisé en 3 volets : gauche (1), centre (2) et droite (3). La taille et l'affichage des volets varient selon le mode d'affichage du champ Barre de navigation.
  • En mode "Etendu" : Les 3 volets sont affichés sous l'éditeur.
    Vous pouvez placer les champs dans les différents volets (logo, menu, liens, ...).
  • En mode "Compact" : Le volet central (2) n'est plus affiché (il est hachuré sous l'éditeur). Les champs sont présents dans la zone déroulée.
    Pour visualiser et éditer cette zone déroulée sous l'éditeur, il suffit de cliquer sur la zone hachurée (il est également possible d'utiliser l'option "Editer le volet enroulé" du menu contextuel du champ).
    La zone déroulée apparaît en édition (entourée par un cadre jaune). Vous pouvez effectuer les modifications voulues. Pour sortir de l'édition, utilisez la touche ESC.
Remarques :
  • Dans les volets, n'importe quel type de champ peut être utilisé.
  • Les volets ne sont pas manipulables par programmation.

Personnalisations par tranche disponibles

Les éléments suivants du champ Barre de navigation peuvent être personnalisés par tranche :
  • la position des champs dans les volets.
  • la position des champs dans le volet central (en mode enroulé ou déroulé).
  • le mode d'affichage du champ (étendu ou compact).
  • la taille des volets.
Il est également possible de masquer un volet dans une tranche.
Affichage de la zone déroulée en exécution
Pour afficher la zone centrale de la barre de modification en exécution, deux méthodes sont disponibles :

Utilisation d'une action prédéfinie

L'action prédéfinie "Enrouler/Dérouler la barre de navigation" permet d'afficher la zone centrale de la barre de navigation dans une popup. Cette action est disponible dans les champs Bouton et Lien par exemple :
Remarques :
  • Le champ associé à l'action prédéfinie "Enrouler/Dérouler la barre de navigation" n'est pas obligatoirement présent dans la barre de navigation.
  • Par défaut, le champ Barre de navigation utilise un bouton "Hamburger" pour dérouler la barre de navigation.

Utilisation de la propriété ..Enroulé par programmation

La propriété ..Enroulé utilisée en code navigateur sur le champ Barre de navigation permet d'enrouler ou de dérouler la zone centrale de la barre de navigation.
Il est par exemple possible d'utiliser la propriété ..Enroulé dans le code de survol d'un champ.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire