Créer un menu XL

Afficher un sous-menu de grande largeur (aussi appelé « Menu XL ») dans la barre de navigation peut parfois être utile. Nous allons voir ici comment procéder.

Le menu XL est basé sur l’utilisation du système de grille Bootstrap-v2.
Par défaut, ce système utilise 12 colonnes, et s’adapte à la largeur de l’écran.

Créer l’entrée principale.

Dans le menu barrenav, ajouter une entrée « Lien arbitraire »

Compléter les champs :

  • Nom : Le nom que vous souhaitez donner à l’item, dans l’exemple Formations
  • Adresse : Saisissez le signe # (dièse)
  • Classe CSS de l’entrée (du conteneur) : menu-xl
  • Classe CSS du lien : Laisser vide

Enregistrer.

Créer les colonnes.

Créer un sous-menu dans l’entrée créée, dans l’exemple Formations

Ajouter les entrées dans le sous-menu.

C’est ici que l’utilisation du système de grille Bootstrap entre en jeu. Dans le sous-menu, nous allons créer autant d’entrées « Texte libre » que nous voulons de colonnes dans le menu XL, puis pour chaque entrée, nous allons compléter le champ Nom avec le nom que nous voulons donner à la colonne et surtout, dans le champ Classe css de l’entrée (du conteneur), nous allons associer la class spanX correspondant à la largeur de colonne souhaitée.

Exemples : Le système de grille étant basé sur 12 colonnes, si nous souhaitons obtenir 4 colonnes de largeurs égales, nous allons créer 4 entrées « Texte libre » et, dans le champ Classe css de l’entrée (du conteneur) de chaque entrée, associer la classe span3 (4[colonnes] x [span]3 = 12).

Pour afficher 3 colonnes de largeurs égales, nous allons créer 3 entrées « Texte libre » et pour chaque entrée, associer la classe span4 (3[colonnes] x [span]4 = 12).

Pour afficher 3 colonnes de largeurs différentes, nous pourrons associer la classe span3 à la première entrée, puis span5 à la deuxième et span4 à la troisième ( [span]3 + [span]5 + [span]4 = 12)

Dans notre exemple, nous choisissons de créer 4 entrées CAP, BACS-PRO, BACS et BTS de largeurs égales. Nous allons donc saisir dans le champ Classe css de l’entrée (du conteneur) de chaque entrée la classe span3.

Les entrées du sous-menu principal étant créées, nous allons maintenant y ajouter pour chacune un sous-menu, puis les entrées souhaitées dans ce sous-menu.

Vous pouvez ajouter presque tous les types d’entrées, en prenant exemple sur le menu XL présent dans la barre de navigation de cette page.

Vous pouvez aussi télécharger le menu et l’importer dans votre site pour ensuite, le modifier à votre guise.

Partager

Imprimer cette page (impression du contenu de la page)