Izdelajte spustni meni CSS

  • Potrebno znanje: Osnovni HTML, vmesni CSS
  • Zahteva: Urejevalnik besedil, naprave in / ali emulatorji po vaši presoji
  • Čas projekta: 30 minut
  • Datoteka za podporo

Ugotoviti najboljši način za optimizacijo navigacije za mobilne naprave je naravnost izziv. Naša skupnost se je domislila ton različnih pristopov za reševanje tega vprašanja , vsak s svojim naborom prednosti in slabosti.

V preteklosti sem se pogosto zavzemal za pretvorbo tradicionalne navigacije na podlagi seznama v a izberite za mobilne naprave (glej primer spodaj). To je preprost koncept, ki ga je enostavno izvesti in všeč mi je eleganca pristopa, ampak dejstvo, na katero se morate zanesti JavaScript da bi bila uporabna, mi nikoli ni zares ustrezala. Ker sem goreč zagovornik postopnega izboljševanja, sem vedel, da mora obstajati boljši način.

Spustni meni CSS: navigacija na Retreats4Geeks.com, ki temelji na izbiri



Navigacija po Retreats4Geeks.com na podlagi izbire

Vedno sem bil navdušen nad čistimi spustnimi meniji CSS, vendar so se tradicionalno zanašali nanje : hover . In hover, kot veste, v scenarijih na dotik ni pomemben, zato se je to zdelo kot slepa ulica. Potem pa se mi je posvetilo: : tarča je bil odgovor na moje molitve.

Kot verjetno že veste, je ciljni izbirnik psevdorazreda ( : tarča ) omogoča uporabo slogov za elemente, na katere se sklicuje identifikator fragmenta URL-ja. Na primer:

http: //website.tld/my-page/#content

V tem URL-ju je identifikator fragmenta 'content', zaradi česar se brskalnik pomakne in prinese element z id vsebine. Preprosto grah. Nato lahko uporabimo sloge za ta element, ko je usmerjen, z uporabo : tarča :

: target {
ozadje: # F6FD86;
}

Spustni meni CSS: Element, označen s pomočjo: target

Element, poudarjen s pomočjo: target

Ko se je Nichols College obrnil na moje podjetje glede prenove njihov bodoči študentski mikrostran , projekt je bil odlična priložnost za preizkus moje teorije o : tarča .

01. Zasnova

Mikrostrani sta res le dve strani - obrazec za zbiranje informacij o bodočem študentu in zahvalna stran, ki na podlagi njenih odzivov zbira ustrezne informacije o programih Nichols Collegea, vključuje pa številne navigacijske povezave, ki ji pomagajo pri naredi urniku obisk, začeti postopek prijave ali dobiti navodila do šole. Poleg teh kritičnih navigacijskih delov ima spletno mesto tudi zbirko navigacijskih povezav, ki omogočajo dostop do več tistega, kar bi imenoval 'okus' o šoli.

Veliko je bilo žongliranja, vendar smo začeli z vsebino, seveda tako, da smo organizirali stran, tako da so imeli uporabniki takojšen dostop do stvari, ki so jih dejansko tam brali in / ali sodelovali, preden jim je predstavili kakršno koli navigacijo:

  1. Pasica spletnega mesta
  2. Vsebina
  3. Pozivi k akciji
  4. Kontaktni mehanizmi
  5. Povezave do določenih šolskih strani
  6. Socialna omrežja
  7. Iskanje
  8. Avtorske pravice itd.

Ta pristop se popolnoma ujema z mantro Luke Wroblewskega o 'mobilnosti najprej' in idejo predstavitev vsebine spredaj in nato uporabniku omogoči vrtenje od tam . Ta vsebinsko prvi pristop je privedel do naša osnovna postavitev brez medijskih poizvedb , usmerjena na funkcijske telefone.

Spustni meni CSS: Vsebina najprej v Opera Mini

Vsebina najprej v Opera Mini

Kot se že zavedamo, so na napravah z majhnimi zasloni nepremičnine v premiji, zato smo nenehno iskali priložnosti za poenostavitev izkušenj za naše uporabnike. Ker pametni telefoni ponavadi podpirajo CSS boljše od funkcijskih telefonov, smo se odločili, da jih bomo manj pomembne povezave potisnite za ikono menija in jih izpostavite šele, ko so nanjo kliknili , zelo podoben starim spustnim menijem CSS. To je pogost vzorec oblikovanja v mobilnem spletu, toda vsako izvedbo, ki sem jo videl do zdaj obvezen JavaScript . Želel sem videti, ali bi lahko ustvaril enakovredno izkušnjo z uporabo samo CSS (in ne da bi se zatekel k vdoru ki vključuje nadzor skrite oblike ).

Spustni meni CSS: zasnova spustnega menija za goto.nichols.edu

Oblika spustnega menija za goto.nichols.edu

Sprehodil se bom po CSS-ju, najprej pa moram opozoriti, da so bili naslednji slogi postavljeni v slogi, namenjeni napravam srednje širine, začenši z 19.375ems. Večina teh pravil je bila vstavljena v dodatno medijsko poizvedbo znotraj tega sloga, ki je omejila njihovo uporabo na širino manj kot 46 elementov (kar je bilo dovolj široko, da podpira nadomestno postavitev za to posebno navigacijo). Ta izolacijska tehnika zagotavlja, da se pravila ne izlivajo po nepotrebnem v nadomestne postavitve.



zaslon @media in (največja širina: 46em) {
/ * Pravila pojdite sem * /
}

02. Kopamo

Prvi korak je bil uporaba slogov za preusmeritev nav navzgor na vrh strani:

#niso {
marža: 0;
položaj: absolutno;
zgoraj: 0;
desno: 0;
levo: 0;
z-indeks: 1000;
}

Opomba: Odstranil sem nepomembne sloge, tako da se lahko osredotočite na pomembne dele.

Nato sem nastavil povezave, ki so videti strnjene, razen v primeru, da je bil nav navzgor trenutni cilj:

#nav a {
meja-širina-dno: 0;
preliv: skrit;
višina: 0;
višina črte: 0;
oblazinjenje: 0 1em;
}
#nav: ciljanje na {
border-bottom-width: 1px;
višina črte: 3em;
višina: 3em;
}

S temi pravili bi lahko ročno manipuliral z URL-jem in preklapljal med odpiranjem in zapiranjem menija, vendar to v resničnem scenariju ni razumna zahteva. Moral sem ustvariti povezavo, ki bi ciljala na navigacijski seznam, vendar sem hotel to storiti, ne da bi dokumentu dodal dodatno okornost. Navsezadnje nima smisla, da je element na strani, če je uporaben samo v enem primeru. Na srečo je bila stara pripravljenost popolnoma primerna za nalogo.

03. 'Preskoči na' reševanje

V prvih dneh spleta smo pogosto uporabljali povezave »preskoči na vsebino«, da bi uporabnikom omogočili, da preskočijo navigacijo po spletnem mestu in pridejo do mesa na strani. S pristopom, ki temelji na vsebini, je povezava »preskoči na navigacijo« enako uporabna, če uporabnikom omogoči neposreden dostop do navigacije, ne da bi morali vse to postaviti na vrh strani. Odlična stvar pri povezavah »preskoči na« je, da delujejo tako, da manipulirajo z identifikatorjem fragmentov URL-ja in nam tako omogočajo uporabo : tarča . Tukaj je!

Najprej sem na vrhu strani dodal povezavo »preskoči na«:



Navigacija po spletnem mestu

Potem sem ga oblikoval tako, da je videti kot majhen gumb v zgornjem desnem kotu našega dizajna:

#jump {
ozadje: # 000 url (/c/i/nav.png) 50% 50% brez ponovitve;
obroba: 1px solid # 8b8b8b;
širina obrobe: 0 0 1px 1px;
kazalec: kazalec;
zaslon: blok;
oblazinjenje: 0;
višina: 53px;
širina: 53px;
zamik besedila: -999em;
položaj: absolutno;
desno: 0;
zgoraj: 0;
}

Omeniti velja, da je ta povezava uporabna celo za funkcijske telefone, saj jim omogoča skok naravnost do navigacije. (Lahko vidite ta preprost pristop, ki ga uporablja Vsebina revije in Bagcheck . Za prednosti in slabosti se posvetujte Pregled mobilnih navigacijskih shem Brada Frosta .)

Ko je bil preklopni gumb nameščen, sem imel čudovit način, da se nav navtično prikaže, vendar nikakor ne, da bi spet izginil.

Potem ko sem nekaj časa premišljeval o tej težavi, se mi je porodila smešno preprosta rešitev: na koncu navigacijskega seznama vključite povezavo »nazaj k vsebini«. S klikom na to povezavo bi nastalo #niso ni več cilj, seznam pa bi se zrušil.

Dovolj enostavno, vendar je to rešilo le del problema. Ne želimo, da bi se uporabnik moral loviti po seznamu, da bi našel povezavo, ki mu omogoča zapiranje spustnega menija; namesto tega želimo, da se obnaša tako, kot bi pričakoval uporabnik: če tapnete ali kliknete zunaj spustnega menija, bi morali nav navzdol spet krčiti nav. K sreči z malo z-indeks žongliranje in dotik pametnega pozicioniranja je mogoče povezavo postaviti pod druge nav navtične elemente in jo razširiti, da zapolni preostali del zaslona (seveda nevidno). Tu je vzorec ustreznih slogovnih pravil:

#jump {
/ * poskrbite, da je gumb menija na vrhu * /
z-indeks: 1001;
}
#niso {
/ * navigacija sedi za gumbom menija * /
z-indeks: 1000;
}
#nav: tarča
/ * razen če se prikaže * /
z-indeks: 1001;
}
#nav: ciljanje na {
/ * poskrbite, da bodo navigacijske povezave na ravni * /
položaj: sorodnik;
z-indeks: 1;
}
#back {
/ * določite pozicijski kontekst za bližje * /
položaj: sorodnik;
}
#back a {
/ * pretvori povezavo v duha * /
ozadje: prozorno;
meja: 0;
zamik besedila: -999em;
/ * naj zapolni zaslon * /
položaj: absolutno;
zgoraj: -101em;
spodaj: -101em;
levo: 0;
desno: 0;
/ * zagotovite, da sedi za drugimi povezavami * /
z-indeks: 0;
}

S tem je bil meni popolnoma funkcionalen. Potrebno je bilo le malo dodelave.

Spustni meni CSS: Končni spustni meni se je razširil

Končni spustni meni se je razširil. Nevidna povezava »od zgoraj« je obarvana, da pokaže, kako se prilega celotni postavitvi.

04. Gospodinjstvo

Da bi pospešil videz vmesnika, sem se odločil dodati preprost prehod na povezave, ki jim omogoča, da rastejo navpično, ko je usmerjena nav:

#nav: ciljanje na {
-moz-prehod: višina .25s, višina črte .25s;
-ms-prehod: višina .25s, višina črte .25s;
-o-prehod: višina .25s, višina črte .25s;
-prehod spletnega spletnega mesta: višina .25s, višina črte .25s;
prehod: višina .25s, višina črte .25s;
}

Z dodatkom tistega majhnega prehoda je nav navdušil lepo, vendar sem bil vseeno nekoliko zaskrbljen zaradi morebitnega sloga. Seveda, če brskalnik podpira medijske poizvedbe, verjetno podpira : tarča , a za vsak slučaj sem se odločil, da predgovorim vsako ustrezno stilsko pravilo telo: ni (: cilj) (ki bi se ujemalo samo, če brskalnik podpira ciljno izbiro). Tu je primer:

body: not (: target) #nav {
/ * ti slogi se uporabljajo samo, če: target in: not are
razumel (in telo seveda ni tarča) * /
}

najboljši monitor za igre na srečo in grafično oblikovanje

In tu imate: preprost postopno izboljšan spustni meni CSS, ki čudovito deluje kot del odzivne zasnove. Upam, da se vam zdi ta pristop tako priročen kot jaz.

Aaron Gustafson je ustanovitelj in glavni svetovalec podjetja Easy! Designs, svetovanje pri spletnem razvoju. Je tudi vodja skupin Projekta za spletne standarde (WaSP), povabljeni strokovnjak v W3C's Open Web Education Alliance, govornik in avtor.

Všečkaj to? Preberite jih!

Kaj menite o spustnih menijih - dobra ideja ali nepotreben nered? Sporočite nam v komentarjih spodaj!