Navigations-module, Inhaltsnavigation, Richtlinien für das Webdesign Bund

Paging

FLEX

2.1.8

added <span class="sr-only">current page</span> and aria-disabled="true" for accessibility
added titleto empty link (link only with icon)
added .clearfixand .pull-left inside of `.pagination-container

Mit der Paging-Funktion kann der Anwender durch eine grosse Anzahl Elemente blättern , die in Seiten (Pages) angeordnet sind. Das Element erscheint oberhalb und unterhalb der Elementliste.

<nav class="pagination-container clearfix">
	<span class="pull-left">Object - 2 of 3</span>
	<ul class="pull-right pagination">
		<li class="separator disabled">
			<a href="#" title="Step backward" aria-disabled="true">
        <span class="icon icon--step-backward"></span>
        <span class="sr-only">Step backward</span>
      </a>
		</li>
		<li class="separator disabled"><a aria-disabled="true" href="#">Previous</a></li>
		<li class="active"><a href="#">1 <span class="sr-only">current page</span></a></li>
		<li><a href="#">2</a></li>
		<li>...</li>
		<li><a href="#">17</a></li>
		<li class="separator-left"><a href="#">Next</a></li>
		<li class="separator-left">
			<a href="#" title="Step forward">
        <span class="icon icon--step-forward"></span>
        <span class="sr-only">Step forward</span>
      </a>
		</li>
	</ul>
</nav>

Anker-Links

FLEX

Ein Anker-Link ist eine Sprungmarke, mit dem eine Position innerhalb der aktuellen Seite direkt angesteuert werden kann.

<ul>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 1</a></li>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 2</a></li>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 3</a></li>
</ul>

Die Prozessnavigation wird im Zusammenhang mit Formularen eingesetzt, welche über mehrere Seiten verteilt sind. Der aktive Prozessschritt wird in rot markiert. Die vorhergehenden Schritte sind klickbar und führen zurück zum entsprechenden Prozessschritt.

Achtung

Das vorliegende Beispiel beschreibt nur das graphische Design; die Prozessnavigation muss in jedem Fall gemäss dem zugrundeliegenden Prozess programmiert werden.

<nav class="nav-process">
	<ul>
		<li>
			<a href="#">Step 1</a>
		</li>
		<li>
			<a href="#">Step 2</a>
		</li>
		<li class="active">
			<a href="#">Step 3</a>
		</li>
		<li class="disabled">
			<a href="#">Step 4</a>
		</li>
	</ul>
</nav>

Reiter-Navigation

FLEX

Die Reiter-Navigation wird angewendet, wenn auf einer Seite zusammenhängende Inhalte gruppiert werden sollen. Im Sinn einer Ausnahme ist die Schriftfabe dunkelgrau (statt blau). Der aktive Reiter ist durch die rote Linie und den weissen Hintergrund gekennzeichnet.

Die Bezeichnungen der Reiter sind als Beispiel zu lesen. Sie richten sich nach dem effektiven Inhalt der Seite.

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, voluptas, repudiandae, sequi, aliquam eveniet laborum sunt accusantium quisquam esse obcaecati similique iure voluptates nobis provident totam autem odit quos eligendi!

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, et nam molestiae repellat voluptas. Praesentium, earum reprehenderit quam voluptatem qui minus neque? Libero, minima magni ab dolor nemo reiciendis aperiam.

3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, qui, eligendi veritatis tenetur magnam aut voluptates nam optio eveniet ad quisquam est blanditiis cumque error illum sapiente consectetur tempora impedit?

4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, libero, alias veniam a eveniet dolores necessitatibus nam officiis blanditiis ea expedita vitae minima et inventore dolorum quibusdam natus commodi rerum.

<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs">
			<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
			<li><a href="#profile" data-toggle="tab">Profile</a></li>
			<li><a href="#messages" data-toggle="tab">Messages</a></li>
			<li><a href="#settings" data-toggle="tab">Settings</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content tab-border">
			<div class="tab-pane active" id="home">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, voluptas, repudiandae, sequi, aliquam eveniet laborum sunt accusantium quisquam esse obcaecati similique iure voluptates nobis provident totam autem odit quos eligendi!</div>
			<div class="tab-pane" id="profile">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, et nam molestiae repellat voluptas. Praesentium, earum reprehenderit quam voluptatem qui minus neque? Libero, minima magni ab dolor nemo reiciendis aperiam.</div>
			<div class="tab-pane" id="messages">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, qui, eligendi veritatis tenetur magnam aut voluptates nam optio eveniet ad quisquam est blanditiis cumque error illum sapiente consectetur tempora impedit?</div>
			<div class="tab-pane" id="settings">4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, libero, alias veniam a eveniet dolores necessitatibus nam officiis blanditiis ea expedita vitae minima et inventore dolorum quibusdam natus commodi rerum.</div>
		</div>
	</div>
</div>

Navigation

Suche

Inhaltsnavigation