Share
Zurb's Foundation 4 are un bar superb, care a devenit aproape simbolic pentru construirea unui site al Fundației. Astăzi vom examina modul în care o puteți implementa într-un mod diferit, plasându-l în altă parte a paginii, oferindu-vă un meniu de navigare personalizat și receptiv.
În primul rând, avem nevoie de cea mai recentă Fundație. Dezarhivați și plasați toate fișierele din directorul dvs. de lucru sau de testare. Vom folosi doar index.html, făcând propriul stil.css în care vom înlocui diferitele clase ale barei de sus pentru a face navigarea personalizată.
De asemenea, descărcați imaginea de fundal furnizată mai sus. Vom folosi acest lucru pentru meniu, așadar plasați-l în folderul "img". Aveți totul? Apoi aprinde editorul dvs. preferat și hai să mergem!
Fișierul index al descărcării dvs. vine cu un anumit cod HTML prestabilit. Puteți lăsa totul așa cum o găsiți în eticheta antetului și puteți lăsa legăturile de script (înainte de eticheta de închidere a corpului) unde sunt. Avem nevoie de toate astea pentru a ne asigura că Gridul și Barul Top funcționează.
Puteți șterge restul conținutului inactiv. Mergem aici pentru un design de lățime întreagă, nimic prea complicat, doar ceva pentru a avea o idee mai bună despre ceea ce lucrăm.
În regulă, să setăm zona antetului, navigării, conținutului și subsolului și să punem în conținut un conținut inactiv pentru scopuri de umplere. Vom da fiecărei zone o clasă de "lățime întreagă", apoi în fiecare zonă vom plasa div cu a, div cu a și. Aceasta stabilește o structură de bază a rețelei.
Notă: Pentru mai multe informații despre funcționarea rețelei, consultați Fundația pentru începători: Sistemul de grilă
Fundal-4 personalizat Top Bar
Lorem ipsum dolor stați 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 aliquam numquam necessitatibus odio et perspiciatis facere nihil inventor el aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum autoptio repudiandae la! Eligendi, neque ratione alias enim que magnam dolores esse pariatur laborum reumende nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere que saepe pariatur magni dolorem cum ar fi nemo quis laborum ipsa dignissimos ducimus inventor modi rem cum quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur acusamus exceptions rem quaerat impedit animi voluptate la facilite aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quo oficios quas sapiente nam dolor praesentium maxime cupiditate illum? Remus, esel, nulla vitae adipisci sequi deleniti cvasi!
© 2013
Înainte de a lua stilul, vom stabili structura HTML esențială pentru ca Fundația Top Bar să funcționeze corect. Avem nevoie de cinci elemente de bază pentru a face motorul să funcționeze:
Accentsconagua
nav cuul culi cu = pentru a extinde meniul în aspectul mobil secțiune cuul cu și ul cu Acum, să stabilim aceste elemente de bază și să implementăm cele cinci elemente.
Notă: În acest exemplu de tutorial vom dori să realizăm un meniu de navigare personalizat, eliminând astfel titlul din acesta (care de obicei deține logo-ul în formă text sau imagine). Pentru a face acest lucru, pur și simplu lăsăm litera li în ul cu gol.
De asemenea, să adăugăm câteva elemente de meniu și un meniu derulant în timp ce suntem la el. Pentru a include un dropdown adăugați clasa "has-dropdown" la elementul li pe care doriți să îl conțineți, apoi aduceți un nou ul cu o clasă de "dropdown". Pentru a indica pagina actuală activă, putem da elementului nostru de meniu curent o clasă de "activ" pe elementul li. Putem lăsa ul gol. În mod normal, ați folosi această zonă pentru a adăuga un buton sau un formular de căutare. Pentru mai multe informații despre specificul marcajului barului superior, aruncăm o privire la Fundația pentru începători: Top Bar.
Uitați-vă la următorul cod HTML, comentariile explică modul în care se construiește.
Uitați-vă la rezultatele din browserul dvs. Am creat acum un cadru de bază al Fundației folosind Top Bar pentru a crea un meniu orizontal. Pentru al plasa undeva în altă parte decât în partea de sus a browser-ului este pur și simplu să puneți navă într-un rând și coloane div.
Când redimensionați browserul, puteți vedea că meniul se modifică la punctul de pauză predefinit.
Următorul pas este să-i dați un stil particularizat. Vom concentra asupra modului in care putem modela Top Bar-ul si care clase sunt folosite pentru asta.
Dacă nu ați făcut deja acest lucru, creați un nou fișier CSS, numiți-l stil.css și plasați-l în dosarul css al descărcării de la Fundația dvs. Nu uitați să-l includeți în tag-ul antetului în fișierul index, referindu-l sub fundația .css așa cum este:
Fundația 4
Dacă nu o plasați sub fundația .css, aceasta nu va suprascrie clasele Top Bar.
Bine, să vedem mai întâi un stil de bază în zona headerului, navigării, conținutului și subsolului. Pentru zona de navigare, vom folosi o imagine de fundal, pe care ați descărcat-o anterior. Design-ul general nu este așa de mare de acord, aruncă o privire la CSS de mai jos. Adăugăm o clasă cu lățime întreagă în fiecare zonă pentru a vă asigura că umple lățimea totală a browserului.
corp fundal-culoare: #ccc; / ** Setați fundalul pentru diferitele secțiuni ** / .caper-area background-color: # 2d465c; min-înălțime: 160px; .pagina de navigație background-image: url ('... /img/navigation-container.jpg'); background-repeat: repeat-x; .pagina de conținut padding: 50px 0 70px 0; . fundal-zonă background-color: # 1f1f1f; culoare: #fff; min-înălțime: 50 pixeli; padding: 20px 0 0 0; .plată-lățime min-lățime: 100%; poziție: relativă; h2 culoare: #fff; font-weight: normal; margin-top: 50px; Dacă te uiți la rezultatele acum, meniul mai pare puțin cam în afara locului. Aceasta deoarece folosește în continuare CSS implicit. Să rezolvăm problema!
Există câteva clase CSS pe care trebuie să le adresăm pentru a obține rezultatele dorite. Mai întâi, vom elimina o parte din fundalul negru din clasa .top-bar și lista de secțiuni și vom schimba înălțimea și înălțimea liniei la 58px (înălțimea zonei de navigație). Consultați comentariile pentru explicații suplimentare.
/ ** Modifică culoarea de fundal, înălțimea și marginea marginii ** / .top-bar background: none; înălțime: 58px; line-height: 58px; marginea inferioară: 0; / ** Elimină fundalul negru din bara de meniu ** / .top-bar-section ul background: none; text-transform: majuscule; / ** Elimină fundalul negru pe elementul de meniu ** / .top-bar-section li a: nu (.button) background: none; line-height: 58px; padding: 0 27px;
Am eliminat fundalul negru implicit din nav, listele secțiunilor și ancorele din meniu. Ajustăm înălțimea, înălțimea liniei și umplutura și transformăm textul în majusculă, pentru a se potrivi cu designul personalizat.
Dacă reîmprospătați browserul, veți vedea că acesta începe să se contureze. Să continuăm cu dropdown-urile, elementele de meniu, stările active și hover. Uitați-vă la CSS din nou și din nou, citiți textul comentat pentru explicații:
/ ** Modifică elementul de meniu activ din negru implicit într-un gradient ** / .top-bar-section ul li.active> a fundal: rgb (0, 0, 0); fundal: gradient liniar (la fund, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0.7) 100% culoare: #fff; / ** Schimbă starea de hover a elementelor de meniu inactive ** / .top-bar-section li: hover a fundal: gradient liniar (spre fund, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) repetați defilați 0 0 transparent; culoare: #fff; / ** Schimbă culoarea textului neactivă al meniurilor la culoarea neagră ** / .top-bar-section ul li> a culoare: # 2d2d2d; / ** Modifică starea de susținere a elementelor din meniul derulant ** / .top-bar-section ul.dropdown li: hover: nu (.button) fundal: niciun repetare defilați 0 0 rgba (0, 0, 0, 0,9); / ** IMPLICAȚII IMPLICITE pentru containerul drop down ul ** / .top-bar-section ul.dropdown fundal: # 333; culoare: #fff; / ** Aceasta stabileste pozitia si culoarea sferei de jos ** / .top-bar-section .has-dropdown> a: dupa border-color: rgba (0, 0, 0, 1) transparent transparent; margin-top: 2,5px;
Am făcut câteva modificări în meniul nostru aici. În primul rând, am schimbat fundalul negru implicit al elementului de meniu activ într-un gradient CSS. Apoi am oferit elementelor de meniu inactive o stare de mișcare asemănătoare. Pentru a face mai ușor vizibile elementele de meniu inactive, modificăm culoarea textului într-un gri închis. Modificările aduse .top-bar-section li: hover o va păstra starea meniului derulant pe plutit atunci când mouse-ul se mișcă peste elementele drop-down. Pentru a finaliza CSS, am dat containerul drop down pentru umplerea fundalului și am repoziționat poziția implicită a săgeții dropdown, din cauza ajustărilor de umplutură în secțiunea de sus-bar.
Reîmprospătați browserul dvs. și examinați rezultatele până acum. Încă nu am terminat; trebuie să ne asigurăm că totul arată bine atunci când redimensionăm dimensiunea ecranului browserului nostru (sau, atunci când îl privim pe un dispozitiv mai mic). Pentru a face acest lucru, vom adăuga câteva interogări media în fișierul nostru CSS.
Există câteva lucruri pe care trebuie să le modificăm pentru a face ca meniul să funcționeze cu designul personalizat când dimensiunea ecranului este redusă. Aceasta implică, în majoritate, adăugarea unor elemente de umplere, înălțimea liniei, culorile textului și culorile de fond. Uitați-vă la CSS de mai jos și examinați comentariile pentru a obține o explicație pentru fiecare secțiune.
@media numai pe ecran și (max-width: 942px) / * Face ca meniul receptiv să se potrivească în containerul de navigare și să-și schimbe fundalul la negru * / .top-bar ul background-color: rgba (0, 0, 0,5); padding-bottom: 13px; / * Schimba culoarea elementului de meniu inactiv pe negru * / .top-bar-section ul li> a culoare: #fff; / * Oferă drop-ul ul o umplere neagră * / .top-bar-section ul background: # 000; / * Dați butonul BACK după ce mergeți într-un submeniu. * / .Top-bar-section .dropdown li.title h5 a line-height: 57px; / * Aceasta stabilește poziția și culoarea săgeții derulante * / .top-bar-section .has-dropdown> a: după border-color: rgba (255, 255, 255, 1) transparent transparent; margin-top: 2,5px; / * sfârșitul interogării media * /
Salvați fișierul, reîmprospătați browserul și redați-l cu dimensiunea browserului. După cum puteți vedea meniul se încadrează în designul nostru frumos.
Deci, acest lucru despre wraps noastre tutorial cu privire la modul în care putem crea un meniu custom responsive folosind Top Bar din cadrul Fundației 4. Și rețineți că meniul nu trebuie să fie în partea de sus a paginii. Înfășurați-o în rândul său propriu și coloanele div, atunci puteți să-l plasați oriunde doriți!
Fundația este un instrument excelent pentru dezvoltarea rapidă a modelelor receptive, iar când vă cunoașteți drumul în jur, puteți să o modelați în orice fel doriți. A se distra!
