Trick # 85 | Dieser Beitrag beinhaltet 524 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Manchmal kann sich ein Formularfeld sehr gut auch als Navigationselement eignen. Wie Sie eine solche Auswahl erstellen, zeigen wir Ihnen in diesem Tipp.
Besonders bei Anker-Links, allenfalls auch bei Links mit Variablen, kann eine Formularauswahl ganz viele Navigationselemente sauber kaschieren. In der Schweiz könnten zum Beispiel die 26 Kantone in so einer Auswahl landen. Oder in Deutschland die 16 Bundesländer.
Einen Beispielcode zeigen wir Ihnen hier. Passen Sie ihn an und fügen sie ihn in der Text-Ansicht (bzw. HTML-Ansicht) Ihrer Website ein:
<form>
<p>
<label>
<strong>Wohin auf dieser Seite möchten Sie springen?</strong>
<br />
Wählen Sie eine Option.
</label>
</p>
<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="#">Bitte wählen</option>
<option value="#lead">zum ersten Abschnitt</option>
<option value="#code">zum HTML-Code</option>
<option value="#beispiel">zur Beispielanwendung</option>
<option value="#last">zum letzten Textabschnitt</option>
</select>
</form>Hier ein Beispiel, wie obiger Code funktioniert:
Sie sehen: Sie müssen nach der Auswahl nicht einmal einen Button klicken – kaum ausgewählt springt der Browser schon an die richtige Stelle der Seite. Anzumerken ist noch folgendes:
- Der Code wie er hier vorliegt, öffnet kein neues Fenster, sondern zeigt eine beliebige URL (natürlich bei Bedarf auch eine andere Seite) im aktuellen Browserfenster.
Damit eignet sich eine solche Navigation nicht unbedingt für externe Links, die man ja meist gerne in einem neuen Fenster anzeigen möchte. - Die hier angesteuerten Links sind allesamt Ankerlinks. (#lead, #beispiel usw.) Diese Anker können natürlich auch mit einer ganz normalen URL ersetzt werden.
Wir haben dies hier nicht angewendet, damit Sie nicht bei jedem Auswahlversuch den Tipp aus dem Auge verlieren.
Versuchen Sie es auf Ihrer Website; unter Umständen lohnt es sich, das Auswahlmenüfeld noch mit ein wenig CSS ansprechend und passend zu Ihrer Website zu gestalten.
Werbung
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Werbung
