Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML & CSS

Comment personnaliser la Foundation 4 Top Bar

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

French (Français) translation by Federicco Ancie (you can also view the original English article)

Zurb's Foundation 4 présente une barre supérieure brillante devenue presque symbolique de la construction du site Foundation. Aujourd'hui, nous allons voir comment vous pouvez le mettre en œuvre différemment, en le plaçant ailleurs sur la page, pour vous offrir un menu de navigation horizontale personnalisé et réactif.


Commencer

Tout d'abord, nous aurons besoin de la dernière fondation. Décompressez et placez tous les fichiers dans votre répertoire de travail ou de test. Nous n'utiliserons que index.html pour créer notre propre style.css, dans lequel nous remplacerons les différentes classes de la barre supérieure pour créer notre navigation personnalisée.

foundation-downloadfoundation-downloadfoundation-download

Téléchargez également l'image de fond fournie ci-dessus. Nous allons utiliser cela pour le menu, alors placez-le dans votre dossier "img". Avoir tout? Puis lancez votre éditeur préféré et allons-y!


Mise en place de la structure HTML

Étape 1: Balisage général

Le fichier d'index de votre téléchargement est livré avec du code HTML prédéfini. Vous pouvez tout laisser tel que vous le trouvez dans la balise d’en-tête et les liens de script (avant la balise body de fermeture) là où ils se trouvent. Nous avons besoin de tout cela pour nous assurer que la grille et la barre supérieure fonctionnent réellement.

Vous pouvez effacer le reste du contenu factice. Nous visons ici une conception pleine largeur, rien de compliqué, juste quelque chose pour avoir une meilleure idée de ce avec quoi nous travaillons.

Très bien, définissons l’en-tête, la navigation, le contenu et la zone de pied de page, ainsi que du contenu factice aux fins de remplissage. Nous allons donner à chaque zone une classe de "pleine largeur", puis dans chaque zone nous placerons un div avec un class = "row", un div avec un class = "large-12" et un class = "colonnes". Ceci établit une structure de base en grille.

Remarque: pour plus d'informations sur le fonctionnement de la grille, consultez Foundation for Beginners: le système de grille.

Étape 2: Marquage de la barre supérieure

Avant d’obtenir un style, nous exposerons la structure HTML essentielle au bon fonctionnement de Foundation Top Bar. Nous avons besoin de cinq éléments de base pour que le moteur tourne:

  • nav avec class = "top-bar"
  • ul avec class = "title-area"
  • li with class = "toggle-topbar" = pour développer le menu dans la disposition mobile
  • section avec class = "top-bar-section"
  • ul avec class = "left" et ul avec class = "right"

Maintenant, configurons ces bases et implémentons les cinq éléments.

Remarque: Dans cet exemple de didacticiel, nous souhaitons créer un menu de navigation personnalisé, supprimant ainsi le titre qu'il contient (qui contient généralement le logo, sous forme de texte ou d'image). Pour ce faire, nous laissons simplement le li avec class = "name" dans le ul avec le class = "title-area" vide.

Aussi, ajoutons quelques éléments de menu et un menu déroulant pendant que nous y sommes. Pour inclure un menu déroulant, ajoutez la classe "has-dropdown" à l'élément li que vous souhaitez contenir, puis indiquez un nouveau ul avec une classe de "menu déroulant". Pour indiquer la page active, nous pouvons attribuer à notre élément de menu actuel une classe "active" sur l'élément li. Nous pouvons laisser la classe ul = "right" vide. Normalement, vous utiliseriez cette zone pour ajouter un bouton ou un formulaire de saisie de recherche. Pour plus d'informations sur les spécificités du marquage de la barre supérieure, consultez Fondation pour les débutants: la barre supérieure.

Regardez le HTML suivant, les commentaires expliquent comment il se construit.

Étape 3: Les résultats jusqu'à présent

Regardez les résultats dans votre navigateur. Nous avons maintenant configuré un cadre de base de base en utilisant la barre supérieure pour créer un menu horizontal. Pour le placer ailleurs que dans la partie supérieure du navigateur, il suffit de placer nav class = "top-bar" dans une ligne et des colonnes div.

Lorsque vous redimensionnez le navigateur, vous pouvez voir que le menu change au point de rupture prédéfini.

L'étape suivante consiste à personnaliser le style. Nous allons nous concentrer sur la manière dont nous pouvons styler la barre supérieure et sur les classes utilisées à cette fin.

foundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layoutfoundation-4-custom-top-bar-html-layout

Mise en place du CSS

Étape 1: Style général

Si ce n'est déjà fait, créez un nouveau fichier CSS, nommez-le style.css et placez-le dans le dossier css de votre téléchargement Foundation. N'oubliez pas de l'inclure dans la balise d'en-tête de votre fichier d'index, en le référençant sous le fichier foundation.css comme suit:

Si vous ne le placez pas dans le fichier foundation.css, il ne remplacera pas les classes de la barre supérieure.

Très bien, commençons par un style de base sur l’en-tête, la navigation, le contenu et la zone de pied de page. Pour la zone de navigation, nous utiliserons une image d’arrière-plan, que vous aurez précédemment téléchargée. La conception générale n’est pas un gros problème, jetez un coup d’œil au CSS ci-dessous. Nous ajoutons une classe de largeur complète à chaque zone pour nous assurer qu’elle occupe toute la largeur du navigateur.

Étape 2: Styles de barre supérieure

Si vous regardez les résultats maintenant, le menu a toujours l’air un peu déplacé. C'est parce qu'il utilise toujours le CSS par défaut. Réparons-le!

Il y a quelques classes de CSS que nous devons aborder pour obtenir les résultats souhaités. Tout d'abord, nous allons supprimer une partie du fond noir de la classe .top-bar et des listes de sections, puis modifier la hauteur et la hauteur de ligne à 58px (hauteur de la zone de navigation). Découvrez les commentaires pour plus d'explications.

Nous avons supprimé le fond noir par défaut de nav class = "top-bar", des listes de sections et des ancres de menus. Nous ajustons la hauteur, la hauteur de ligne et le rembourrage et transformons le texte en majuscule pour l'adapter à notre conception personnalisée.

Si vous actualisez votre navigateur, vous verrez qu'il commence à prendre forme. Continuons avec les menus déroulants, les éléments de menu, les états actif et survolé. Regardez le CSS ci-dessous et lisez à nouveau le texte commenté pour une explication:

Nous avons apporté plusieurs modifications à notre menu ici. Tout d'abord, nous avons changé le fond noir par défaut de l'élément de menu actif en un dégradé CSS. Nous avons ensuite attribué aux éléments de menu non actifs un état de survol de réemballement. Pour rendre les éléments de menu non actifs plus clairement visibles, nous changeons la couleur du texte en gris foncé. Les modifications apportées sur .top-bar-section li: survoler a maintiendront l’état du menu déroulant survolé lorsque votre souris passera sur les éléments déroulants. Pour compléter le CSS, nous avons donné au conteneur ul ul dropdown un remplissage d’arrière-plan et repositionné la position par défaut de la flèche déroulante, en raison de nos ajustements de remplissage dans la section supérieure.

Étape 3: Les résultats jusqu'à présent

Actualisez votre navigateur et examinez les résultats obtenus jusqu'à présent. Nous n'avons pas encore fini; nous devons toujours nous assurer que tout semble bien lorsque nous redimensionnons la taille de l'écran de notre navigateur (ou, d'ailleurs, lorsque nous l'examinons sur un appareil plus petit). Pour ce faire, nous allons ajouter des requêtes multimédia à notre fichier CSS.

foundation-4-custom-top-bar-final-productfoundation-4-custom-top-bar-final-productfoundation-4-custom-top-bar-final-product

Configuration des requêtes multimédia

Étape 1: Requêtes avec les médias

Nous devons ajuster quelques éléments pour que le menu fonctionne avec notre conception personnalisée lorsque la taille de l’écran est réduite. Cela implique principalement l'ajout de rembourrages, de hauteur de ligne, de couleurs de texte et de couleurs d'arrière-plan. Jetez un coup d'œil au CSS ci-dessous et examinez les commentaires pour obtenir une explication de chaque section.

Étape 2: profitez de vos résultats

Enregistrez le fichier, actualisez votre navigateur et jouez avec la taille du navigateur. Comme vous pouvez le constater, le menu s’intègre parfaitement dans notre design.

foundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsivefoundation-4-custom-top-bar-final-product-responsive

Conclusion

Cela termine donc notre didacticiel sur la manière de créer un menu réactif personnalisé à l’aide de la barre supérieure du framework Foundation 4. Et rappelez-vous, le menu ne doit pas nécessairement être en haut de la page. Il suffit de l’envelopper dans ses propres rangs et colonnes, vous pourrez ainsi le placer pratiquement où vous le souhaitez!

Foundation est un excellent outil pour développer rapidement des conceptions réactives. Lorsque vous connaissez votre chemin, vous pouvez le façonner à votre guise. S'amuser!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.