Dans un tutoriel précédent, nous avons appris à personnaliser la barre supérieure de Foundation 4 à l'aide de CSS. Depuis lors, ZURB a publié Foundation 5; plus rapide, plus maigre et plus puissant que son prédécesseur. Ce qui est également remarquable, c’est que ZURB a ramené la fonctionnalité Off Canvas, que l’on pouvait trouver dans Foundation 3..

Aujourd'hui, nous allons combiner la fonctionnalité hors-toile avec notre barre de navigation supérieure. Le résultat sera une navigation personnalisée agréable pour les utilisateurs de bureau et un menu élégant hors gamme pour les utilisateurs de tablette et mobiles..

Remarque: La fonctionnalité que nous utilisons ici ne fonctionne pas pour IE8 et versions antérieures. J'ai inclus un correctif pour IE9 dans les ressources répertoriées à la fin du didacticiel..

Exigences

Pour suivre ce tutoriel, vous aurez besoin d’une expérience intermédiaire dans les domaines suivants:

• Compréhension de base de Foundation et du système de grille
• Connaissance du travail avec un projet de la fondation Sass and Compass

Commencer

Mise en place de l'environnement

Si vous ne l'avez pas déjà fait, configurez Compass et Sass à l'aide de la documentation Foundation Sass si vous avez besoin d'instructions. Si vous l'avez déjà fait, voici la configuration rapide pour créer un nouveau projet Foundation 5 à l'aide de l'invite de commande:

Invite de commande Ruby

Allez dans votre répertoire préféré

cd c: / user / votre-environnement de travail

Utilisez cette commande pour créer votre projet

fondation nouveau votre projet

Accédez à votre fichier de projet nouvellement créé

cd votre projet

Et utilisez cette commande pour obtenir une boussole pour regarder et compiler vos fichiers Sass

montre boussole

Si tout s'est bien passé, votre répertoire devrait ressembler à ceci:

Répertoire Foundation 5

Il ne reste qu’une chose, à savoir créer notre style.scss. Faites cela en créant un nouveau fichier dans le dossier scss et en nommant ce fichier style.scss. Nous aurons besoin de ce fichier plus tard. Si vous avez Compass en cours d’exécution, votre style.scss devrait déjà être compilé en unstyle.cssdéposer dans votre dossier de feuilles de style. Génial, nous avons tout configuré, commençons par coder notre structure HTML générale.

Mise en place de la structure HTML

Étape 1: Balisage général

Ouvrez votre fichier index.html et supprimez tout le contenu entre les balises body, à l'exception des scripts juste avant la . Nous en avons besoin pour que toutes les fonctions de la Fondation fonctionnent. Deuxièmement, continuez et ajoutez la ligne de code suivante dans , pour nous assurer de charger dans notre fichier CSS.

Avec cette configuration, ajoutons quelques sections et fournissons à notre page un contenu factice. Nous allons commencer par quelques notions de base, en ajoutant un en-tête, un élément principal, un service, un appel à l’action, un pied de page et une section sur le droit d’auteur..

  
 
 
 
Menu Foundation 5 Topbar / Offcanvas
 
  
  
     
  
 
 
 
Déplacement de côté pour le peuple Offcanvas!
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Vitae, moins molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis as porro is sit eligendi suscipit. Expedita, eligendi, laboriosam anima itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora i maxo facere maxi quasi est ex exqui qui existe commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctement modi ratione facil iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similaire numquam autem asperiores erreur cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id id hic laboriosam blanditiis aliquid!
 
  
  
   
 
 
 
Service n ° 1
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta à quibusdam placeat incidunt esse neque quisquam eaque rem!
 
 
 
Service n ° 3
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?
 
 
 
Service n ° 3
 
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!
 
 
  
   
 
 
 Prenez contact avec nous! 
 
 
 
      
 
 
 
© 2014
 
  
  
 

Nous avons ajouté ici une section d’en-tête avec un logo, puis une section principale divisée en une section de contenu, trois services et un appel à l’action. Enfin, il y a une section de pied de page avec trois colonnes et une section de copyright. Balisage direct jusqu'à présent, passons à la barre supérieure!

Étape 2: Marge supérieure

Nous allons envelopper notre Top Bar dans une section avec la classe section de navigation, à des fins de style. Nous allons également donner à cette section une autre classe: grand spectacle. Cela garantit que la barre supérieure ne s'affiche que pour les périphériques d'une certaine largeur minimale et supérieure. C'est l'un des nombreux Classes de visibilité que Foundation nous fournit (vous en saurez plus à ce sujet dans la documentation de ses composants). Maintenant pour le balisage:

Remarque: Incluez la barre de données dans votre navigateur. De cette façon, nous nous assurons que le code JavaScript de notre barre supérieure fonctionne correctement (comme le menu déroulant, par exemple)..

Étape 3: Balisage hors toile

Notre menu hors-toile sera masqué au-delà des limites de la fenêtre. Au moment où on presse menu, Offcanvas entrera (de gauche dans notre cas) et déplacera le contenu de la page vers la droite. Dans notre configuration, nous allons exclurel'en-tête et le pied de page dans ce mouvement. Seule la zone de contenu sera déplacée, laissant l'en-tête et le pied de page en place.. 

De plus, lorsque vous faites défiler l'écran vers le bas, notre en-tête (qui peut contenir un logo et peut-être un autre contenu) apparaîtra en haut de la page (Remarque: La page doit contenir suffisamment de contenu pour que cela fonctionne, sinon la section de pied de page flotterait également au-dessus de notre menu Offcanvas). Cela signifie que nous devons «entourer» notre toile de fond de notre section principale. Après la navigation dans la barre supérieuresection et avant notre section de contenu principal, mettez le code HTML suivant:

Faisons le décomposer. Nous avons créé deux éléments div; un avec la classe enveloppement en toile et un avec la classe enveloppe intérieure.  L'emballage hors toile masque notre contenu jusqu'à ce que le bouton de menu soit enfoncé. leemballage intérieur contient notre barre de menu de navigation, notre menu hors-toile de gauche et la section de contenu principale. Nous avons donné au navire une classe de cache-pour-grand-haut, pour vous assurer qu'il ne s'affiche que pour les appareils de moyenne et petite taille. En donnant à la classe une classe de menu de canevas laissé, nous nous assurons que notre menu hors-toile apparaît à gauche de l'écran. Les éléments de menu de notre menu hors zone sont similaires à ceux de la barre supérieure. Pour hors-toile, nous utilisons une liste non ordonnée avec une classe de hors-toile-liste faire de la magie.

Il ne reste plus qu'à donner à l'utilisateur un moyen de fermer le menu Offcanvas. Après cela nous fermons la enveloppement en toile et le enveloppe intérieure divs. Ajoutez ceci juste après la fermeture de la section principale.