CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Créer un Menu avec jQuery Mobile

Retour à la formation
Chapitre 10 Leçon 10
Précédent
Suivant

Découvrez comment réaliser un menu avec jQuery mobile en utilisant des balises HTML et CSS.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons apprendre à créer un menu en utilisant jQuery mobile. Les menus dans jQuery mobile sont simplement constitués d'une liste de liens placés dans une balise <ul> ou <ol>, le tout enveloppé dans un bloc <div> avec l'attribut data-role égal à navbar. jQuery mobile mettra automatiquement en forme cette structure.
La barre de navigation s'adaptera à la place disponible et variera légèrement en fonction de sa position dans la page, que ce soit dans la zone header, content ou footer. Nous allons créer une barre de menu dans la zone header, en modifiant un peu le titre en le plaçant dans une balise <h1>, puis ajouterons une balise <div> avec data-role égal à navbar pour englober notre liste de menus. À l'intérieur, nous utiliserons une balise <ul> et remplirons la liste avec des liens.
Visionnez la vidéo pour voir la procédure détaillée et le résultat dans le simulateur.

Objectifs de cette leçon

L'objectif de cette vidéo est de vous guider dans la création d'une barre de navigation en utilisant des balises HTML et jQuery mobile de manière efficace.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML, CSS et jQuery.

Métiers concernés

Les compétences abordées dans cette vidéo sont particulièrement utiles pour les développeurs front-end, les concepteurs web et les professions nécessitant une maîtrise des interfaces utilisateurs.

Alternatives et ressources

En dehors de jQuery mobile, vous pouvez utiliser Bootstrap, Foundation, ou Semantic UI pour créer des barres de navigation similaires.

Questions & Réponses

L'attribut data-role est utilisé dans jQuery mobile pour définir le rôle ou le type de widget, tel qu'une barre de navigation (navbar).
jQuery mobile formate automatiquement une liste de liens en ajoutant des styles et des comportements appropriés, comme l'alignement horizontal, lorsque les éléments sont enveloppés dans une balise avec data-role='navbar'.
La barre de navigation aura une mise en forme légèrement différente selon qu'elle est placée dans la zone header, content ou footer, afin de s'adapter au contexte visuel de la page.