Korrigierte Statusleiste führt zu einem Konflikt mit dem Menü "Ausblenden"

Ich mache eine Website mit einer festen Statusleiste oben auf der Seite, z. B. einer iOS-Statusleiste. Ich möchte, dass es oben fixiert ist, so dass es immer da ist und Inhalt darunter rollt. Ich habe auch ein Ausblendmenü, das über eine Schaltfläche in der Statusleiste ausgelöst wird. Der gesamte Inhalt der Website ist in ein div eingepackt, das beim Ausfahren des Menüs zur Seite geschoben wird.Korrigierte Statusleiste führt zu einem Konflikt mit dem Menü "Ausblenden"

Mein Problem passiert mit der Statusleiste, wenn das Menü herausgleitet. Da es auf position: fixed; festgelegt ist, möchte es nicht verschoben werden. Es drückt die Statusleiste auf der Seite nach unten.

Meine CSS für die Statusbar:

.toolbar { 
color: purple; 
position: fixed; 
width: 100%; 
height: 60px; 
top: 0; 
left: 0; 
padding-top: 20px; 
background: white; 
border-bottom: 1px solid $white; 
z-index: 99; 
text-align: center; 
}

Der JS Fiddle ist ein perfektes Beispiel für die Frage, klicken Sie einfach auf die Taste MENU.

JSFiddle: https://jsfiddle.net/mqrso95g/1/

Quelle

2016-08-05 gkrizek

Edited basierend auf Kommentare:

Wenn Sie ein Div innerhalb Ihres nav hinzufügen, können Sie ein margin-left zu diesem inneren div hinzuzufügen, wenn das Menü geöffnet ist. Dieses Menü ist jetzt noch sichtbar, wenn das Seitenmenü geöffnet wird.

Ich habe eine Variable für die Symbolleiste in Menu.prototype._init hinzugefügt und .inner.is-active{ padding-left:300px; } verwendet, um den Inhalt innerhalb des festen Nav aufzufüllen. Sie können dem fixierten Element keinen Rand oder Abstand hinzufügen, ohne dass es sich über die Seite hinaus erstreckt.

https://jsfiddle.net/Lz9fqvy8/

Original-Antwort

================================= ====

Wenn Sie den Inhalt unterhalb Ihres Slide-Out-Menüs ausblenden lassen, bleibt die Symbolleiste an ihrem Platz. Um dies zu erreichen, entfernte ich die translateX aus der .site-wrap.has-push-left.

https://jsfiddle.net/hg9038vd/

können Sie auch die translateX mit einem margin-left:300px und die Symbolleiste wird nicht nach unten drücken, ersetzen.

https://jsfiddle.net/m5xcq3zf/

Quelle

2016-08-05 13:35:02

Danke für die Hilfe! Ich weiß, dass das Überschieben des Inhalts eine Option ist, aber ich möchte den Inhalt wirklich weitergeben. Obwohl die zweite Lösung die Statusleiste an ihrem Platz hält, scheint sie sie nicht wirklich zu verschieben oder zumindest über die Schaltflächen zu bewegen. Siehe dieses Update: https://jsfiddle.net/m5xcq3zf/1/ Ich möchte, dass die MENU-Taste rutscht und immer noch sichtbar ist, wenn das Menü ausgeblendet wird (und der App-Text von der Seite gleitet, als ob er es wäre) bewegten sich über die gesamte Statusleiste hinaus). Gibt es eine Möglichkeit, das zu erreichen? Ein – gkrizek

Figured den letzten Teil heraus. Ich musste nur 'left: 0;' zu 'margin: 0;' ändern und jetzt ist alles flüssig und sieht gut aus! Ich markiere immer noch deine Antwort als richtig, ich musste nur eine kleine Änderung vornehmen, um das genaue Ergebnis zu erhalten, das ich wollte. Final Fiddle: https://jsfiddle.net/m5xcq3zf/2/ – gkrizek

Eine letzte Anmerkung. Wenn Sie möchten, dass alle Ihre Inhalte genau gleich bleiben und nicht durch die Änderung "margin-left: 300;" umformatiert werden, müssen Sie '# site-wrap {width: 100%; } 'früher in der CSS, so wird es nicht in der Größe geändert. – gkrizek

Korrigierte Statusleiste führt zu einem Konflikt mit dem Menü "Ausblenden"

Antwort

Verwandte Themen