Menyn

Tillverka en cool meny
Nu ska vi göra en häftig meny till din hemsida. Du kan börja med att skriva in den här koden i ett nytt dokument, så ska jag förklara sen:

<html>
<head>
<title>Meny</title>
</head>
<body bgcolor="ffffff">
<style type="text/css">
<!--
a:hover{color: black; text-decoration: underline}
//-->
</style>
<center><table width="150" border="1" cellspacing="0" cellpadding="0" bordercolor="black">
<tr>
<td width="100%" bgcolor="0080c0">
<center><font size="-2" face="verdana">.:Meny:.</font></center></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val1.html" target="huvud">Val 1</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val2.html" target="huvud">Val 2</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val3.html" target="huvud">Val 3</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val4.html" target="huvud">Val 4</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val5.html" target="huvud">Val 5</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val6.html" target="huvud">Val 6</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';"
onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val7.html" target="huvud">Val 7</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';" onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val8.html" target="huvud">Val 8</a></font></td>
</tr>
<tr>
<td width="100%" bgcolor="0080c0" onMouseOver="this.style.backgroundColor='lightblue';" onMouseOut="this.style.backgroundColor='';">
<font size="-2" face="verdana"><a href="val9.html" target="huvud">Val 9</a></font></td>
</tr>
</table></center>
</body>
</html>

Nu när du har skrivit av koden ska din meny se ut så här. Om den inte gör det kan du bara högerklicka på länken och välja "Spara mål som...". Nu ska jag försöka förklara lite. Den här menyn är uppbyggd av tabeller. Det var den enkla biten. Sen är det så att om man lägger en länk i en frame men man vill ha den att ploppa upp i en annan frame, måste man utveckla länk koden. Man måste lägga till en "target" funktion. I det här fallet blev det "target="huvud" för att vi döpte den andra framen till huvud i förra övningen. Sen har jag lagt till ett integrerat javascript i <td> koden oxå. Det scriptet gör att bakgrundsfärgen i tabellen byter färg när man för musen över den. En annan effekt som jag har lagt till är CSS koden. Den gör så att länken byter färg när man för musen över den. Det är kanske inte lätt att förstå, men man växer in i det så småningom. Observera att du kan redigera det som är understrucket i koden. Redigerar du andra delar av koden kan du förstöra hela menyn. Lycka till /Majk (webmaster MajkDomain V3.1)
[Tillbaka]