Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 228

5.2.6 Eine Symbolleiste einfügen
Die Symbolleiste ist ein gelerntes und daher für Ihre App ideales Navigationsele-
ment. Im Gegensatz zu Desktopanwendungen befinden sich Symbolleisten bei
Mobilgeräten meist am unteren Bildschirmrand, damit Sie gut mit einer Hand und
dem Daumen zu erreichen sind. Fügen Sie folgenden Code in Ihre HTML-Datei ein:
<nav>
<li>
<a class="karte" href="#karte">Karte</a></li>
<li>
<a class="uebersicht" href="#uebersicht">Liste</a></li>
<li>
<a class="optionen" href="#optionen">Optionen</a></li>
</nav>
Sie haben jetzt eine Liste mit Textlinks erstellt, die per Anker auf die jeweiligen Sekti-
onen Ihrer App verweisen. Damit daraus eine Toolbar wird, müssen Sie noch etwas
CSS hinzufügen:
nav {
height: 49px;
background: #000 -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #000),
color-stop(0.02, #565656),
color-stop(0.04, #303030),
color-stop(0.5, #141414),
color-stop(0.51, #000)
);
display: -webkit-box;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
nav li {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-flex: 1;