HTML and CSS Reference
In-Depth Information
Da das CSS-Overlay jeweils an- oder ausgeschaltet werden soll, sobald der Benutzer auf
die Menütaste tippt, speichern Sie den aktuellen Anzeigestatus in der Variablen
toggleID
:
// Festlegen des Toggle Status
var toggleID 0;
Die Funktion
showMenu()
ruft die Funktion
show()
mit dem jeweiligen
visible
-
oder
hidden
-Parameter auf, je nach Wert der
toggleID
-Variablen. Mit der Funktion
show()
sprechen Sie den später im
body
-Bereich definierten
div
-Container an, der
durch die CSS-Definitionen am Anfang der Seite auf
hidden
, also unsichtbar, gesetzt
wurde und hiermit angezeigt oder versteckt wird.
// Menü anzeigen
function showMenu() {
if (toggleID 0) {
toggleID 1;
show('visible');
}
else {
toggleID 0;
show('hidden');
}
}
// Menüfunktion definieren
function show(status){
e document.getElementById('menuoverlay');
e.style.visibility status;
}
Ganz zum Schluss, innerhalb des
body
-Bereichs, definieren Sie noch ein ganz einfaches
div
, das den Inhalt des kleinen Menüs enthält:
<div id "menuoverlay"><center>
<img src "menu mapmode.png" alt "" border "0"><br />
<small>Karte aufrufen</small>
</center>
</div>
Wenn Sie den folgenden Code in das Beispiel integriert haben und
eine entsprechende Grafik mit in das
www
-Verzeichnis kopieren,
sollte Ihr Android-Bildschirm wie nebenstehend aussehen.
Sollten Sie umfangreichere Android-Seiten erstellen und ein
komplexeres Menü benötigen, empfehlen wir Ihnen, einen Blick
auf das JavaScript-Paket von »Slide-in menu« zu werfen. Dieses
frei benutzbare Paket kann ein Menü per JavaScript ein- und
ausblenden. Allerdings ist der Code derzeit nur für ein Menü am
oberen Bildschirmrand konzipiert. Ein Update, das das Menü
wahlweise an allen Seiten anzeigen kann, wurde vom Autor bereits
in Aussicht gestellt. Weitere Informationen und den Code finden
Sie unter
http://cubiq.org/slide-in-menu
.
