Simpel Menu Med HTML Og CSS

I denne artikel vil jeg forklare om min menu, det er en simpel menu med HTML og smule CSS, til sidst vil jeg give et link til at downloade en zip fil, hvor kildekoden er i.

HTML

Vi lægger ud med HTML delen, her arbejder vi med "ul", "li" og "a" tags.

Normalt når man opretter et "ul" eller "ol" element, så er der en markering, ved "ul" er det symboler og ved "ol" er det tal, dette dropper vi ved hjælp af CSS længere nede på siden, vi skal lige have bygget siden op med de essentielle ting.

<!DOCTYPE html>
<html lang="da">
	<head>
		<title>[Indsæt din sides titel]</title>
		<meta charset="UTF-8">
		<meta name="author" content="[Indsæt dit navn/alias/aka]">
	</head>
	<body>
		<header>
			Logo billede eller tekst
		</header>
		<nav>
			Her kommer menuen til at være
		</nav>
		<main>
			Her din sides indhold
		</main>
		<footer>
			Skrivelse omkring hvem der har skrevet dette
		</footer>
	</body>
</html>

Så er det overstået, så vi kan komme til det aktuelle, nemlig selve menuen, man placerer menuen imellem <nav> og </nav>.

<ul class="menu">
	<li><a class="menulink" href="/">Hjem</a>
		<ul class="menu">
			<li><a class="menulink" href="/sidegruppe.html">Sidegruppe</a>
				<ul class="menu">
					<li><a class="menulink" href="/side.html">Sidenavn</a></li>
				</ul>
			</li>
			<li><a href="/contact.html">Kontakt</a></li>
		</ul>
	</li>
</ul>

Dette er kun en brøkdel af min menu, men man kan bygge videre på den, inklusiv nogle ret fancy features ved hjælp af CSS, jeg kommer dog ikke ind på de fancy features i denne artikel.

Så er det bare lige at gemme dokumentet inden at vi går videre til CSS delen.

CSS

Det er en smal sag at tilføje CSS, man kan læse op på hvordan det gøres i Start På CSS artiklen.

Jeg skriver her de vigtigeste punkter ved menuen, de er vigtige for mig, og min side, da menuen ellers ville fylde omkring 90 - 100 pixel mere, pyt med det, her kommer noget CSS.

<style>
	a.menulink {
		color:#daa520;
	}
	ul.menu {
		list-style:none;
		margin-left:-30px;
	}
	ul.menu li {
		padding:3px;
	}
</style>

Det er bare at tilføje CSS / HTML stumpen her over til "head" sektionen, gem der efter dokumentet, og åben det ved at dobbeltklikke på det, husk at det skal være enten en .html eller .htm fil, resultatet burde være noget lig det der er her under.

Resultat

Så vil jeg slutte denne artikel af.