Comment personnaliser la Foundation 4 Top Bar

() translation by (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.

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.

<!-- HEADER AREA -->
<header class="full-width header-area">
  <div class="row">
		<div class="large-12 columns">
			<h2>Foundation-4 Custom Top Bar</h2>
		</div>
	</div>
</header> 

<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
	<div class="row">
		<div class="large-12 columns">
							
			<nav class="top-bar"></nav>
		</div>
	</div>
</div>

<!-- CONTENT AREA -->
<div class="full-width content-area">
	<div class="row">
		<div class="large-12 columns">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at 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!</p>
		</div>
	</div>
</div>

<!-- FOOTER AREA -->
<div class="full-width footer-area">
	<div class="row">
		<div class="large-12 columns">
			&copy; 2013
		</div>
	</div>
</div>

É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.

<!-- Nav Wrap --> 
<nav class="top-bar">
	<ul class="title-area">
	<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<!-- The Section wrap -->
	<section class="top-bar-section">
	
		<!-- Left Nav Section -->
		<ul class="left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Prices</a></li>
			<li class="has-dropdown">
				<a href="#">Features</a>
				<ul class="dropdown">
					<li><a href="#">Modalboxes</a></li>
					<li><a href="#">Submenu's and navigation</a></li>
					<li><a href="#">Price tables</a></li>
					<li><a href="#">Buttons</a></li>
					<li><a href="#">Button groups</a></li>
					<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
					<li><a href="#">Alert boxes</a></li>
					<li><a href="#">Columns</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right"></ul>

	</section>
</nav>

É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.

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:

<head>
    <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 	<title>Foundation 4</title>

 	<link rel="stylesheet" href="css/foundation.css">
 	<link rel="stylesheet" href="css/style.css">
 
 	<script src="js/vendor/custom.modernizr.js"></script>
</head>

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.

body {
	background-color: #ccc;
}

/** Set the backgrounds for the different sections **/
.header-area {
    background-color: #2d465c;
    min-height: 160px;
}

.navigation-area {
	background-image: url('../img/navigation-container.jpg');
	background-repeat: repeat-x;
}

.content-area {
	padding: 50px 0 70px 0;
}

.footer-area {
    background-color: #1f1f1f;	
    color: #fff;
	min-height: 50px;
	padding: 20px 0 0 0;
}

.full-width {
	min-width:100%;
	position: relative;
}

h2 {
	color: #fff;
	font-weight: normal;
	margin-top: 50px;
}

É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.

/** Changes background color, height and margin of the border **/
.top-bar {
    background: none;
    height: 58px;
    line-height: 58px;
    margin-bottom: 0;
}

/** Removes black background on menu bar **/
.top-bar-section ul {
    background: none;
    text-transform: uppercase;
}

/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
    background: none;
    line-height: 58px;
    padding: 0 27px;
}

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:

/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
    background:  rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
    color: #2d2d2d;
}

/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}

/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
    background: #333;
    color: #fff;
}

/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 1) transparent transparent;
    margin-top: 2.5px;
}

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-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.

@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */
    .top-bar ul {
        background-color: rgba(0, 0, 0, 0.5);
        padding-bottom: 13px;
    }

    /* Change non active menu item color to black */
    .top-bar-section ul li > a {
        color: #fff;
    }

    /* Gives the dropdown ul a black fill */
    .top-bar-section ul {
        background: #000;
    }

    /* Give the BACK button after going in a submenu the appropriate filling */
    .top-bar-section .dropdown li.title h5 a {
        line-height: 57px;
    }

    /* This fixes the position and the color of the dropdown arrow */
    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(255, 255, 255, 1) transparent transparent;
        margin-top: 2.5px;
    }

} /* end media query */

É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-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!