2017-08-30 3 views
1

Ich versuche es so zu machen, dass ich im Schubladenmenü eine Option wie Einstellungen am unteren Bildschirmrand habe und wenn man nach oben oder unten scrollt, dass es am unteren Rand der Schublade sichtbar bleibt Beispiel, um es zu visualisieren ist die Android Inbox App, wenn Sie das Menü betrachten, werden Sie sehen, dass die Einstellungen und Hilfe & Feedback-Tasten sind unten unabhängig von der Scroll-Position sichtbar (kann Bild nicht posten, weil Reputation < 10 ist).Wie Fußzeile in der Navigationsleiste hinzufügen?

Einige Informationen darüber, wie ich versuche, dies zu tun, begann ich mein Handy fokussierte Website mit der MDL android Vorlage https://getmdl.io/templates/android-dot-com/index.html und i mit Ausnahme hinzugefügt mehr Einzelteile, um es etwas an der Schublade Menü haben machen geändert. Und die Menge der Artikel in meinem Schubladenmenü wird langsam ziemlich lang und um es ein bisschen einfacher zu machen, so dass der Benutzer nicht das gesamte Menü herunterscrollen muss. Ich möchte, dass es am unteren Rand des Bildschirms im Menü der Schublade bleibt .

Vielen Dank im Voraus und Entschuldigung für mein Englisch. Ich bin dank StackOverflow sehr weit mit meiner Seite gekommen, aber ich konnte nicht viel darüber finden.

+0

hinzufügen 'jsfiddle' Beispiel von dem, was Sie im Moment haben – masterpreenz

Antwort

0

Überprüfen Sie this pen.

Grundsätzlich können Sie die Wiederverwendung von MDL Komponenten machen dies zu erreichen:

  1. Verwenden mdl-layout__header innerhalb mdl-layout__drawer. Das wird eine Symbolleiste nach Navigationselemente platzieren
  2. Verwenden mdl-layout-spacer nach nav und vor mdl-layout-header-Push der Symbolleiste auf den Boden der Schublade
+0

Es funktioniert bis Das Navi wird so voll, dass der Bereich scrollbar wird und die Fußzeile dann einfach auf den unteren Rand der Schublade übergeht und sich nicht mehr wie eine Fußzeile verhält. – mexiscool

+0

Auch glaube ich nicht, dass es auf Mobile funktioniert, es zeigt es überhaupt nicht. Das passiert auch auf dem Desktop, wenn ich das Fenster weniger breit mache. Die Sache ist, dass ich überhaupt kein @media-Tag habe. – mexiscool

+0

passiert bei 1024px mit denken, es ist irgendwo in der mdl css. – mexiscool

Verwandte Themen