Så här börjar menyn som visas i det övre fönsterområdet.
Ni har redan gjort en del förarbete för denna meny. Ni kommer säkert ihåg den vackra färgförloppet som har sparats som en enpixelgrafik. Just den ska nu användas. Innan dess måste dock den motsvarande HTML-strukturen för menyområdet skapas. Den kan se ut så här:
<div class="header"> <div class="header-top"> <h1>Er revisor</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Startsida</a></li> <li><a href="#">Om oss</a></li> <li><a href="#">Hur vi arbetar</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div class="header-img"> </div> </div>
För att skapa bakgrunden inkluderas en enpixelgrafik och upprepas vertikalt tills hela elementet är fyllt.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Sedan kan menyn formateras. I princip finns inga särskilda saker att tänka på. Det som är avgörande för sådana menyer är oftast följande aspekter:
• Dölj punkterna i listan med list-style-type: none;.
• Se till att listelementen visas bredvid varandra.
Jag arbetar på den här punkten - ni vet säkert vid det här laget - med en färgförlopp som realiseras genom en grafik. Numera finns det naturligtvis många andra alternativ för menyer. Tänk till exempel på JavaScript-ramverk som jQuery. Att introducera alla möjligheter här skulle naturligtvis spräcka ramen. Men det finns sedan länge många online-genererare som kan skapa menyer med några klick. En av dem - utan att värdera om den är den mest geniala av sitt slag - hittar ni på http://www.cssmenubuilder.com/.
I vilket fall som helst har jag valt följande variant:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Det är egentligen bara hover-tillståndet som är avgörande. När detta inträffar visas en annan bakgrundsbild.
Den högra menyn
Webbplatsen har inte bara en meny högst upp, det finns också en som visas i det högra fönsterområdet.
Denna meny hör till div-området med klassen content-right. Under utvecklingsfasen av sidan har jag bara lagt till dummy-innehåll där.
<div class="content-right"> <h2>Huvudmeny</h2> <ul> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 2</a></li> <li><a href="#">Länk 3</a></li> <li><a href="#">Länk 4</a></li> <li><a href="#">Länk 5</a></li> <li><a href="#">Länk 6</a></li> <li><a href="#">Länk 7</a></li> <li><a href="#">Länk 8</a></li> <li><a href="#">Länk 9</a></li> <li><a href="#">Länk 10</a></li> </ul>
Området placeras först på rätt plats och i önskad storlek.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Nästa steg är att definiera själva menyn. Den här gången ställs dock posterna under varandra. Ni måste bara se till att punkterna i listan döljs. Resten av utformningen av menyn överlämnas slutligen åt er.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Nu bör följande bild visas i webbläsaren:
Den nedre menyn
På webbplatsens fotavtryck kommer det att finnas en annan meny. Här på PSD-Tutorials.de används en sådan meny också för att tillhandahålla länkar till allmän information.
På vår webbplats finns också en upphovsrättsnotis. Båda dessa är faktiskt ganska vanliga på webbplatser. Först HTML-strukturen igen.
<div class="bottom"> <ul> <li><a href="index.html">Hem</a></li> <li><a href="#">Om oss</a></li> <li><a href="#">Nyheter</a></li> <li><a href="#">Kontrollcenter</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Webbplatskarta</a></li> </ul> <p>© Upphovsrätt 2014 av PSD-Tutorials.de</p> </div>
Det är en enkel ul-lista. Varje listposter innehåller en menyval. Under ul-listan finns det ett p-element där upphovsrättsnotisen finns. Vad som nu saknas är naturligtvis igen CSS-syntaxen.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Hur du designar fotavtrycket är slutligen upp till dig. Jag använder igen en färggradient. Du kan dock till exempel också använda en enkel bakgrundsfärg eller direkt CSS3-syntax. I fallet med min grafiska variant är det dock avgörande att en upprepning förhindras med background-repeat: no-repeat;.
Ta först en titt på resultatet:
Vad som märks här är de vita strecken som visas bredvid varje menuval. Dessa definieras genom olika border-left-föreskrifter, vilket i grunden innebär att föreskrifterna gäller varje elements vänsterkant.
Sammanlagt ser syntaxen för den nedre menyn ut så här:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Det finns en särskildhet jämfört med toppmenyn här. I själva verket laddas ingen ytterligare grafik i händelse av hover. För att ändå ge besökarna en förståelse för att de rör muspekaren över en länk, understryks de enskilda länkarna när hover-händelsen inträffar.
Vid slutet av den här handledningen är de grundläggande stegen mot webbplatsen slutförda. Det som nu saknas är att försköna sidan. Mer om det i de kommande handledningarna.
