(page) REDIGERET 25 September 2009 • by admin

Menu liste styling

Hvorfor lister til menuer?

Fordele

At sætte opremsede links op med lister og punkter giver mening hvad accessability angår. Tekst oplæsere kan sættes til at gøre noget særligt ud af opremsningen af links i lister.

Det giver også mening rent semantisk (i hvert fald mere mening end uden lister), når en tag tilbyder mening og betydning for indholdet, skal man benytte sig af den. menuer er som regel oplistede punkter, og derfor passer nedenstående opstilling.

Ulemper

Nogle vil mene det er besværligt at sætte yderligere tags:< ul >< /ul >og < li >< /li > rundt om sine a-tags. Indrykningerne, kan man forsvare, vil få menuen til at fremstå mere tydelig og vigtig i html-billedet.

Det er jo blok-elementer! – hvad hvis man foretrækker en vandret menu? Svaret lyder: “det er jo det css kan fikse”.

Globalnav dummy

Atribut-værdien: href="#" er en dummy-link. Der linkes ikke til en “rigtig” adresse, men til et ubestemt sted på samme side – derfor velegnet til afprøvning af link-styling.

<div id="globalnav">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
	</ul>
</div> <!--end globalnav-->

You-are-here-funktionalitet

En class="selected" atribueres det link, som vi er på , fx. med en span.
Så længe der er brugt dummy-links vil man ikke kunne navigere rundt på enkeltsider. Har man stylet sig frem til en fin variation på selected, og klikker man i nedenstående eksempel for at forsøge at navigere, vil det stadig kun være “home” som er udvalgt til at være “selected”.
Når stylingen er på plads, kan menuens links referere til de rigtige sider, copy-pastes ind på hver side – og “selected” vil så skulle flyttes til det respektive link, på hver sin side.

<div id="globalnav">
	<ul>
		<li><span class="selected"><a href="#">home</a></span></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
	</ul>
</div> <!--end globalnav-->

Vertikal

#globalnav {
}
#globalnav ul {
	margin: 0;
	padding: 0;
}
#globalnav li {
	list-style: none;
	width:150px;
}
#globalnav a {
	display: block;
	padding: 0 20px;
	line-height: 26px;
	text-decoration: none;
}
#globalnav a:link, #globalnav a:visited {
	background-color: #FD6;
}
#globalnav a:hover, #globalnav a:active {
	background-color: #FC0;
}
#globalnav .selected a {
	background-color: #FFF;
}

Horisontal

#globalnav {
}
#globalnav ul {
	margin: 0;
	padding: 0;
}
#globalnav li {
	display: inline-block;
	list-style: none;
	width: 33.3%;
	margin-right: -4px;/* */
}
#globalnav a {
	display: block;
	line-height: 26px;
	text-decoration: none;
	text-align: center;
}
#globalnav a:link, #globalnav a:visited {
	background-color: #FD6;
}
#globalnav a:hover, #globalnav a:active {
	background-color: #FC0;
}
#globalnav .selected a {
	background-color: #FFF;
}

Freestyle

Hvis hvert menupunkt skal kunne placeres helt frit over fx. et baggrundsbillede, skal det have sit unike id. Her har hver a-tag fået en id-atribut.

<div id="globalnav">
	<ul>
		<li><span class="selected"><a id="home" href="#">home</a></span></li>
		<li><a id="link2" href="#">link2</a></li>
		<li><a id ="link3" href="#">link3</a></li>
	</ul>
</div> <!--end globalnav-->
#globalnav {
	position: relative;
	width: 150px;
	height: 150px;
	background-color: #FD6;
}
#globalnav ul {
	margin: 0;
	padding: 0;
}
#globalnav li {
	list-style: none;
}
#globalnav a {
	position: absolute;
	width: 50px;
	line-height: 50px;
	text-decoration: none;
	text-align: center;
}
#globalnav a:link, #globalnav a:visited {
	background-color: #FF9;
}
#globalnav a:hover, #globalnav a:active {
	background-color: #FC0;
}
#globalnav .selected a {
	background-color: #FD6;
}
#globalnav #home {
	top: 20px;
	left: -15px;
}
#globalnav #link2 {
	top: 60px;
	left: 110px;
}
#globalnav #link3 {
	top: 110px;
	left: 50px;
}