Navigation mobile

Le thème HCL Digital Experience Portal V.Next 8.5 prêt à l'emploi fournit deux nouvelles conceptions de navigation de pages réactive pour les unités mobiles. L'une est destinée aux smartphones, tandis que l'autre est conçue pour les tablettes graphiques. L'agent utilisateur pour une unité est analysé afin de déterminer quelle navigation doit être rendue sur la page du portail.

Conception de navigation de téléphone intelligent

  1. Faites défiler l'écran vers le haut pour afficher la bascule de navigation : lorsque le portail est chargé, ce niveau de navigation est masqué afin d'agrandir au maximum l'espace sur un smartphone.
  2. Utilisez le bouton de navigation pour afficher la navigation pour votre portail.
  3. Utilisez ce lien pour revenir à la page d'accueil du portail.
  4. Utilisez le nom de la page pour charger une page spécifique.
  5. Utilisez la flèche en regard du nom de la page pour afficher les pages enfant de cette page.

Conception de navigation de tablette graphique

Page d'accueil affichée sur une tablette graphique.

  1. Utilisez le bouton de navigation pour afficher la navigation pour votre portail.
  2. Utilisez ce lien pour revenir à votre page d'accueil du portail.
  3. Sélectionnez le bouton en forme de flèche pour afficher la navigation.
  4. Utilisez le nom de la page pour ouvrir une page spécifique.
  5. Utilisez la flèche en regard du nom de la page pour afficher les pages enfant de cette page.
Vous pouvez ouvrir la navigation et la navigation du portail séparément ou simultanément sans incidence sur la fonctionnalité du portail.

Marquage de navigation mobile

Le balisage de la navigation mobile sur les smartphones et les tablettes graphiques est créé par le fichier mobileNavigation.jsp pour le thème qui se trouve sous PortalServer_root/theme/wp.theme.themes/default85/installedApps/DefaultTheme85.ear/DefaultTheme85.war/themes/html/dynamicSpots. Le fichier mobileNavigation.jsp est contrôlé par la zone dynamique de navigation mobile dans le fichier theme.html : dyn-cs:id:85theme_mobileNavigation

La navigation sur des unités mobiles est rendue par le fichier mobileNavigation.jsp. De ce fait, l'élément de navigation primaire et secondaire, et la navigation latérale qui est utilisée sur le bureau ne produit aucune sortie pour une unité mobile. La navigation est rendue pour un unité mobile mais est masquée lorsque la page est chargée. Sur une tablette, il est possible de sélectionner le bouton en forme de flèche dans la bannière pour afficher la navigation. Sur un smartphone, l'utilisateur peut faire défiler l'écran vers le haut pour afficher les pages de navigation de niveau supérieur. L'espace étant réduit sur les smartphones les concepteurs de site peuvent choisir de masquer certaines pages de premier niveau, par exemple, les pages d'administration, pour ces appareils. Ajoutez les métadonnées com.ibm.portal.mobile.Hidden à la page pour masquer certaines pages de premier niveau. Par défaut, l'Administration, l'Application, et les pages du Tag Center sont masqués.

Remarque : Si la navigation développée pour votre site de portail finit par être longue sur un téléphone intelligent, il est possible que la partie inférieure de la navigation soit interrompue. Cette interruption se produit parce qu'une hauteur maximale doit être définie sur la navigation afin que les animations CSS3 fonctionnent correctement. Si votre navigation n'entre pas dans cette hauteur maximale, elle peut être ajustée en éditant le fichier mobilenav.css de votre thème personnalisé dans WebDAV sous dav:fs-type1/themes/myCustomTheme/css/. Recherchez la déclaration de style suivante, augmentez la hauteur maximale, puis sauvegardez.
.wpthemeMobileNav ul.wpthemeExpandNav {
   /* navigation lists */
   max-height: 100em;
}