curlingthebrackets » navigation

Tutorials menu

admin — Thu, 03 Sep 2009 03:50:26 +0000

cssnewbie super-simple-horizontal-navigation-bar

Links syntaks

admin — Sat, 29 Aug 2009 22:42:04 +0000


    <a href="om_mig.html">OM MIG</a>

    <a href="http://google.com">GOOGLE</a>

    <a href="mailto:din@adresse.dk">EMAIL</a>

    <a href="index.html">
        <img src="billeder/homeknap.gif" alt="knap til home" /></a>
 

    <a href="#punkt-1">PUNKT 1</a>

    <a id="#punkt-1"> </a>

Tomme menu punkter

admin — Sun, 24 Feb 2008 23:29:17 +0000

#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

admin — Fri, 15 Feb 2008 23:06:43 +0000

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

admin — Mon, 19 Feb 2007 21:00:39 +0000

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; }

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;
}