Share
Să aruncăm o privire la bara de sus inclusă în cadrul Fundației. Deoarece sunt destul de multe de acoperit, o vom distruge în bucăți ușoare.
Bara superioară a Fundației este o componentă foarte utilă, dar nu este în nici un caz obligatorie să o utilizați în clădirile dvs. Aș estima că am folosit-o în aproximativ 40% din proiectele pe care le-am construit cu Fundația. Acordați o atenție deosebită dacă se potrivește sau nu nevoilor proiectului dvs. componenta de sus a barei este la fel de ușor ca oricare altul, dar interacțiunea este destul de mult stabilită.
Pentru a începe construirea barei de sus avem nevoie de o tag, cu clasa necesară de "top-bar".
În interiorul asta se află a , dintre care unul va conține titlul / sigla celuilalt meniu "mobil".
Notă: puteți elimina fie clasa "meniu-pictogramă", fie conținutul "Meniu", dacă preferați să aveți doar una dintre cele două.
Adăugarea legăturilor părinte este următorul nostru obiectiv, deci înainte de adăugarea etichetei nav de închidere cu clasa "top-bar-section". În această secțiune trebuie să adăugăm o listă neordonată cu mai multe elemente de listă.
Fundația are un "divizor" de clasă utilă, care poate fi aplicat elementelor listă goale, permițându-vă să separați fiecare legătură de meniu cu o linie atractivă. Ele sunt folosite în exemplul următor pentru a împărți legăturile noastre de meniu.
De asemenea, veți observa că ul are clasa "stânga" aplicată la ea, ceea ce trimite lucrurile spre stânga. Ați putea, de exemplu, să aveți două seturi de link-uri de meniu, unul plutitor stânga și unul (utilizând clasa "dreapta") plutind dreapta.
- Principalul element 1
- Principalul element 2
Toate link-urile pe care le-am adăugat până acum vor fi afișate orizontal de-a lungul barei. Pe ecrane mai mici, acestea vor deveni un dropdown, activat de butonul Meniu pe care l-am adăugat mai devreme.
Fiecare element de listă poate conține o listă imbricată neordonată pentru submeniuri. Pentru ca aceasta să funcționeze și să fie afișată în mod corespunzător, clasa "are-dropdown" trebuie aplicată liniei părinte, clasa "dropdown" fiind aplicată în lista imbricată neordonată:
Notă: Pentru a marca activ link-ul curent al paginii, adăugați o clasă "activă".
Submeniurile sunt afișate ca meniuri standard în cazul în care există circumstanțe "mari". Pe ecrane mai mici, ele se aliniază de la "off screen".
În ciuda faptului că este denumită bara "de sus", puteți plasa această componentă oriunde în aspectul dvs. Dacă aveți nevoie ca bara să rămână fixă pe pagină în timp ce defilați, puteți înfășura bara superioară într-un div cu clasa "fix". Alternativ, dacă doriți să păstrați bara de sus în containerul principal, puteți seta lățimea barei superioare la lățimea grilei utilizând clasa "conține-la-grilă". Din fericire, puteți utiliza ambele clase ("conține-la-grilă" și "fix") în combinație.
Să presupunem că doriți ca bara superioară să se afle în centrul layout-ului, dar trebuie ca bara să rămână în partea de sus a paginii când utilizatorul scroll în jos. Acest lucru este posibil prin împachetarea barei de sus în clasele "conține-la-grilă" și "lipicios".
Dacă toate aceste funcții nu sunt suficiente, ați putea dori să adăugați și o intrare pe care ați putea să o utilizați pentru căutare sau o înscriere în lista de corespondență sau orice doriți. Atunci când adăugăm elemente de formă într-un element din lista de meniuri, trebuie să adăugăm o clasă de "formular". Puteți vedea din codul de mai jos că facem efectiv utilizarea rețelei în bara de sus. Aceasta face ca plasarea elementelor să fie ușor - și, desigur, receptivă, deoarece coloanele își schimbă aspectul pe ecrane mici.
Breadcrumbs sunt obișnuite pe site-uri web bazate pe CMS, cum ar fi Wordpress, unde ierarhia paginilor pe mai multe niveluri poate deveni puțin complexă. Acestea pot fi utilizate în orice proiect al Fundației prin adăugarea pur și simplu a clasei "breadcrumbs" fie la o etichetă. Atunci când se utilizează lista neordonată, toate legăturile trebuie să fie în elementele listate, în timp ce legăturile din elementul nav trebuie să fie etichete de ancorare.
Singurele clase suplimentare incluse în marcajul "breadcrumb" sunt "indisponibile" și "actuale".
Bara de sus este foarte flexibilă și este suficient de simplă pentru a fi încorporată în oricare dintre proiectele bazate pe fundație. În următoarea parte a acestei sesiuni vom vorbi despre butoane, dropdown-uri și plugin-ul de compensare.
Accentsconagua