Skapa en första Meny

En webbplats består ju sällan av bara en enda sida och för att kunna bläddra mellan sidorna måste man infoga länkar på alla sina sidor.

Länkar till andra sidor på webbplatsen brukar oftast presenteras tillsammans - i en s.k meny. Oftast ser menyn likadan ut på alla sidor - medan sidans huvudinnehåll förstås är unikt för varje sida.

Här skapas en första väldigt enkel meny. Guiden bygger vidare på grunden som skapades under rubriken: En första Sida & Stilmall och layouten på föregående sida.

Inledning

Guiden utgår alltså från dokumenten webbsida.html och stilmall.css som skapades tidigare under rubriken: En första Sida & Stilmall och CSS-layouten som skapades på föregående sida.

Så här ser HTML-dokumentet webbsida.html ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>MIN WEBBSIDA</title>
<meta name="author" content="Namn">
<meta name="description" content="Beskrivning av länken.">
<meta name="keywords" content="nyckelord, en fras, nyckelord">
<link rel="stylesheet" href="stilmall.css" type="text/css">
</head>
<body>
<div id="layout">

<div id="main">
<h1>Huvudrubrik</h1>
<p>Lorem...</p>
<p>Lorem...</p>
</div>

<div id="side">
<p>Här finns plats...</p>
</div>

<br class="clear">

</div>

</body>
</html>

Och så här ser stilmallen stilmall.css ut:

body {
padding: 0; margin 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}

h1 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}

.clear { clear: both; }

#layout { width: 98%; }

#side {
width: 22%;
float: left;
padding-top: 4em;
}

#main {
width: 75%;
float: right;
}

Här kan du testa hur sidan ser ut - öppnas i ett nytt fönster!

 Till Toppen 

Grunden

Om man vill hålla sig till vad som är korrekt enligt standard ska man använda sig av punktlistor när man skapar menyer i HTML och CSS.

En punktlista skrivs in i HTML-koden mellan <ul> och </ul> - listans punkter mellan <li> och </li>.

Så här ser HTML-koden till en punkt-lista ut:

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>

Länkar skrivs in i HTML-koden mellan <a> och </a>. Med  href=" "  anger man adressen till sidan man vill länka till. Med  title=" "  anges en kort beskrivning av länken.

Och så här ser koden ut med länkar i listan:

<ul>
<li><a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li><a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li><a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li><a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li><a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

På sidan skulle koden - utan css - kunna se ut ungefär så här:

 Till Toppen 

Skriv in menyn i HTML-koden

Listan med menyn måste först och främst skrivas in på sidan: webbsida.html. Den skrivs in i kolumnnen: side.

Så här:

<body>
<div id="layout">

<div id="main">
<h1>Huvudrubrik</h1>
<p>Lorem...</p>
<p>Lorem...</p>
</div>

<div id="side">

<ul>
<li><a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li><a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li><a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li><a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li><a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

</div>

<br class="clear">

</div>

</body>
</html>

För att menyn ska kunna stajlas i stilmallen får den en egen identitet: id="meny" som skrivs in i listans start-tagg: <ul>.

<body>
<div id="layout">

<div id="main">
<h1>Huvudrubrik</h1>
<p>Lorem...</p>
<p>Lorem...</p>
</div>

<div id="side">

<ul id="meny">
<li><a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li><a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li><a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li><a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li><a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

</div>

<br class="clear">

</div>

</body>
</html>

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Stajla menyn i Stilmallen

För att snygga till utseendet på länkarna i menyn måste de stajlas i stilmallen.

Så här skrivs koden in i stilmallen: stilmall.css

CSS 
#meny {
list-style-type: none;
line-height: 1.5em;
padding: 0; margin: 0;
}

#meny a {
color: #000000;
font-weight: bold;
text-decoration: none;
}

#meny a:hover {
text-decoration: underline;
}
Förklaring:

#meny

  • list-style-type: none - inga list-prickar!
  • line-height: 1.5em - utökar radavståndet lite - måttet är em.
  • padding: 0; margin: 0 - tar bort listans marginaler och padding.


#meny a - gäller alla länkar i menyn.

  • color: #000000 - textfärg svart.
  • font-weight: bold - länkarna ska visas med fetstil.
  • text-decoration: none - ingen understrykning.

#meny a:hover - gäller när pekaren förs över länken.

  • text-decoration: underline - länken blir understruken.

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Mer innehåll!

För att länkarna i listmenyn ska få något att jämföras med skrivs lite mer innehåll in på sidan: webbsida.html - nämligen en lista och en länk. De skrivs in i dokumentet i kolumnen: main.

För att själva menyn ska bli lite mer "menylik" ska också "pilar" skrivas in vid länken i varje list-punkt i meny-listan. Pilarna skapas med teckenkoden för "franskt citat" som skrivs så här: &raquo;

På webbsida.html:

<body>
<div id="layout">

<div id="main">

<h1>Huvudrubrik</h1>
<p>Lorem...</p>
<p>Lorem...</p>
<p>Här är en lista:</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>
<p>Här är en länk: <a>::</a></p>

</div>

<div id="side">

<ul>
<li>&raquo; <a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li>&raquo; <a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li>&raquo; <a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li>&raquo; <a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li>&raquo; <a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

</div>

<br class="clear">

</div>

</body>
</html>

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

Som du ser har listan och länken i kolumnen: main inte samma utseende som listan och länkarna i menyn. Det beror på att meny-listan fått en egen identitet som sedan stajlats i stilmallen. Utseendet på sidans andra listor och länkar påverkas inte.

 Till Toppen 

Avslutningsvis

Sådärja! Då har du en meny också!

Här hittar du koderna i sin helhet - öppnas i ett nytt fönster!

Du måste förstås skriva in adressen till de sidor som du vill länka till i länk-koden. Under rubriken: HTML / Länkar kan du läsa mer om hur det går till!

Vandra vidare i guiderna under rubriken HTML & CSS!

På nästa sida kompletteras stilmallen med de mest grundläggande formateringarna.

Hur man skapar lite mer avancerade menyer hittar du här: CSS / CSS - Menyer.

 Till Toppen