Share
Zurb's Foundation 4 présente une barre supérieure brillante qui est devenue presque symbolique de la construction d'un site Foundation. Aujourd'hui, nous allons voir comment vous pouvez le mettre en œuvre différemment, en le plaçant ailleurs sur la page, en vous offrant un menu de navigation horizontale personnalisé et réactif..
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, en créant notre propre style.css dans lequel nous remplacerons les différentes classes de la barre supérieure pour effectuer notre navigation personnalisée..
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!
Le fichier d'index dans votre téléchargement est livré avec du 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 en pleine largeur, rien de trop 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 une div avec un, une div avec un et. Cela met en place une structure de base de la grille.
Remarque: Pour plus d'informations sur le fonctionnement de la grille, consultez Foundation for Beginners: le système de grille.
Barre supérieure personnalisée Foundation-4
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumere facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Qui est le contenu de votre livre? Séduction, hic, eos quis quibusdam est à l’automobile! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modem rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit voluptate animi à facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!
© 2013
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:
Accentsconagua
nav avecul avecli avec = pour élargir le menu dans la disposition mobile section avecul avec et ul avec 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 dans le ul avec le vide.
Ajoutons également 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 introduisez un nouveau ul avec une classe de "menu déroulant". Pour indiquer la page actuellement active, nous pouvons attribuer à notre élément de menu actuel une classe de "active" sur l'élément li. Nous pouvons laisser le ul 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.
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 vous suffit de placer le navigateur dans une rangée 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 nous concentrerons sur la façon dont nous pouvons styler la barre supérieure et sur les classes utilisées pour cela..
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:
Fondation 4
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 pleine largeur à chaque zone pour nous assurer qu'elle occupe toute la largeur du navigateur..
body background-color: #ccc; / ** Définit les arrière-plans des différentes sections ** / .header-area background-color: # 2d465c; hauteur minimale: 160px; .navigation-area background-image: url ('… /img/navigation-container.jpg'); répéter en arrière-plan: répéter-x; .content-area padding: 50px 0 70px 0; .footer-area background-color: # 1f1f1f; couleur: #fff; hauteur minimale: 50 px; remplissage: 20px 0 0 0; .full-width min-width: 100%; position: relative; h2 color: #fff; poids de police: normal; marge supérieure: 50 px; 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. Corrigeons-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.
/ ** Change la couleur de fond, la hauteur et la marge de la bordure ** / .top-bar background: none; hauteur: 58px; hauteur de ligne: 58px; marge inférieure: 0; / ** Supprime le fond noir de la barre de menus ** / .top-bar-section ul background: none; text-transform: majuscule; / ** Supprime l'arrière-plan noir de l'élément de menu ** / .top-bar-section li a: not (.button) background: none; hauteur de ligne: 58px; rembourrage: 0 27px;
Nous avons supprimé le fond noir par défaut de la navigation, des listes de sections et des ancres de menus. Nous ajustons la hauteur, la hauteur de ligne et le remplissage, puis transformons le texte en majuscule pour l'adapter à notre design personnalisé.
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:
/ ** Change l'élément de menu actif du noir par défaut en un dégradé ** / .top-bar-section ul li.active> a background: rgb (0, 0, 0); fond: gradient linéaire (vers le bas, rgba (0, 0, 0, 0,4) 0%, rgba (0, 0, 0, 0,7) 100%) répéter le défilement 0 0 transparent; couleur: #fff; / ** Change l'état de survol des éléments de menu non actifs ** / .top-bar-section li: survolez un fond: linéaire-dégradé (vers le bas, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) répéter le défilement 0 0 transparent; couleur: #fff; / ** Change la couleur du texte des éléments de menu non actifs en noir ** / .top-bar-section ul li> a color: # 2d2d2d; / ** Modifie l’état de survol des éléments du menu déroulant ** / .top-bar-section ul.dropdown li a: survol: pas (.Bouton) arrière-plan: aucuns répéter défiler 0 0 rgba (0, 0, 0, 0,9); / ** IMPORTANT remplir pour le conteneur déroulant ul ** / .top-bar-section ul.dropdown background: # 333; couleur: #fff; / ** Ceci fixe la position et la couleur de la flèche de la liste déroulante ** / .top-bar-section .has-dropdown> a: after border-color: rgba (0, 0, 0, 1) transparent transparent; marge supérieure: 2,5 px;
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: survol a conservera l’état du menu déroulant lorsque la souris survolera les éléments déroulants. Pour compléter le CSS, nous avons donné au conteneur ul ulaire un remplissage, un remplissage d’arrière-plan et repositionné la position par défaut de la flèche, en raison de nos ajustements de remplissage dans la section supérieure..
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..
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 regardez les commentaires pour avoir une explication pour chaque section.
@media only screen et (max-width: 942px) / * Ajuste le menu réactif au conteneur de navigation et change son arrière-plan en noir * / .top-bar ul background-color: rgba (0, 0, 0, 0,5); rembourrage en bas: 13px; / * Modifie la couleur de l'élément de menu non actif en noir * / .top-bar-section ul li> a color: #fff; / * Donne au menu déroulant ul un remplissage noir * / .top-bar-section ul background: # 000; / * Donne au bouton RETOUR après avoir accédé au sous-menu le remplissage approprié * / .top-bar-section .dropdown li.title h5 a line-height: 57px; / * Ceci corrige la position et la couleur de la flèche déroulante * / .top-bar-section .has-dropdown> a: after border-color: rgba (255, 255, 255, 1) transparent transparent; marge supérieure: 2,5 px; / * Fin de la requête multimédia * /
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.
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 pouvez donc 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!
