Anker (Sprungmarken) in horizontaler Leiste

Um direkt in einem Beitrag zu einem bestimmten Bereich zu springen, kann man Anker setzen.

• Der Link zum Bereich:
  <a href="#disko">Diskografie</a>
• Das Ziel: (id-Angabe)
  <h3 id="disko">Diskografie:</h3>

Für eine längere Seite [Eddie Harris] habe ich eine horizontale Ankerleiste eingebaut.
Beispiel um die Funktionalität zu testen:

Ganz dezent und unauffällig.
Vor jedem Link erscheint ein kleiner Pfeil. [von FreeIconsWeb]

Der Code im Beitrag:

<div class="horizontlinks">Direkt: <a href="#footer">nach unten (Footer)</a><a href="#header">nach oben (Header)</a></div>

Die Styling-Angaben

in der style.css dazu folgendes eingetragen:

.horizontlinks {
font-family: Arial, 'Trebuchet MS', Helvetica, sans-serif;
font-size: .9em;
margin-bottom:15px;
}
.horizontlinks a {
background:transparent url(images/ankerpfeil.gif) no-repeat scroll left center;
padding: 0 5px 0 10px;
margin-left: 5px;
}
.horizontlinks a:hover {
border-bottom:none;
}

Mehr Styling

Beispiel mit erweiterten Styling-Angaben:

Bei dem Code zum Beitrag wird hier zusätzlich eine ID angegeben:

<div id="horizontleiste" class="horizontlinks">

Die Stylingangaben zu der ID Horizonalleiste:

#horizontleiste {
background:transparent url(images/bg-input.jpg) repeat-x scroll left top;
color: #777;
border: 1px dotted #ddd;
padding: 6px;
text-indent:10px;
}

Die restlichen Angaben wie oben.

Nun lässt sich dieses Styling nicht nur für die Anker-Links einsetzen sondern natürlich auch für andere Zwecke.
So verwende ich es zum Beispiel für die interne Verlinkung der Kategorien auf der Startseite

Generelle Infos zu Anker-Links: SelfHTML

Eine interessante Methode um die Ziele (IDs) auch mit einem Link zu versehen gibt es bei Toscho.Design.
Dort werden die Überschriften mit Hilfe eines Plug-Ins automatisch als Sprungziele generiert und ein kl. Inhaltsverzeichnis angezeigt.