Lag navigeringslinjer med Responsive Web Design-teknikker

Responsive Web Design (RWD) og dens tilsvarende User Experience Design (UX) er levende, utviklende, flytende enheter som fortsetter å bevege seg i en litt svingende tilstand mellom hva som aksepteres i dag og der de trenger å være i morgen. En del av den responsive designutfordringen krever tilsvarende at navigasjonsmenyene våre må vises på flere stasjonære nettlesere og mobile enheter inkludert trådløse telefoner og nettbrett. Kanskje du ikke har taklet RWD-paradigmet for nettstedet ditt ennå, enten fordi interessentene og kundene dine ikke har indikert behovet, eller det ikke er blitt identifisert som et krav. Uansett kan det å komme i gang med navigasjonsmenyene være det første trinnet for å få resten av nettstedet ditt på RWD-sporet.

Denne delen vil gjennomgå flere alternativer for navigasjonsmenyer, inkludert horisontale, tilpassede nedtrekks- og flernivåalternativer, med flere av dem som inneholder det som kalles "Checkbox Hack". To av eksemplene er tilgjengelige på CodePen, et nettsted som lar deg lage din egen kode eller lage en gaffelversjon av eksisterende kode som du kan dele med andre. En annen morsom funksjon i CodePen er on-the-fly kodebehandling; en delt skjerm lar deg manipulere koden over og se resultatet live på den nederste skjermen. De to første eksemplene som er uthevet her er laget av Tim Pietrusky og vil inneholde høydepunkter av den opprinnelige koden, spesielt hans Full Horizontal and Custom Dropdown, som bruker Advanced Checkbox Hack. Og til slutt blir opprettelsen av et navigasjonseksempel på flere nivåer av Tessa Thornton adressert på Web Design Tuts, som prøver å løse problemet med undermeny og flernivånavigasjon på små skjermer som er typiske for mobile enheter.

Horisontal

Det første eksemplet av Tim er hans Full horisontale meny som bruker en uordnet liste som er nestet i et HTML5-element med en rolle = "full-horisontal". CodePen-skjermbildet nedenfor viser HTML og CSS sammen med demonstrasjonsmenyen i den typiske skrivebordspresentasjonen, som vist i figur B. (Merk: Alle skjermbilder er hentet fra Chrome versjon 24.0.1312.56 m.

Figur B

Den responsive menyen bruker CSS-mediesøk for å stille inn maksimal bredde og margin for små skjermer, og angir de uordnede listestilene som vist i kodebiten nedenfor:

 / * små skjermer * / 
 @media-skjerm og (maks. bredde: 44 em) { 
 kropp { 
 margin: 1, 5em 0; 
 } 
 nav role = "full-horizontal" { 
 ul { 
 polstring: 0 .5em; 
 } 
 ul> li { 
 bredde: 100%; 
 polstring: .45em .25em; 
 margin: 0 0 .55em 0; 
 &:etter { 
 box-shadow: none; 
 } 
 } 
 } 
 } 
Når skjermstørrelsen er redusert til 245 piksler bred, vises navigasjonsmenyen som vist i figur C nedenfor med den tilpassede stylingen brukt. Den horisontale navigasjonen demonstrert her bruker minimal CSS med kortfattet HTML og krever ingen JavaScript.

Figur C

Tilpasset rullegardin

Den andre uthevede demonstrasjonen av Tim er Custom Dropdown-navigasjonsmenyen, som når den vises i små skjermer, vil vise inngangs- og etikettelementer ved å bruke Advanced Checkbox Hack som han opprettet basert på Chris Coyiers originale Checkbox Hack, brukt til å koble en etikett og avkrysningsboksen og vanligvis et annet element du prøver å kontrollere.

Det avanserte hacket løser problemer med å jobbe på mobil Safari OS (iOS <6.0) og Android-nettleser (Android <= 4.1.2). Essensen i det avanserte hacket er at det legger inn en falsk animasjon til kroppen for Android-nettleseren, og legger til en tom onclick på etiketten for iOS. Ulempen med å bruke denne navigasjonsmenyen med hacket er at det ikke er riktig bruk av semantikk med hensyn til den tomme etiketten og inndata. CodePen-skjermbildet nedenfor viser HTML og CSS sammen med demonstrasjonsmenyen i den typiske skrivebordspresentasjonen som vist i figur D :

HTML5-elementet med rollen = "tilpasset rullegardin" inneholder den tomme inndataetiketten med type = "avkrysningsrute" som vist i kodebiten nedenfor:

  • Strøm
  • Lab
  • prosjekter
  • Om
  • Ta kontakt med
  • Avmerkingsruten for hack CSS-kodestykket vises nedenfor:

     / * Advanced Checkbox Hack * / 
     body {-webkit-animasjon: bugfix uendelig 1s; } 
     @ -webkit-keyframes bugfix {fra {padding: 0;} til {padding: 0;}} 
     input type = avkrysningsrute { 
     stilling: absolutt; 
     topp: -9999px; 
     venstre: -9999px; 
     } 
     etikett { 
     display: none; 
     markør: peker; 
     bruker velge: none; 
     } 
    Når skjermstørrelsen er redusert til 225 piksler bred, vises navigasjonsmenyen opprinnelig lukket som vist i figur E nedenfor med den tilpassede stylingen brukt.

    Figur E

    Klikk på navigasjonsikonet øverst til høyre på skjermen, og menypunktene åpnes som vist i figur F:

    Navigering på flere nivåer

    Multi-Level navigasjonsveiledning og demonstrasjon av Tessa Thornton fra Web Design Tuts forsøker å løse problemet med undermenynavigasjon på små skjermer som er typiske for mobile enheter. Tilnærmingen som Tessa bruker for å løse problemet med store navigasjonsmenyer med flere lag, inkluderer mediesøk og litt jQuery og JavaScript, mens HTML holdes på et minimum.

    HTML-kodebiten starter med en beholder med et anker satt til en klasse = "togglemenu" for øverste nivå "Meny". Navigasjonen på flere nivåer er bygget fra nestede, uordnede lister, og hun bruker med vilje kun klasser og ID-er for den overordnede uordnede listen for å gjøre menyen kompatibel med CMS-genererte menyer.

    Tessa leder deg gjennom en steg-for-trinn-prosess, først gjennomgår HTML, deretter CSS og grunnleggende styling, og deretter takler hun den horisontale rullegardinmenyen ved å bruke : sveve pseudo-velgeren sammen med litt JavaScript for å hjelpe deg med å bytte menyer med aktivering på klikk. Neste trinn dekker den vertikale nedtrekksmenyen, som utfører den lille mobilskjermnavigasjonen og inkluderer @media-skjermen og mediesøket. Tessa legger deretter til noe mer JavaScript for å sjekke bredden på vinduet, og deretter konvertere hover for å klikke for mobile enheter, endre målet til en klikkhendelse. Deretter legger hun til en menyfunksjon, flere stiler på medieskjermen, og dekker også en bonusfunksjon ved å sette opp et skript for å endre størrelsen på hendelsen på mobilskjermer for trekkspillmenyen. For å pakke opp opplæringen legger Tessa til mer JavaScript for vinduhendelser og visning og skjuling av menyene, og deretter løsne hendelsene på mobile enheter. Navigasjonsmenyen som vises i den typiske stasjonære nettleseren med en oversikt over flere menyelementer skjorter for kvinner og tilgjengelige typer vises i figur G :

    Når du endrer størrelse til en bredde på 225 piksler, stilles navigasjonsmenyen inn på trekkspillstilen som vist i figur H :

    Tessas veiledning gir en nedlasting av alle kildefilene som inkluderer index.html, style.css, script.js og en readme.md, sammen med bilder for pil opp og pil ned.

    Noen ganger mens du undersøker løsninger på et problem eller inspiserer måter å integrere nye strategier og teknikker i din egen nettutvikling, er det fint å se hvordan andre har løst en lignende og utfordrende oppgave. Eksemplene på CodePen og Web Design Tuts er et perfekt sted å begynne å lete etter ideer når det er på tide å lage din egen responsive menynavigering for nettstedene dine.

    © Copyright 2021 | pepebotifarra.com