Navigering

Som redand har nämnts lite kort går det utmärkt att ändra stilen på länkar via CSS. Nu kommer lite utförligare information om just detta. Det första man bör tänka på med länkar är att dom har fyra olika tillstånd. Dessa får i normala fall redan en viss stilsättning via webläsaren. Det vanligaste att se är att länkar man redan besökt får en annan färg. De tillstånd som finns är: normala (ej besökt), besökt, aktiv och hover (när man håller muspekaren över länken). Det enda tillstånd av dessa som är unikt för just länkar är besökt, de andra kan man använda på olika element. Nedan är ett <div> element som har olika bakgrundsfärger beroende på tillstånd. Den normala är vi (#FFFFFF), håller man muspekaren över, hover, blir den rosa (#FF00FF) och om man klickar och håller in musen på den, active, så blir den blå (#0000FF).

För att välja stilsättning på olika tillstånd så lägger man till en pseudo-class i selektorn. Detta görs efter andra identifierare och följs av ett komma (:). Så det tidigare <div> elementet har ett id värde som är "nav_test" så skriver man på följande sätt för att välja hover: div#nav_test:hover{..}. När man stilsätter länkar så finns det vissa regler för vilken ordning i själva CSS dokumentet pseudo-klass selektorerna får komma. Hover måste komma efter link och visited medans active måste komma efter hover. Om man bara har stilsättning för vissa av dessa så fungerar det ungefär lika. Säg att man bara har hover och active, detta betyder att hover bör komma först.

Nedan följer en samling länkar med olika stilsättning beroende dess tillstånd.

Som nån kanske märkte så ändrade muspekaren form när man förde den över länkarna. Detta görs väldigt enkelt med cursor. I exemplet ovan blir det: cursor:crosshair;. Det finns ganska många potentiella värden för detta och de flesta webläsare använder redan många av dessa som standard. Cursor går att använda på olika element och den triggar när muspekaren är över det elementet. Den har alltså funktionen för hover automatiskt i sig.

Man kan göra länkar av mer än bara text. Menyn till höger på denna sida är t.ex. uppbyggd av olika <div> element med text i sig. Som syns så byter den bakgrund med hover. Man kan ju göra länkar av bilder ganska enkelt men det går också att göra det med massa andra roliga element, dock så fungerar <div> element väldigt bra för det.

En enkel knapp byggd av ett <div> element som ligger inom ett <a> element. Med lite knep och knåp kan man dock få detta att se lite snyggt ut:

Knappen ovanför är byggd av <div> element och ett <a> element för att sköta själva länknignen. Knappen är anpassningsbar så om man lägger in mer text så växer knappen (vertikalt om texten är för lång). Den är gjord först med ett <div> element utanför som funkar som en wrapper för att se till att knappen inte växer för mycket (eftersom dens storlek inte skulle vara absolut). Sen är det ett <a> element med ett <div> element inom sig. Detta <div> element är det som har all egentlig stilsättning, själva länken har bara stilsättning för texten. Sedan finns det ett ytterligare <div> element nästlat och detta är egentligen bara till för att få texten centrerad vertikalt. Som syns så har knappen rundade hörn och skugga vilket redan har gåtts igenom. En sak som kan nämnas är att den har en ganska hårt kontrollerad skugga, alltså att stilsättningen för skuggan är satt längs med hela skuggan istället för att ange ett blur värde. Knappen har också olika länktillstånd som ändrar bakgrundsfärgen och för active så simulerar den nertryckning genom att minska skuggan. Man kan också se en lite fördröjning med färgen när man för muspekaren över knappen, detta är gjort med transition som inte har stöd i IE och kräver webläsarprefix för de andra webläsarna.

Nu kan man gruppera dessa knappar för att bygga menyer. Denna sidas meny är ganska enkelt byggd med bara en bunt <div> element nästlade i <a> element efter varandra. Dock så kan man ganska enkelt ställa upp knappar snabbt i en lista. Nedan är en <ul> lista där varje länk ligger i ett <li> element. Man får tänka på att <li> tenderar att sträcka ut sig så långt de kan men i just detta exempel så har varje <li> width och height på 0%. Detta funkar eftersom det är själva knappen som har information om hur stor den är. Om man skulle låta <li> sträcka sig som den ville skulle man, i detta fall, kunna klicka på länken utanför knappen. Knappen i denna lista har en liten modifiering så att knappen inte har en storlek som kan ändra på sig utan är fixerad. Detta för att menyn ska se enhetlig ut.

• Sweclockers
• Tom's
• Webhallen

Om man istället vill en en vertikal meny med flikar kan man använde sliding doors tekniken. Den bygger på att man har överlappande bilder. Ena bilden är en kant (i detta fall vänstra) medans den andra bilden är resten av knappen. Sen ser man till att den vänstra hamnar över och därmed skär av den högra och så har man knappar som kan växa så långt som man har gjort den högra bilden stor. En stor nackdel med denna tekning jämfört med den tidigare nämnda är att man måste ha bilder för själva knapparna men koden blir väldigt mycket mer lättläst. Nedan följer ett exempel för en enkel navigeringsmeny. Knapparna leder ingenstans eftersom denna typ av meny är ju tänkt att vara central på en webplats och därför är lite svår att ge ett gott exempel på. Här finns exempel.

Själva bilderna är tagna från Douglas Bowmans tutorial om just sliding doors.