Menu design

Smarte menuer behøver ikke at være svære at lave. Faktisk kan man klare det med lidt almindelig css og html. Her får du koderne til at lave menuer magen til dem, vi bruger her på
@-begynder.

Scriptet kan både anvendes på en enkelt side, men også i forbindelse med et stylesheet, så menuerne på alle dine sider får samme design.

Der er rigtig mange indstillingsmuligheder i scriptet, så det kan virke lidt uoverskueligt, men bare rolig ... vi har også lavet et online tool som kan generere koder til din menu >>

CSS	eksempler >>

Sådan gør du:

Du skal gøre to ting for at få denne kode til at virke.

1. Der skal laves et design, som indsættes enten i head sektionen på den enkelte side eller i et stylesheet.

2. Derefter skal du indsætte et stykke html, der hvor menuen skal være på din side.

Trin 1

Koden, som skal indsættes i head sektionen, og som definerer udseendet bl.a. af dine links, ser således ud.

Definer selv værdierne markeret med rødt.

LIDT UDDYBENDE OM STYLEN

Der er i alt fire styles. Den første .header definerer din overskrift. Den næste a.menu definerer dine menulinks, og a.menu.hover definerer udseende på dine menulinks, når musen køres hen over. Den sidste a:menu.active definerer udseendet på et aktivt link - dette virker kun, hvis du bruger rammer.

I .header skal du definere border. Det ser fx sådan ud - 3px outset #009900. Først defineres bredden på kanten, dernæst type (solid, double, dotted, dashed, groove, ridge, inset, outset, none) og til sidst farven.

Vi anbefaler, at du kun ændrer typen af border i .header. I de efterfølgende styles er typen solid mest velegnet.

I a.menu anbefaler vi, at du sætter border-farven til den samme værdi, som background. Bredden på de fire forskellige borders bør være den samme som i a.menu.hover.

Hvis du ikke ændrer i ovenstående værdier, får du en flot grøn menu. Du kan se et eksempel på den ved at på linket længere nede.

Trin 2

Nu har vi fortalt browseren, hvordan vores links i menuen skal se ud. Men vi bliver nødt til også at fortælle, hvordan selve menuen skal se ud.

Denne html-kode definerer en tabel og fire menulinks. Indsæt koden der hvor menuen skal være:

<table border="0" cellpadding="0" cellspacing="0" width="150" id="AutoNumber1">
<tr>
<td>
<p class="header">Overskrift</td>
</tr>
<tr>
<td style="border: 1px solid #003300">
<a class="menu" href="dinside1.htm">Linktekst 1</a><br>
<a class="menu" href="dinside2.htm">Linktekst 2</a><br>
<a class="menu" href="dinside3.htm">Linktekst 3</a><br>
<a class="menu" href="dinside4.htm">Linktekst 4</a>
</td>
</tr>
</table>

Definer selv værdierne markeret med rødt.

Hvis du vil have flere eller færre links i menuen, kan du bare tilføje eller slette linier efter strukturen for <a> som vist herover.

Attributten class="menu" fortæller browseren, at den skal bruge stylen til a.menu, som vi tidligere har defineret.

Det færdige html-dokument

<body>


<table border="0" cellpadding="0" cellspacing="0" width="150" id="AutoNumber1">
<tr>
<td>
<p class="header">Overskrift</td>
</tr>
<tr>
<td style="border: 1px solid #003300">
<a class="menu" href="dinside1.htm">tekst 1</a><br>
<a class="menu" href="dinside2.htm">tekst 2</a><br>
<a class="menu" href="dinside3.htm">tekst 3</a><br>
<a class="menu" href="dinside4.htm">tekst 4</a>
</td>
</tr>
</table>

</body>

</html>

Eksempel:

Hvis du ikke ændrer noget i stylen, kommer menuen til at se således ud:

Link 1
Link 2
Link 3
Link 4

Der er som nævnt næsten uanede muligheder med denne css menu. Her kan du se endnu et par eksempler >>

Forbedring af koden

I ET STYLESHEET/TYPOGRAFIARK

Den samme kode kan som nævnt også anvendes i et typografiark ... eller stylesheet som det hedder på engelsk. Faktisk er det nok en bedre løsning, da du så kan anvende samme menu-layout på alle sider.

Hvis du anvender css, skal denne kode indsættes i dit stylesheet, og så behøver du ikke indsætte noget i din head sektion:

.header {         font-family: Verdana, Arial, sans-serif;
                  font-size: 12pt;
                  font-weight: bold;
                  color: #ffffff;
                  background: #006600;
                  border: 3px outset #009900;
                  padding: 3px }

a.menu {          font-family: Verdana, Arial, sans-serif;
                  font-size: 11pt;
                  height: 20px;
                  color: #000000;
                  background: #CCFFCC;
                  width: 100%;
                  text-decoration: none;
                  border-top: 1px solid #CCFFCC;
                  border-bottom: 1px solid #CCFFCC;
                  border-left: 5px solid #CCFFCC;
                  border-left: 5px solid #CCFFCC;
                  padding: 2px }

a:menu.hover {    font-family: Verdana, Arial, sans-serif;
                  color: #ffffff;
                  background: #bbbbbb;
                  border-top: 1px solid #006600;
                  border-bottom: 1px solid #006600;
                  border-left: 5px solid #006600;
                  border-right: 5px solid #006600;
                  text-decoration : none }

a:menu.active   { font-family: Verdana, Arial, sans-serif;
                  color: #ff3333;
                  background: #cccccc;
                  text-decoration : none }