Publisert av Kenneth Vassbakk, 14. oktober 2010 under HTML & CSS, Utvikling

Nå har vi lært litt teori om dette med menyer, men hvordan går man frem for å lage de ved hjelp av HTML og CSS?

Det er svært mange måter du kan gå frem for å lage en meny ved hjelp av HTML og CSS. Det er mange som bruker flere div elementer for å danne en meny, noen bruker table mens andre bruker  Image Maps i Photoshop. Min favoritt (og veldig mange andre) er å benytte seg av ul elementet. Ved å benytte seg av en uordnet liste er det svært enkelt å lage menyer og utforme de slik du ønsker. (Så lenge du ikke har valgt å gå for en helt ny variant av meny)

Topp- og sidemeny.

Vi snakket i forrige artikkel om hva topp- og sidemeny er, det er de vanligste menyene du ser på nettsider. Fremgangsmåten for å lage de to variantene er veldig like, det eneste som skiller de to fra hverandre er stilsettet. Under skal vi se på koden for de to menyene.

HTML

<ul id="menu">
	<li><a href="#">Hjem</a></li>
	<li><a href="#">Nyheter</a></li>
	<li><a href="#">Guider</a></li>
	<li><a href="#">Om oss</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>

Når vi ser på HTML delen ser vi at dette er bygget opp av en uordnet liste, som inneholder liste elementer. I li har vi linkene vi ønsker å plassere i menyen vår. Dette er alt du trenger av HTML for selve menyen om vi ser bort i fra lenking til CSS fil og alt det andre nødvendige for en HTML side.

CSS

Den første typen meny vi skal se stilsettet til er toppmenyen. Det første elementet vi må sette stiler til, er ul. Dette er elementet som dekker hele menyen, vi ønsker ikke å vise elementet i standardformen med punkter før teksten – dette kan vi ordne ved hjelp av CSS.

#menu {
	list-style: none;
	margin: 0px;
	padding: 5px 0px 5px 0px;
	width: 340px;
	background: #dddddd;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

Denne CSS delen tar seg som sagt av hele elementet. Vi fjerner punktene før teksten (list-style), tar vekk all margin, setter padding på topp og bunn til 5px og definerer en bredde. Det du burde være obs på når du setter bredde på en toppmeny er at hvis du går over bredden vil den normalt sett gå ned ett hakk. Hvis du ønsker å stoppe dette kan du velge å sette overflow: hidden;  (du må da også sette høyde) Hvis du gjør dette burde du også være obs på at meny elementer som går over bredden blir ikke vist.

Videre setter vi en bakgrunnsfarge og en border radius for å få menyen til å se litt penere ut.

Nå som vi har ordnet hele elementet kan vi arbeide med selve liste elementene (li). Vi ønsker ikke at de skal vises som det gjør ved vanlige innstillinger (nedover), vi ønsker at menyen skal utvide seg horisontalt.

#menu li {
		display: inline;
		border-right: 1px solid #cccccc;
	}
		#menu li:last-child {
			border-right: 0px;
		}

Dette tar seg av ale liste elementene som er i menyen, vi har plassert de på en linje ved hjelp av display: inline; For å gjøre hele menyen litt penere tar vi også i bruk en border på høyre side av hver knapp. For at siste menyknappen ikke skal ha noen border bruker vi :last-child. Hvis du ikke har kjennskap til bruk av slik CSS kan jeg anbefale deg å lese mer om det  - det er slikt som gjør CSS genialt!

Nå er menyen straks klar til bruk, det siste som mangler er å definere stiler for selve knappene. Vi ønsker ikke at knappen skal ha den vanlige blåfargen i vår meny, men heller svart og uten linje.

#menu li a {
	color: #000000;
	text-decoration: none;

	margin: 0px 5px 0px 5px;
	padding: 2px 5px 2px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
	#menu li a:hover {
		background: #eeeeee;
	}

Som sagt har vi definert fargen til svart og slått av linjen under teksten. Videre har vi plasser noen «kosmetiske» verdier for elementet, slik at menyen vår ser bedre ut. Vi ønsker selvfølgelig å vise den besøkende at de holder over ett av menyvalgene når de holder musen over. Dette gjør vi ved hjelp av :hover. I dette eksempelet bruker vi enkelt en annen bakgrunnsfarge for å signalisere dette.

Hvis du har fulgt med gjennom artikkelen er dette menyen du har laget.

Stilsett for sidemeny

Forrige del tok seg av stilsett for en toppmeny, men hva om vi ønsker en sidemeny? Det eneste vi trenger å forandre er stilarket (css filen).

Som sist ønsker vi først å forandre på hele elementet (ul).

#menu {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	background: #dddddd;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

Vi ønsker fremdeles at det ikke skal være noen punkt før teksten, heller ikke noe margin. Punktene som skiller seg fra den tidligere CSSen er padding og width. Her har vi valgt at det ikke skal være noen padding og at bredden skal være langt mindre. Dette er fordi vi ønsker at menyen skal ligge ved siden av hoved innholdet på nettsiden.

Neste for tur er liste elementet, det er ikke stort som trenger å forandres i dette elementet. Vi ønsker ikke lenger at menyen skal vises horisontalt og dropper dermed display: inline; Vi ønsker en bredde på undersiden istedenfor høyre siden, og definerer også en høyde på elementet (strengt talt ikke nødvendig – men det så best ut for dette eksempelet). OBS: Hvis du er redd for at meny elementet skal bli for langt og gå ned en linje, kan du her velge å bruke overflow: hidden;

Videre har vi plassert en padding på elementet for å få litt mellomrom mellom linjene og lenkene.

#menu li {
	border-bottom: 1px solid #cccccc;
	height: 25px;
	padding: 5px 0px 5px 0px;
}
	#menu li:last-child {
		border-bottom: 0px;
	}

Som du ser er det ikke stort som er forandret.

Sist men ikke minst er det selve lenken vi stilsetter. Det er ikke store forandringene på dette elementet heller. Vi ønsker at lenken skal dekke hele liste elementet så vi setter display: block; Vi ønsker å plassere teksten i senter (vertikalt) og bruker dermed line-height for å ordne dette. Siden jeg ikke trenger å tenke på flere linjer til en lenke har jeg også definert en høyde, dette gjorde jeg fordi øverste lenke ikke hadde mellomrom mellom linjen og lenken.

Videre er det små forandringer hos egenskapene padding og margin med tanke på at menyen nå skal gå nedover og ikke bortover.

#menu li a {
	color: #000000;
	text-decoration: none;
	display: block;
	height: 25px;
	line-height: 25px;

	margin: 0px 5px 0px 5px;
	padding: 0px 5px 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
	#menu li a:hover {
		background: #eeeeee;
	}

Når du har gjort endringene er dette menyen du har laget.

Utvidende meny

Hvis du ønsker å lære mer om menyer, eller ønsker å lage en utvidende meny vil jeg anbefale deg å ta en titt på Dropdown meny i HTML og CSS. Dette er en video som går gjennom hvordan man lager en Dropdown meny (nedfallsmeny), men hvis du gjør noen endringer til CSS delen vil dette også fungere utmerket på sidemenyer.

Tips: Hvis du ønsker utvidende meny på sidemenyer, tenk at den utvidende menyen skal komme rett ved siden av knappen du holder over. Dette gjør du ved left: <Bredde på hoved knapp>. Vanskeligere er det ikke!

Tiny URL for dette innlegget: http://tinyurl.com/3ammfan