(category) LIST of posts

Tutorials menu

cssnewbie super-simple-horizontal-navigation-bar

dynamicdrive
listamatic maxdesign

Links syntaks

<!--Link til relativ adresse-->
    <a href="om_mig.html">OM MIG</a>
<!--Link til absolut adresse-->
    <a href="http://google.com">GOOGLE</a>
<!--Link til mail adresse-->
    <a href="mailto:din@adresse.dk">EMAIL</a>
<!--Link på billede-->
    <a href="index.html">
        <img src="billeder/homeknap.gif" alt="knap til home" /></a>
 
<!--Link til "punkt-1" på samme side, (fx. indholdsfortegnelse) -->
    <a href="#punkt-1">PUNKT 1</a>
<!--Der forudsættes et Anchor-id længere nede på siden -->
    <a id="#punkt-1"> </a>

Tomme menu punkter

#menu {
position:relative;
margin:auto;
width:420px;
}
#menu ul {
display: inline;
}
#menu li {
display: inline;
float: left;
}
#menu li a {
display: block;
width: 105px;
height: 30px;
font-size: 0;
}
#menu li a:link, #menu li a:visited  {
background-color: red;
}
#menu li a:hover, #menu li a:active  {
background-color: yellow;
}
<div id="menu"><ul>
<li><a href="index.html" title="index"> </a></li>
<li><a href="cv.html" title="cv"> </a></li>
<li><a href="musik.html" title="musik"> </a></li>
<li><a href="grafik.html" title="grafik"> </a></li>
</u></div>

.

Billedbaggrund og “you-are-here” funktionalitet

<li><a id="vi_er_her" href="index.html" title="index"> </a></li>
#menu li a:link, #menu li a:visited  {
background-image: url(sti/til/billede.jpg);
background-position: 0px 0px;/*y-akse x-akse*/
}
#menu li a:hover, #menu li a:active  {
background-position: 50px 50px;
}
#menu li a#vi_er_her:link, #menu li a#vi_er_her:visited  {
background-position: 50px 50px;
}

Overskuelighed i navigationen

Bruger skal så hurtigt og så intuitivt som muligt have overblik over indholdet.

  • HVOR er man nu / HVAD ser man nu
  • HVOR kan man gå hen / HVAD ellers kan man se

En tydelig forskel på global menu og lokal menu

Breadcrumbs
fx. overskriften på denne site, hjælper med at kunne finde tilbage og giver forståelse for opbygningen.

You-are-here funktionalitet
En fremhævning af det aktuelle menu-punkt, det man er på lige nu.
Eksempel: På siden tilføjes den tilsvarende link en class=”selected”, som derefter styles anderledes end de andre links.

Artikler:
Hvorfor lister kan være gode til links:
w3.org/QA/Tips/unordered-lists

Ul – li – links

xhtml css 
<ul>
<li><a href="#">punkt1</a></li>
<li><a href="#">punkt2</a></li>
<li><a href="#">punkt3</a></li>
<li><a href="#">punkt4</a></li>
</ul>
 
 ul {
background-color: #000000;
padding: 0 8px 0 8px;
display: inline;
background-image: url(slette_02.gif);
}
 
li {
display: inline;
margin: 0 4px 0 4px;
}
 
li a:link, li a:visited {
background-color: #CCCCCC;
color: #666666;
padding: 0 5px 0 5px;
text-decoration: none;
font-weight: bold;
}
 
li a:hover, li a:active {
background-color: #eee;
color: #000000;
}