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

Das Umschalten zwischen den Sektionen realisieren Sie per JavaScript:
$('nav a').on('click',function(){
$('section, nav a').removeClass('aktiv');
$(this).addClass('aktiv');
$($(this).attr('href')).addClass('aktiv');
return false;
});
Abbildung 5.18 Die fertige Navigationsleiste
5.2.7 Die Restaurantliste erstellen
Widmen Sie sich nun der Restaurantliste und den Optionen. Noch fühlt es sich mehr
wie eine Webseite und weniger wie eine mobile App an. Abhilfe schafft auch hier wie-
der CSS (Abbildung 5.19):
ul {
padding: 0;
margin: 9px;
list-style: none;
border: 1px solid #a1a7ad;
border-radius: 8px;
font-size: 19px;
font-weight: bold;
box-shadow: 0 1px 0 #fff;
}
ul li {
background: #f7f7f7;
border-top: 1px solid #fdfdfd;
border-bottom: 1px solid #cacaca;
padding: 5px 10px;
line-height: 34px;
}
ul li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-color: #e5e5e5;
}