Fitts Gesetz ist eine Funktion, die Schwierigkeit mißt, ein bestimmtes Zielobjekt (eine Schaltfläche) beispielsweise mit der Maus zu treffen. Dabei beschreibt sie das Verhältnis zwischen der Distanz zum Ziel und dessen Größe (siehe Abb. oben). Die einfache Aussage ist im Prinzip: je größer die Schaltfläche, desto einfacher ist es, sie zu betätigen.

Es bietet dich daher an, die Navigationsleiste auf einer Webseite, die sich ganz oben befindet, etwas größer zu gestalten, insbesondere, wenn sie viel und häufig verwendet wird. Eine einfache Möglichkeit zur Gestaltung einer horizontalen Navigationsleiste lässt sich mit einer Webgrafik und negativen Margins realisieren, wie das folgende Beispiel zeigt:

Voraussetzung in diesem Beispiel ist dabei ein div-Element mit der id naviBar, welches eine Liste mit Links enthält. Für jeden Link wird das Hintergundbild entsprechend pixelgenau plaziert. Bei mouseover wird dann einfach der Wert für die y-Achse entsprechend verändert. Hier das benötigte CSS:

#naviBar ul{ float: left; height: 40px; line-height: 1; list-style:none}
#naviBar li{ float: left; height: 40px; text-indent: -9999px; list-style:none; padding: 5px;}
#naviBar li a{ display: block; background: url(./img/navi-main.gif) top left no-repeat; height: 40px; border: none }

#naviBar li.menu-1 a{ background-position: 0 0; width: 70px; }
#naviBar li.menu-2 a{ background-position: -73px 0; width: 70px; }
#naviBar li.menu-3 a{ background-position: -140px 0; width: 90px; }

#naviBar li.menu-1 a:hover { background-position: 0 -40px; }
#naviBar li.menu-2 a:hover{ background-position: -73px -40px; }
#naviBar li.menu-3 a:hover{ background-position: -140px -40px;}

Des Weiteren benötigt Ihr noch das Hintergrundbild, welches wie das untere Beispielbild gestaltet sein sollte.

Viele schöne Inspirationen für horizontale Navigationsleisten findet Ihr übrigens bei smashingmagazine. Viel Spass beim probieren :-)