Hvordan man opbygger en stribet Navigation med Flexbox

Danish (Dansk) translation by Benjamin Høegh (you can also view the original English article)

Takket være flexbox, kan vi i dag vi bygge nogle virkelig attraktiv og moderne layout med relativ lethed. I denne tutorial vi vil kigge på en brugergrænseflade brugt for nylig til Google nationalparker, og se, hvordan flexbox kan hjælpe os med at forbedre på det.

Som altid, før du går videre, lad os se på hvad vi vil ende med (du måske nødt til at tjekke den større version for at få den fulde effekt i viewports der er bredere end 800px):

Sørg for at køre musen over links til at udløse de tilsvarende virkninger.

Markup

Først, lad os undersøge den markup vi skal bruge til at bygge dette layout. Vi definerer en div element med fem links inden i (du kan bruge uanset hvilken elementer, du føler er relevant). Hver af vores links indeholder en div med class overlay. Nedenfor kan du se et skelet af vores kode:

<div class="flex-wrapper">
  <a href="" class="one">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #1</h2>
        <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p>
      </div>
    </div>
  </a>
  
  <!-- four more links here -->
</div>

Indledende CSS Styles

Med beredvillig opmærkning begynde vi at definere nogle indledende CSS styles, specifikt:

Angiv den yderste div som flex beholder og indstille dens højde svarende til viewport højde med height: 100vh.
Angive en lige bredde for alle links (flex elementer). For at opnå det, vi giver dem hver flex: 1. Derudover får alle vores links baggrundsbillede (indkøbt fra unsplash.com) som dækker viewport højde. Som en fallback (i tilfældet et billede er ikke tilgængelig), vi også angive et unikt baggrundsfarven for hver enkelt.
Når vi holder musen over et link, bliver dens størrelse tre gange større i forhold til størrelsen af de andre links. Vi gør dette ved at ændre værdien af egenskaben flex af mål-linket. Heldigvis nok denne egenskab tilhører de animerede CSS egenskaber, så vi er i stand til at generere en glat overgang effekt (i hvert fald i de nyere browsere).

Her er en del af den CSS kode der viser hvad vi har beskrevet ovenfor:

.flex-wrapper {
  display: flex;
  height: 100vh;
}

.flex-wrapper a {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex .4s;
}

.flex-wrapper .one {
  background-image: url(IMAGE_PATH);
  background-color: red;
}

.flex-wrapper a:hover {
  flex: 3;
}

Så langt så godt, hvis vi prøver en demo I en browser, der understøtter flexbox, vil vi se dette resultat:

Styling Overlay

Vores næste skridt er at tildele et par stilarter til overlejringen. Her er hvad vi vil gøre:

Give overlay samme dimensioner som det overordnede link. Vi kan opnå denne funktionsmåde ved at placere det absolut (i forhold til den umiddelbare overordnede) og derefter angive nul-værdier for alle egenskaberne offset.
Definere overlay som flex beholder. Denne måde, vi er i stand til at centrere det direkte barn (dvs. .overlay-inner element) vertikalt og horisontalt.
Tilføje en semi-transparente grå baggrund til overlay, når vi holder musen over linket forælder.

Her er de tilhørende CSS stilarter:

.flex-wrapper .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}

.flex-wrapper a:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

Indre Overlay

Nu er det tid til at style de indvendige dele af vores overlay. Som standard er de skjult og vises kun når vi svæver over linket tilsvarende forælder. Men ikke straks, vil vi afsløre dem, efter en lille forsinkelse. Denne forsinkelse er vigtig; Hvis vi ikke definere det specifikt, ser overgangs effekten lidt grimt ud. Fjerne det og teste demoen for at forstå hvad jeg mener.

Så lige for at opsummere, først linket bliver større, så bliver overlay elementerne synlige. Også, bruger vi translate3d() til at skabe nogle glide effekter. Sidst men ikke mindst vil vi bruge transform-style: preserve-3d hack (eller et lignende program) at forhindre mulige flimrende effekter på tværs af forskellige browsere.

Og her er de relaterede CSS styles:

.flex-wrapper .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.flex-wrapper .overlay h2 {
  transform: translate3d(0, -60px, 0);
}

.flex-wrapper .overlay p {
  transform: translate3d(0, 60px, 0);
}

.flex-wrapper a:hover .overlay-inner * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: all .3s .3s;
}

Lad os se, hvad der har givet os.

Gå Responsive

Siden ser godt på store skærme, men måske på små, eller endda på mellemstore skærme vi bliver nødt til at foretage nogle justeringer. For eksempel, er her et par ting vi kan gøre:

Flip main-akse af flex container ved at tilføje flex-direction: column til den. Derved vil de flex elementer strømme fra top til bund.
Annuller alle overgangs effekter og Vis overlay elementer som standard.

Vores desktop-første media query ser ud som følgerne (jeg har brugt 800px kun fordi der passer til de integrerede demoer i dette indlæg, kan du vælge, hvad du føler er bedst):

@media screen and (max-width: 800px) {
  .flex-wrapper {
    flex-direction: column;
  }
  
  .flex-wrapper a:hover {
    flex: 1;
  }
  
  .flex-wrapper a:hover .overlay {
    background-color: transparent;
  }
  
  .flex-wrapper .overlay h2,
  .flex-wrapper .overlay p {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

Her er det endelige udseende af vores navigation:

Browser support

Demo virker i alle nyere browsere, der understøtter flexbox.

I nogle browsere kan du mærke, at animationen af egenskaben flex er ikke så glat som det burde være, eller måske ikke virker på alle. For eksempel, animere IE11 ikke denne egenskab, mens Edge ikke. Dette er rimeligt nok, i betragtning af, at flexbox er et nyt layout mode, som stadig er på vej frem.

Konklusion

I denne tutorial forbedret vi vores flexbox viden ved at lære hvordan man opbygger en stilfulde navigation layout. Forhåbentlig nød du det, vi har opbygget her, og har taget nogle inspiration til din næste projekter!

Hvis du bygger et lignende layout, glem ikke at vise os tilgang (ren CSS eller JavaScript-baseret løsning) du brugte.

I naturen

Før du lukker, vil jeg gerne dele med dig et par websteder, der bruger en lignende layout til hvad vi lige har oprettet: