de Charlie Waite

Cum să construiți o navbară receptivă cu un meniu de comutare utilizând Flexbox

În timpul unui proiect recent, echipa mea a trebuit să elimine toate urmele Bootstrap. Aceasta a însemnat că bara de navigație extrem de utilă va trebui să fie creată de la zero. Sunt relativ nou în CSS și m-am bazat întotdeauna pe navele Bootstrap pentru simplitatea lor, așa că m-am oferit voluntar să iau această sarcină. Iată ce am învățat și am făcut de-a lungul procesului.

În acest articol, voi presupune că aveți cunoștințe de bază despre HTML, CSS și JavaScript – știți cum să legați o foaie de stil la HTML sau să aplicați stilurile într-un <style> tag – și știți cum să importați un fișier JavaScript în pagina dvs.

Am avut elitiști defensivi care îmi critică modul de a face lucrurile, mai ales cu meniul de comutare position: absolute – dacă aveți modalități mai bune de a face acest lucru, vă rugăm să răspundeți mai jos și putem îmbunătăți acest lucru pentru mii de oameni care îl citesc!

Noțiuni de bază

În primul rând, am început cu câteva HTML de bază pentru aspect:

<div class="Navbar">
  <div class="Navbar__Link Navbar__Link-brand">
    Website title
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
</div>

Puteți utiliza orice convenție de denumire pentru clase.

Acum, acest lucru nu ne oferă încă mult. Aceasta este doar o listă simplă de articole. Dar, cu o singură linie de CSS, vedem puterea Flexbox.

.Navbar {
  display: flex;
}

O linie de cod și avem deja elementele de navigare aliniate orizontal în partea de sus a paginii.

Acum să adăugăm două nav elemente în HTML-ul nostru, astfel încât să putem avea câteva elemente în stânga și în dreapta barei de navigare:

<div class="Navbar">
  <nav class="Navbar__Items">
    <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

Și câteva stiluri de bază pentru Navbar clasă care împachetează toate celelalte elemente:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

Desigur, puteți alege propria schemă de culori, fonturi și căptușeală.

Acum bara noastră navală va arăta astfel:

Hopa, acum arată puțin mai bine, dar nu putem afișa elementele noastre de navigare pe verticală. Înainte de a citi mai departe, încercați să presupuneți ce vom face în continuare …

Acum display:flex în .Navbar clasa nu mai este responsabilă pentru aceste articole. Acum este responsabil pentru ei <nav> containere. Vrem ca ambele să fie aliniate orizontal.

Deci schimbăm .Navbar__Items si clasa:

.Navbar__Items {
  display:flex;
}

Acum, să adăugăm niște umpluturi la linkurile noastre pentru a face acest lucru puțin mai frumos:

.Navbar__Link {
  padding-right: 8px;
}

Acum bara noastră de nav arata astfel:

Ajungem acolo. Dar vrem și a doua <nav> a fi aliniat la dreapta. După cum probabil ați observat – am adăugat o clasă suplimentară la second nav> tag .Navbar__Elemente – corect.

Să adăugăm pur și simplu un margin-left:auto la această clasă:

.Navbar__Items--right {
  margin-left:auto;
}

După cum puteți vedea, acum este mult mai bine. Avem deja o navbar complet receptivă. Dar…

Ce se întâmplă dacă fiecare element de navigare avea text mai lung? Dacă ar fi mai multe articole?

După cum puteți vedea, nu asta ne dorim. Fie vrem să facem toate elementele de navigare o singură linie pentru coerență, fie ne-ar plăcea ca acestea să fie ascunse într-un meniu pe care utilizatorul îl poate comuta.

Vom merge cu acesta din urmă, deoarece este mult mai curat și nu va trebui să ne facem griji că utilizatorul se luptă să citească textul de pe fiecare element de navigare.

flex-direction

Cu un articol al cărui afișaj este flexibil, există, de asemenea, o regulă pentru direcția în care dorim să fie flexate articolele. În mod implicit, rând, care aliniază toate elementele în mod ordonat pe axa x.

În cazul nostru, am dori un mic meniu vertical în partea de sus a paginii noastre. Să încercăm să schimbăm flex-direction pe ambele .Navbar și .Navbar__Items la coloană – aceasta aliniază toate elementele de meniu pe axa y – când lățimea ecranului este de 768 px sau mai mică.

Și să eliminăm asta margin-left din a doua <nav>:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
}

Dar acum, elementele de navigare sunt întotdeauna vizibile, ceea ce ocupă o cantitate semnificativă de proprietăți imobiliare pe ecran.

În interogarea noastră media, să adăugăm o a doua regulă pentru .Navbar__Items deci nu sunt vizibile:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display:none;
  }
  .Navbar__Items--right {
    margin-left:0;
  }
}

Butonul de comutare

Pentru butonul de comutare, voi folosi o pictogramă furnizată de Font Awesome. Dacă decideți să urmați exemplul, urmați instrucțiunile de pe site-ul lor pentru a integra pictogramele în proiectul dvs. Puteți utiliza orice set de pictograme doriți sau puteți utiliza text simplu dacă doriți.

Acum să adăugăm această pictogramă la HTML-ul nostru:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

Am îndrăznit noua adăugare. Veți observa că această comutare nu intră în niciunul din nav etichete, dar stă afară cu titlul site-ului web. Are sens.

Desigur, nu este locul în care ne dorim să fie. Și chiar mai rău, este vizibil pe rezoluțiile desktop.

Să remediem asta. Să facem ce am făcut cu .Navbar__Items pe mobil la pictograma meniu de pe desktop:

.Navbar__Link-toggle {
  display: none;
}

Acum să adăugăm câteva reguli aceleiași clase în interogarea noastră media:

.Navbar__Link-toggle {
  align-self: flex-end;
  display: initial;
  position: absolute;
  cursor: pointer;
}

Acum, am terminat cam aici. Avem aspectul dorit. Dar trebuie să adăugăm funcționalitatea de comutare la pictograma meniu.

În JavaScript, adăugați:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Acum, în sfârșit, adăugați Navbar__ToggleShow cu regula display:flexla interogarea dvs. media.

Acum avem o navbar complet receptivă cu meniu de comutare. Cu Flexbox este chiar atât de simplu!

Codul final

HTML:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

CSS:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

.Navbar__Link {
  padding-right: 8px;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left:auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
    
.Navbar__Items {
    display:none;
  }
    
.Navbar__Items--right {
    margin-left:0;
  }
    
.Navbar__ToggleShow {
    display: flex;
  }
    
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

JS:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Citiți mai multe despre Flexbox la:

Conceptele de bază ale flexbox-ului
Modulul de cutie flexibilă, denumit de obicei flexbox, a fost conceput ca un model de aspect unidimensional și ca …

Și unde am învățat eu noțiunile de bază ale Flexbox:

Tocmai am lansat un curs gratuit complet Flexbox în care puteți construi proiecte interactiv
După succesul cursului CSS Grid, am lansat cu Routech în decembrie (peste 14.000 de studenți până acum!) …

Urmează-mă pe mine Stare de nervozitate sau GitHub.