I denna artikeln visar jag hur man gör en meny med en bakgrund. Menyn kommer vi till att koda med hjälp av CSS och HTML. Detta är det enklaste att göra en snygg och användarvänlig meny som fungerar för alla och dessutom ser bra och professionell ut.
Meny med bakgrund
I denna artikeln hade jag tänkt ta upp hur man gör en meny med en bakgrund. Vi kommer använda oss av CSS för att koda detta.
Artiklen utgår från att du har baskunskaperna i såväl HTML som CSS. Dock är det ganska utförligt förklarat så det ska inte vara så svårt att förstå.
Jag utgår i artikeln från att ni använder en egen stilmall men om ni vill lägga koderna direkt i HTML-dokumentet så går detta givetvis bra också, då använder ni följande kod:
<style type="text/css">
Css koden här
</style>
Såhär ser menyn ut som vi ska göra.
Steg 1.
Vi börjar med CSS koderna för en helt vanlig box som vi vill ser ut såhär.
#menyn { padding-top: 30px; width: 692px; height: 56px; }
padding-top: 30px; - detta är hur långt ifrån "toppen" på boxen vi vill att texten ska hamna. Jag har valt 30px då det passar denna meny bäst.
width: 692px; - Detta är bredden på boxen, den är även för att passa den bakgrund jag tänker använda.
height: 56px; - Detta är höjden på boxen som också är anpassad för bakgrunden. Höjden på boxen påverkas också av "padding-top" så egentligen är boxen 86px hög men nu räknar vi med paddingen så då blir den 56px hög.
Steg 2.
Nästa steg är nu att lägga in själva bakgrunden i boxen. Bakgrunden är en helt vanlig bild som vi lägger in i boxen.
Såhär ser bilden för bakgrunden.
Såhär ser koderna ut med bakgrunden med:
#menyn { padding-top: 30px; width: 692px; height: 56px;
background-image: url(meny_bkg.jpg); }
nu är själva boxen färdig för med bakgrunden och nu är det bara länkarna som ska läggas in och även koderna för själva menyn ska läggas i HTML dokumentet.
Steg 3.
Jag använder mig utav följande länkkod för att få länkarna i vit och övergången svart. Du lägger denna koden under #menyn i ditt CSS-dokument.
.meny a { font-family: Verdana; font-size: 11px;
color: #FFFFFF; text-decoration: none;
letter-spacing: 1px; }
.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration: none;
letter-spacing: 1px; }
Steg 4.
Nu har vi gjort själva CSS grunden till hela menyn så nu är det bara att lägga in den i HTML dokumentet inom dina <body>-taggar:
<div id="menyn">
<span class="meny"><center>
<a href="#">Meny 1</a>
<a href="#">Meny 2</a>
<a href="#">Meny 3</a>
<a href="#">Meny 4</a>
<a href="#">Meny 5</a>
<a href="#">Meny 6</a>
<a href="#">Meny 7</a>
<a href="#">Meny 8</a>
</center>
</span>
</div>
Slutord
Nu har du gjort din egen meny enkelt och snabbt med en helt vanlig bakgrund istället för att sitta och krångla en massa med CSS. Se bara till att du ändrar värdena så att dom passar din bakgrundsbild så bör det funka utmärkt. Tänk bara på att med texten så mäter olika datorer olika med avstånden och letter-spacingen
Hoppas du har lärt dig något!
Jag gick mest igenom det enklaste i denna artikeln 
