Stian Andreassen

Som webutvikler møter jeg ofte på problemet «Design vs. Brukervennlighet». Ofte må man veie ønsket om å ha et tøft utseende på websidene opp mot brukervennlighet; dvs. at sidene er kjappe og laste, har validerende kode, ikke bruker proprietær kode eller andre ikke-standard-funksjoner. Som oftest ønsker jeg å unngå JavaScript, spesielt hvis det bare er snakk om effekter (f.eks. mouseover-effekter). Da jeg jobber mye med dynamisk publiseringsløsninger, er det som oftest også uaktuelt å bruke grafiske elementer i menyer (f.eks. bilder som knapper). Men navigasjon basert på ren HTML, uten grafikkelementer, trenger ikke å være kjedelig. Med CSS (stilark) kan man faktisk lage ganske så tøffe og grafiske menyer.

Tenkt deg at vi har følgende kode for menyen i HTML-fila; en helt standard <UL>-tag:

<ul id=“meny”>
<li><a href=“#”>Nyheter</a></li>
<li><a href=“#”>Om oss</a></li>
<li><a href=“#”>Tjenester</a></li>
<li><a href=“#”>Produkter</a></li>
<li><a href=“#”>Referanser</a></li>
<li><a href=“#”>Partnere</a></li>
</ul>

Ved framvisning av HTML-fila i en nettleser vil den se sånn ut:

• Nyheter
• Om oss
• Tjenester
• Produkter
• Referanser
• Partnere

Men så skal vi style den litt. Vi legger følgende stilbetegnelser inn i stilarket:

#meny {
border-top: 1px solid #999;
margin: 0;
padding: 0;
width: 150px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 0.8em;
}

#meny li {
list-style-type: none;
display: block;
margin: 0;
}

#meny li a {
background-color: #ddd;
color: #000;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 125px;
margin-top: 1px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 5px solid #666;
}

#meny li a:hover {
background-color: #eee;
color: #666;
}
Vi får da en meny som ser ut som dette (Menyeksempel 1). Vips har vi en riktig så lekker meny med grafiske knapper, som laster fort, og som kun er basert på validerende HTML og CSS.

For mange vil nok dette holde i massevis. Andre har derimot behov for underpunkter (submeny) også. Det kan vi f.eks gjøre slik, ved å legge inn en ekstra <UL> under hovedelementet som skal ha underelementer:

<ul id=“meny”>
<li><a href=“#”>Nyheter</a></li>
<li><a class=“valgt” href=“#”>Om oss</a></li>
<ul id=“submeny”>
<li><a href=“#”>Administrasjon</a></li>
<li><a href=“#”>Ansatte</a></li>
<li><a href=“#”>Kontakt oss</a></li>
</ul>
<li><a href=“#”>Tjenester</a></li>
<li><a href=“#”>Produkter</a></li>
<li><a href=“#”>Referanser</a></li>
<li><a href=“#”>Partnere</a></li>
</ul>

Ved framvisning av HTML-fila i en nettleser vil den se sånn ut:

• Nyheter
• Om oss
  • Administrasjon
  • Ansatte
  • Kontakt oss
• Tjenester
• Produkter
• Referanser
• Partnere

Vi bruker samme stilbetegnelser som de over i stilarket, men legger også til disse:

#meny .valgt {
color: #fff;
background-color: #666;
border-left: 5px solid #333;
}

#meny .valgt:hover {
color: #333;
background-color: #666;
}

#submeny {
margin: 0;
padding: 0;
width: 148px;
border-top: 1px solid #999;
border-bottom: 4px solid #999;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 0.9em;
}

#submeny li {
list-style-type: none;
display: block;
margin: 0;
}

#submeny li a {
background-color: #eee;
text-decoration: none;
display: block;
width: 122px;
padding: 3px 10px 3px 10px;
border-bottom: 1px solid #999;
color: #000;
text-transform: uppercase;
}

#submeny li a:hover {
background-color: #fff;
color: #666;
}
Vi får da en meny som ser ut som dette (Menyeksempel 2). Personlig synes jeg det er riktig så lekkert.

Så er det bare å modifisere stilarket for å få knappene til å se ut sånn som man vil, mtp. størrelse, farger, effekter ved musover etc.