Javascript vs. CSS Menu

Siden begynnelsen av Internett, har websider brukte menyene for navigasjon. Langt fra de enkle horisontale og vertikale link lister yore, dagens nettsteder benytter kompliserte navigasjonsstrukturer med lenke utheving, drop-down menyer, fly-outs og mer. Skape mer komplekse og interaktive menyer krever en kombinasjon av Cascading Style Sheet (CSS) kode og Javascript. Snarere enn å tenke på Javascript vs. CSS, bruker Javascript for å supplere din CSS-kode, og spesielt for å gi spesialeffekter eller maksimere nettleser kompatibilitet.

CSS for Menyer

Utviklere kan lage imponerende menyer ved å manipulere sorterte lister med CSS. Denne teknikken gjør det mulig for en stor variasjon i menyene, samt effekter som avrundede hjørner, graderinger, skygger og mer. De fleste av disse effektene er takket være CSS Level 3 (CSS3). Noen problemer eksisterer når du prøver å gjøre disse menyene jobbe med eldre nettlesere som ikke støtter CSS3 eller inneholder feil som hindrer CSS koding generelt. Spesielt når styling en meny i CSS for Internet Explorer 6, kan du ikke bruke "svever" pseudo-klasse for å utløse en hover staten for noe annet enn selve lenker. Denne nettleseren begrensningen skaper problemer når menyene krever en hover staten for en hel liste element.

Bakoverkompatibilitet for CSS

For å takle problemet med bakoverkompatibilitet når nettlesere ikke støtter CSS3 egenskaper, kan du vurdere en av to alternativer. Den første er alternativt kalles "grasiøs degradering" og "progressiv forbedring." Disse to begrepene begge betyr at i stedet for å gjøre nettsteder ser identisk i alle nettlesere, bør du bare fokusere på å holde nettstedet brukbar i alle nettlesere. I mange situasjoner, vil du fortsatt trenger for å lage nettsteder som ser identisk i alle nettlesere. I så fall, pakk betinget kommentarer rundt Internet Explorer-spesifikke CSS-filer og lage ikke-CSS3 for menyene. Du må også lage passende grafikk for å gjenskape CSS3 effekter.

Javascript for Menyer

Når du kode en meny i HTML og stil det i CSS, kan du manipulere det videre med Javascript. For eksempel, mange "plugin" skript skrevet i jQuery - en Javascript-rammeverk som ofte brukes til å animere elementer på websider - finnes som legger både slanke effekter og bakoverkompatibilitet til drop-down eller "suckerfish" stil menyer. Det faktum at brukerne kan slå av Javascript i sine nettlesere kan være en utfordring siden de fleste utviklerne ønsker å holde nettstedet navigasjon brukbar for hver bruker.

Hybrid CSS og Javascript Menyer

Når du oppretter menyer for websider, bør du alltid lage en liste over linker som bruker en uordnet liste i HTML, stil meny så mye som mulig i CSS og deretter bruke Javascript bare hvis du absolutt trenger det for en animasjon eller bakoverkompatibilitet med Internet Explorer 6. Du trenger ikke Javascript for å skape rullegardinmenyer. Såkalte "ren CSS" rulle løsninger finnes som fungerer i de fleste nettlesere.