Menu med anvendelse af 'background position'
| Menu med anvendelse af 'background position' Denne artikel vil gennemgå og forklare hvordan du opsætter en flot CSS menu med anvendelse af background position. Dette gøres ganske simpelt og kan læres af alle webmastere med lidt erfaring. |
| Indholdsfortegnelse | Muligheder | ||||||||
| - Indledning - Menu billede - Fastsætning af <div> - CSS menuen - Mouseover effekten - Konklusion - Kommentarer |
|
 |
| Indledning |
| Vi skal i denne artikel lave en
simpel men lækker CSS menu med en mouseover effekt (skifter farve når
musen føres over menu-knapperne). Menuen anvender baggrunds positionering, 'background position' også kendt under navnet CSS sliding door teknikken. Når man først lære teknikken at kende opdager man at det er ganske hurtigt at lave, ofte hurtigere end at lave en mouseover menu i HTML/Javascript. Desuden skal man kun anvende ét billede af hele menuen hvilket gør det yderst hurtigt for Internet browseren at hente din hjemmeside. Du kan se det færdige resultat af menuen ved at klikke her. |
 |
|
|
| Menu billede |
Først og fremmest skal du have lavet det billede du ønsker at
anvende til din menu. Vi har lavet billedet i størrelsen 484x103 og
det ser ud som vist herunder:
Du kan vælge at lave et nyt billede, men det kan også være smart blot at bruge vores for at gennemføre denne tutorial/artikel. Derefter kan du således eksperimentere med din nyerhvervede viden (: |
|
|
| Fastsætning af <div> |
Vi har nu fået styr på vores menu billede. Vi skal nu lave vores
<div class="menu">. Vi skærer naturligvis vores billede midt over
således at vi får en menu på 50px, men vi skal naturligvis benytte
hele billedets bredde (width) som er på, som nævnt ovenfor, 484px.
Vi skærer desuden billedet op i 4 dele - én til hver af vores
knapper. Din HTML kode skal nu se ud som noget lignende dette:
Som du kan se har vi kaldt hver knap for hhv. "home-button", "scripts-button", "articles-button" og "contact-button". |
|
|
| CSS menuen |
| Vi kan nu begynde med selve
CSS opsætningen af menuen. Du skal nu tage dit billede og finde ud af hvor langt fra (i pixels) dine knapper skal være - dvs. hvor bred (width) hver knap skal være. Dette kan eksempelvis gøres nemt i Photoshop. Du kan se herunder hvordan dette kan gøres - vi har gjort dette så det passer til vores anvendte menu billede:
Som du kan se ovenfor har vi markeret pixels angivelserne med sort og billedets URL destination med gult. |
|
|
|
| Mouseover effekten | |
|
Det sidste vi nu skal have gjort er at fastsætte mouseover effekten (hover
effekten). For at gøre dette kan du blot kopiere en ovenstående kode (fra
afsnittet om "CSS menuen") og i stedet kalde punkterne for fx. ".contact-button:hover".
Du skal nu blot lægge 50px til hver da vi så får fat i billedets nederste 50
pixels. Du kan se resultatet af dette herunder:
Som du kan se har vi markeret ".hover"-tilføjelsen med grønt, menu billede destinations koden med gult og pixels angivelsen/background position med sort. |
|
|
||
| Konklusion | ||
| Din menu er nu færdig og burde se ud
nogenlunde som her (klik her for at åbne eksemplet). Opsummerende kan det altså siges at du skal lave en .css fil som du fx. kalder for "main.css" og gemmer på dit webhotel. Denne fil skulle gerne se ud som følgende:
Som du kan se er alle destinations angivelser angivet med sort, billedet som skal anvendes er markeret med grønt, knappens navne er markeret med gult. Med denne .css fil skal du på den side du ønsker at vise din CSS menu tilføje HTML koden:
Som du kan se ovenfor skal du både indsætte en kode imellem <head> </head> som angiver hvad din .css fil hedder og hvor den befinder sig på din ftp. I <body> sektionen indsætter du <div> koden sådan som vi viste i første afsnit. Du kan downloade filerne som vi har anvendt i vores eksempel ved at klikke her. God fornøjelse med dine CSS menuer fremover! |
||
|
|
||
 |
Kommentarer Har du kommentarer, feedback eller spørgsmål til denne artikel kan du tilføje din besked herunder. Ønsker du svar på spørgsmål vil vi anbefale at du nævner din e-mail adresse. |
