Share
Een veel voorkomende trend in deze tijd is het gebruik van een vaste navigatie, die krimpt om minder opdringerig te worden terwijl de gebruiker de pagina afrolt. In deze zelfstudie laat ik je zien hoe je dit kunt bereiken door ZURBs Foundation Top Bar, some custom sass en jQuery te gebruiken. Als klap op de vuurpijl voegen we een aantal mediaquery's toe om ons menu responsief te maken. Laten we beginnen!
Je hebt een aantal dingen nodig om een goede grip op deze tutorial te krijgen:
Eerst gaan we onze werkomgeving opzetten. Als je niet weet hoe je dit moet doen met Compass en Sass, bekijk dan het gedeelte "Aan de slag" van Build a Top Bar Off-Canvas Navigation with Foundation 5.
Maak je nieuwe Foundation-project en gebruik het kompas kijken om uw project samen te stellen. We zullen onze eigen maken style.scss in de map scss voor onze aanpassingen en een algemene stijl. Met deze instelling duiken we in de algemene HTML-structuur, laten we gaan!
Start een nieuw Foundation-project, ga naar de index.html bestand en begin met het verwijderen van alle inhoud tussen de body-tags, behalve de scripts vlak voor de afsluitende body-tag. Voeg vervolgens de volgende regel toe aan uw , om onze te importeren style.css.
Vervolgens gaan we wat markeringen toevoegen, zoals de koptekst, een hoofdsectie en de voettekst, en we voegen ook wat dummy-inhoud toe om onze pagina wat vulling te geven.
Fancy Foundation Top Bar
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Et, fugiat, explicabo architecto bij praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque gevolgeuntur hic delectus molestias repudiandae reperhenitit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio opeenvolgende mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima 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 est praesentium numquam mollitia dolor ipsum modi fuga veniam fout perspiciatis quas provident optio similique iure.
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Et, fugiat, explicabo architecto bij praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque gevolgeuntur hic delectus molestias repudiandae reperhenitit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio opeenvolgende mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima 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 est praesentium numquam mollitia dolor ipsum modi fuga veniam fout perspiciatis quas provident optio similique iure.
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Et, fugiat, explicabo architecto bij praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque gevolgeuntur hic delectus molestias repudiandae reperhenitit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio opeenvolgende mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima 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 est praesentium numquam mollitia dolor ipsum modi fuga veniam fout perspiciatis quas provident optio similique iure.
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Et, fugiat, explicabo architecto bij praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque gevolgeuntur hic delectus molestias repudiandae reperhenitit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio opeenvolgende mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima 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 est praesentium numquam mollitia dolor ipsum modi fuga veniam fout perspiciatis quas provident optio similique iure.
© Copyright 2014
Hier hebben we een koptekstgedeelte gemaakt, inclusief de , een gedeelte over inhoud en een voettekst. Er zijn een paar dingen om op te merken:
Accentsconagua
.belangrijke klasse, die we zullen gebruiken om jQuery te laten weten welk element het doelwit is wanneer we naar beneden scrollen..header-fill. We zullen dit gebruiken om wat ruimte tussen de bovenkant van de browser en de inhoudsectie in te brengen, omdat onze kop wordt hersteld en een hogere Z-index heeft dan de rest van de elementen op de pagina.Vervolgens gaan we de HTML schrijven voor onze Top Bar. We hebben een titelgebied nodig voor ons logo en een sectie met een
We hebben een toegevoegd title-gebied waar we ons logo bewaren. Vervolgens hebben we onze met een klasse van top-bar-sectie en een .rechts, met al onze lijstitems. Ons beeld heeft een ID van logo afbeelding die we later in deze tutorial ook in ons jQuery nodig zullen hebben.
Als we onze browser openen en naar ons indexbestand gaan, zullen we zien dat onze basisstyling voor de Foundation veel werk voor ons doet, om dingen er leuk uit te laten zien. Ons logo past echter nog steeds niet. In de volgende stap gaan we dit repareren en onze kopnavigatie enige goede styling geven.
Om de gewenste resultaten te krijgen, hebben we een aantal basisstijlen nodig voor onze secties, met name de koptekst en de bovenste balksectie. We gaan Sass gebruiken om het te laten gebeuren.
Om te beginnen, geven we al onze secties wat basisstyling. Bekijk hieronder de Sass:
$ primaire kleur: # ef4523; / * HEADER SECTION ============================== ============================ * / .header-sectie -webkit-box-shadow: 0 0 5px 0 rgba (0, 0,0,0.4); vakschaduw: 0 0 5px 0 rgba (0,0,0,0.4); positie: vast; z-index: 999; min-breedte: 100%; .contain-to-grid background-color: rgba (255, 255, 255, 0.97); // FILL GEBRUIKT VOOR HEADER .header-fill background: #fff; hoogte: 135 px; .tablet-mobile-logo img padding-top: 30px; // GEBRUIKT VOOR JURYACTIE .padding-on-my-header opvulling: 17px 0.9375rem 62px 0.9375rem; ul.title-area img margin: -5px 0 0 0; . volledige breedte min-breedte: 100%; p line-height: 3rem; padding-bottom: 30px; / * INHOUD SECTIE ============================== ============================= * / .content-section .main-content margin-top: 35px; / * VOETERSECTIE ============================================ ============================== * / .footer-sectie achtergrond: # 333; minimale hoogte: 100 px; p color: #fff; margin-top: 50px;
We gebruiken hier een primaire kleurvariabele die we gaan gebruiken voor een deel van de Top Bar-stijl. Ons kopgedeelte heeft een mooie, subtiele doosschaduw, dus het ziet er eigenlijk naar uit dat het boven de rest van de inhoud zweeft. Door zijn positie in te stellen op vast en de z-index te maken: 999, zorgen we ervoor dat de navigatie aan de bovenkant van de browser blijft hangen wanneer we naar beneden scrollen en dat deze boven alle andere elementen op de pagina blijft.
Onze .bevatten naar raster klasse heeft een subtiele transparante witte kleur, zodat wanneer we scrollen, het lijkt alsof de header bovenop alle andere elementen zweeft. We moeten dat menu echter nog steeds repareren, dus laten we daar voor zorgen.
Nu gaan we de styling toevoegen om onze Top Bar een mooie, slanke uitstraling te geven. Je zou ook enkele van de instellingen van de bovenste balk in _settings.scss kunnen aanpassen, maar ik zal je laten zien hoe je dit kunt doen met onze eigen overrides. De Sass hieronder legt uit wat er gebeurt:
/ * TOPBAR NAVGATION ============================== ============================ * / .top-bar achtergrond: geen; opvulling: 45px 0.9375rem 90px 0.9375rem; overgang: alle 0.5s gemak 0.1s; // LOGO ADJUSTMENT ul.title-area img margin: -10px 0 0 0; .top-bar-section ul background: none; // MENU ITEMSTYLEN li a: not (.button), li.active a: not (.button) background: none; regelhoogte: 30px; lettergrootte: 12px; opvulling: 0; marge: 5px 0 0 0; text-transform: hoofdletters; // MENU ITEM HOVERS li a: not (.button): hover background: none; border-bottom: 2px solid $ primaire kleur; kleur: # 222; // MENU ITEM ACTIEF li.active a: not (.button) border-bottom: 2px solid $ primaire kleur; kleur: # 222; &: hover background: none; li margin-left: 30px; een color: # 888; // DROPDOWN MENU .top-bar-sectie ul li: hover: not (.has-form)> a color: # 333; .top-bar-section li ul.dropdown background: #fff; border: 1px solid #ddd; kleur: # 888; li border-bottom: 1px solid #ddd; marge: 0; opvulling: 5px 15px 5px 15px; .top-bar-section li ul.dropdown li a: not (.button): hover, .top-bar-section li ul.dropdown li a: not (.button) background: none; kleur: # 222; border-bottom: none; opvulling: 20px -4px 40px 45px; .top-bar-section ul.dropdown li: hover: not (.has-form)> a: not (.button) background: none; kleur: # 222; // DROPDOWN PIJL .has-dropdown> a: na border-colour: rgba (0, 0, 0, 0.5) transparant transparant; margin-top: -5px;
Notitie: We gaan het verplaatsen .padding-on-my-header klasse onder de regels voor de Top Bar. Dit is nodig voor de opvulling om die van de bovenste balk te overschrijven.
We hebben wat opvulling toegevoegd aan onze Top Bar en we hebben een overgang van 0,5s ingesteld, waardoor we 0,1s minder kunnen gebruiken. Dit zorgt voor een soepel overgangseffect wanneer ons jQuery begint. De achtergrond is ingesteld op geen, zodat onze kop de enigszins transparante kleur heeft die we onze .bevatten naar raster klasse. De rest is een basisstijl voor de menu-items van de Top Bar, vervolgkeuzemenu's, zweeftekens en actieve statussen. Niets te overdreven, maar het heeft ons een schoon resultaat gegeven door wat opvulling en witte ruimte toe te voegen.
Laten we eens kijken naar wat we tot nu toe hebben gedaan. Het begint zeker op iets te lijken! Ons menu is echter nog steeds een beetje groot voor wanneer we naar beneden scrollen. Dat is waar onze .padding-on-my-header klassestappen in.
Laten we een beetje jQuery-magie gebruiken om de .padding-on-my-header klasse op scrollen en verander het logo naar een kleiner formaat.
We gaan een init.js-bestand maken om onze jQuery-code te huisvesten. Plaats het in uw / js-map en voeg de volgende regel onder aan uw indexbestand toe, vlak voor de afsluitende body-tag, om het script op te nemen: