Webtips - Meny

Det enkla sättet

Här används endast style sheets för att fixa menyn. Det är enkelt att fixa menyn, men man måste anpassa den på varje sida. Detta gör det krångligt att underhålla menyn på alla sidor. Har man stöd för templates, så rekommenderas något av de andra två sätten istället.

I style sheets finns det stöd för att ändra utseendet på länkar. Man kan även ändra beteendet på dem. T.ex. kan man ändra utseendet på en länk när man för muspekaren över den. Detta används i menyn för att "highlighta" texten när muspekaren förs över ett av valen. Detta kallas för hover i style sheets. För att göra det enkelt att byta utseendet på alla sidor, så kan man samla alla style sheets i en fil.

menutest.css
  
/*
** Simple styles
*/
h1 { font-family: Verdana, Arial, Helvetica, sans-serif}
body { font-family: Verdana, Arial, Helvetica, sans-serif}
a { text-decoration: none; color: #224466; font-weight: bold}

/*
** Style for the current item in the menu
*/
.header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

/*
** Style for the not selected items in the menu
*/
a.header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #CCCCCC;
}

/*
** Style for highlighting an item in the menu, when the cursor
** is located over the item
*/
a.header:hover {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

I filen ovan finns det tre olika definitioner som styr utseendet på länkar: a, a.header och a.header:hover.

Den första styr alla normala länkar av typen <a href="...">...</a>. Här kan man tagit bort understrykningen på länken (text-decoration: none) och ändrat färg på texten (color: #224466), samt gjort om länkens text till fetstil (font-weight: bold).

Det övriga två styr alla länkar med klassen header, dvs <a class="header" href="...">...</a>. Den första av dem är det normala utseendet och den andra gäller när muspekaren befinner sig över länken. Det är bara färgen på texten som skiljer dem åt. När muspekaren är över länken, så ändras texten från ljusgrå (color: #CCCCCC) till vit (color: #FFFFFF).

Förutom dessa, så används även .header i menyerna. Den styr standardutseendet på texten i menyn. Genom att använda <div class="header">...</div> runt menyn, så blir all text (förutom länkarna) formaterad enligt .header.

index.html
  
<html>
<head>
  <title>Menutest</title>
  <link rel="stylesheet" href="menutest.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#004466">
  <table width="95%" border="0" cellspacing="0"
         cellpadding="0" bgcolor="#006699">
    <tr bgcolor="#666666"> 
      <td><img src="space.gif" width="1" height="15"></td>
      <td colspan="6" valign="middle"> 
        <div class="header">
          Hem
          | <a class="header" href="page1.html">Sida 1</a>
          | <a class="header" href="page2.html">Sida 2</a> 
          | <a class="header" href="page3.html">Sida 3</a>
        </div>
      </td>
    </tr>
  </table>

  <h1>Exempel på meny</h1>
  <h2>Hemsidan</h2>
</body>
</html>

Det är de rödmarkerade raderna som styr själva länkarna/knapparna i menyn. Klicka här för att testa denna typ av meny.