Share
Une tendance très courante de nos jours est l'utilisation d'une navigation fixe, qui devient moins intrusive à mesure que l'utilisateur fait défiler la page. Dans ce didacticiel, je vais vous montrer comment y parvenir en utilisant la barre supérieure de la fondation ZURB, des sass personnalisées et jQuery. Pour couronner le tout, nous ajouterons quelques requêtes médiatiques pour que notre menu soit réactif. Commençons!
Vous aurez besoin de plusieurs choses pour bien maîtriser ce tutoriel:
Premièrement, nous allons configurer notre environnement de travail. Si vous ne savez pas comment faire cela avec Compass et Sass, consultez la section "Démarrage" de la section Créer une barre supérieure pour une navigation hors du canevas avec Foundation 5..
Créez votre nouveau projet de fondation et utilisez-le montre boussole pour compiler votre projet. Nous allons créer notre propre style.scss dans le dossier scss pour nos personnalisations et certains styles généraux. Avec cette configuration, nous allons plonger dans la structure HTML générale, allons-y!
Après avoir lancé un nouveau projet de la Fondation, allez au index.html fichier et commencez par supprimer tout le contenu entre les balises body, à l'exception des scripts juste avant la balise body de fermeture. Ajoutez ensuite la ligne suivante à votre , importer notre style.css.
Ensuite, nous allons ajouter des balises, comme l’en-tête, une section principale et le pied de page, et ajouter du contenu factice pour donner à notre page un aspect de remplissage..
Fancy Foundation Top Bar
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum imped eius reiciendis ad minus simili sequi molestiae voluptatem commodi aliquam supposenda numquam doloribus libero temporaancae sed animi. Rationum, tu te rires, tu meurs tu meurs Officiis, ducimus, voluptate doloremque nihil rerum conséquunto obaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam asernatur quis quaorors minus quaepitità idi Excepturi, deleniti, at, expedita quod animi harum is sit ist distinctio conséquuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus minima de neque obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore Eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque is praesentium numquam mollitia dolor ipsum modi fuga veniam erreur perspiciatis quas prévoyance optio similique iure.
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum imped eius reiciendis ad minus simili sequi molestiae voluptatem commodi aliquam supposenda numquam doloribus libero temporaancae sed animi. Rationum, tu te rires, tu meurs tu meurs Officiis, ducimus, voluptate doloremque nihil rerum conséquunto obaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam asernatur quis quaorors minus quaepitità idi Excepturi, deleniti, at, expedita quod animi harum is sit ist distinctio conséquuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus minima de neque obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore Eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque is praesentium numquam mollitia dolor ipsum modi fuga veniam erreur perspiciatis quas prévoyance optio similique iure.
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum imped eius reiciendis ad minus simili sequi molestiae voluptatem commodi aliquam supposenda numquam doloribus libero temporaancae sed animi. Rationum, tu te rires, tu meurs tu meurs Officiis, ducimus, voluptate doloremque nihil rerum conséquunto obaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam asernatur quis quaorors minus quaepitità idi Excepturi, deleniti, at, expedita quod animi harum is sit ist distinctio conséquuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus minima de neque obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore Eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque is praesentium numquam mollitia dolor ipsum modi fuga veniam erreur perspiciatis quas prévoyance optio similique iure.
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum imped eius reiciendis ad minus simili sequi molestiae voluptatem commodi aliquam supposenda numquam doloribus libero temporaancae sed animi. Rationum, tu te rires, tu meurs tu meurs Officiis, ducimus, voluptate doloremque nihil rerum conséquunto obaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam asernatur quis quaorors minus quaepitità idi Excepturi, deleniti, at, expedita quod animi harum is sit ist distinctio conséquuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus minima de neque obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore Eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque is praesentium numquam mollitia dolor ipsum modi fuga veniam erreur perspiciatis quas prévoyance optio similique iure.
© Copyright 2014
Ici, nous avons créé une section d’en-tête, incluant le , une section de contenu et une section de pied de page. Il y a quelques points à noter:
Accentsconagua
.classe importante, que nous allons utiliser pour dire à jQuery quel élément cibler quand nous allons faire défiler..en-tête-remplir. Nous allons utiliser cela pour mettre un peu d'espace entre le haut du navigateur et la section de contenu, car notre en-tête sera fixe et a un indice z supérieur au reste des éléments de la page..Ensuite, nous allons écrire le code HTML pour notre barre supérieure. Nous avons besoin d’une zone de titre pour notre logo et d’une section avec un
Nous avons ajouté un zone de titre où nous gardons notre logo. Ensuite, nous avons notre avec une classe de partie supérieure de la barre Et un .droite, contenant tous nos éléments de liste. Notre image a un identifiant de image logo dont nous aurons également besoin dans notre jQuery plus tard dans ce tutoriel.
Si nous ouvrons notre navigateur et consultons notre fichier d’index, nous constaterons que notre style de base Foundation fait beaucoup de travail pour nous, afin de rendre les choses plus agréables. Notre logo ne correspond toujours pas. Dans la prochaine étape, nous allons résoudre ce problème et donner à notre navigation en-tête un style approprié.
Pour obtenir les résultats souhaités, nous avons besoin d'un style de base pour nos sections, en particulier l'en-tête et la section Barre supérieure. Nous allons utiliser Sass pour y arriver.
Pour commencer, nous allons donner à toutes nos sections un style de base. Jetez un coup d'œil au Sass ci-dessous:
$ primary-color: # ef4523; / * HEADER SECTION ============================================ =========================== * / .header-section -webkit-box-shadow: 0 0 5px 0 rgba (0, 0,0,0,4); boîte-ombre: 0 0 5px 0 rgba (0,0,0,0,4); position: fixe; z-index: 999; largeur min .: 100%; .Contain-to-Grid background-color: rgba (255, 255, 255, 0.97); // FILL UTILISE POUR HEADER .header-fill background: #fff; hauteur: 135px; .tablet-mobile-logo img padding-top: 30px; // UTILISÉ POUR JQUERY ACTION .padding-on-my-header padding: 17px 0.9375rem 62px 0.9375rem; ul.title-area img marge: -5px 0 0 0; .full-width min-width: 100%; p line-height: 3rem; rembourrage en bas: 30px; / * SECTION CONTENU =========================================== ============================= * / .content-section .main-content margin-top: 35px; / * FOOTER SECTION ========================================== ============================= * / .footer-section background: # 333; hauteur min .: 100px; p color: #fff; marge supérieure: 50 px;
Nous utilisons ici une variable de couleur primaire, que nous allons utiliser pour certains styles de la barre supérieure. Notre section d'en-tête a une belle et subtile boîte-ombre, donc on dirait qu'elle flotte au-dessus du reste du contenu. En réglant sa position sur fixed et en faisant l'index z: 999, nous nous assurons que la navigation reste en haut du navigateur lorsque nous faisons défiler l'écran et qu'elle reste au-dessus de tous les autres éléments de la page..
Notre .contenir-to-grid La classe a une couleur blanche transparente subtile, de sorte que lorsque nous faisons défiler, il semble que l'en-tête flotte au-dessus de tous les autres éléments. Nous avons encore besoin de corriger ce menu, alors prenons soin de cela.
Nous allons maintenant ajouter le style pour donner à notre Top Bar un look élégant et élégant. Vous pouvez également ajuster certains paramètres de la barre supérieure dans _settings.scss, mais je vais vous montrer comment faire cela en utilisant nos propres remplacements personnalisés. Le Sass ci-dessous explique ce qui se passe où:
/ * TOPBAR NAVGATION =========================================== ============================ * / .top-bar background: none; remplissage: 45px 0,9375rem 90px 0,9375rem; transition: tous les 0.5s facilitent 0.1s; // AJUSTEMENT DU LOGO ul.title-area img margin: -10px 0 0 0; .top-bar-section ul background: none; // ÉLÉMENTS DE MENU STYLES li a: pas (. Bouton), li.active a: pas (. Bouton) background: none; hauteur de ligne: 30px; taille de police: 12px; rembourrage: 0; marge: 5px 0 0 0; text-transform: majuscule; // élément de menu bascule li a: pas (. Bouton): hover background: none; border-bottom: 2px solid $ couleur primaire; couleur: # 222; // ÉLÉMENT DE MENU ACTIVE li.active a: not (.button) border-bottom: 2px solid $ primary-color; couleur: # 222; &: hover background: none; li margin-left: 30px; un couleur: # 888; // MENU DÉROULANT. Section .top-bar ul li: survol: pas (.has-form)> a color: # 333; .top-bar-section li ul.dropdown background: #fff; bordure: 1px solide #ddd; couleur: # 888; li border-bottom: 1px solid #ddd; marge: 0; remplissage: 5px 15px 5px 15px; . couleur: # 222; bordure inférieure: aucune; remplissage: 20px -4px 40px 45px; .top-bar-section ul.dropdown li: survol: pas (.has-form)> a: pas (.button) background: none; couleur: # 222; // DROPDOWN ARROW .has-dropdown> a: after border-color: rgba (0, 0, 0, 0.5) transparent transparent; marge supérieure: -5px;
Remarque: Nous allons déplacer le .remplissage sur mon en-tête classe en dessous des règles de la barre supérieure. Cela est nécessaire pour que le rembourrage écrase celui de la barre supérieure..
Nous avons ajouté un peu de rembourrage à notre barre supérieure et nous avons défini une transition de 0,5 seconde, facilité 0.1 seconde. Cela fournira un effet de transition en douceur lorsque notre jQuery démarrera. Le fond est défini sur aucun, de sorte que notre en-tête a la couleur légèrement transparente que nous avons donnée à notre .contenir-to-grid classe. Le reste consiste en un style de base pour les éléments de menu, les menus déroulants, les survols et les états actifs de la barre supérieure. Rien de trop exagéré, mais cela nous a donné un résultat net en ajoutant un peu de rembourrage et d’espace blanc.
Jetons un coup d'oeil à ce que nous avons jusqu'à présent. Cela commence certainement à ressembler à quelque chose! Cependant, notre menu est encore un peu gros pour quand nous faisons défiler la page. C'est là que nos .remplissage sur mon en-tête pas de classe.
Utilisons un peu de magie jQuery pour ajouter le .remplissage sur mon en-tête classe sur le défilement et change le logo en un plus petit.
Nous allons créer un fichier init.js pour héberger notre code jQuery. Placez-le dans votre dossier / js et incluez la ligne suivante au bas de votre fichier d'index, juste avant la balise body de fermeture, pour inclure le script: