CSS Off Canvas-Navigation soll pushen, nicht schrumpfen

Frau_Braun · #1 (**permalink**) 09.06.2019, 16:00

Hallo zusammen:

Ich kann Hilfe bei diesem Off-Canvas-Menü (Sidenav) gebrauchen:

How to Create an Animated Side Navigation Push

Es enthält CSS- und sehr sparsame JS-Elemente (ohne JQuery).
Das Menü ist deshalb perfekt, weil Navi und Inhalt in getrennten Containern liegen und nicht noch einen gemeinsamen Wrapper brauchen, wie das in vielen anderen Navis dieser Art der Fall ist. Leider ist es nicht so, dass der Inhalt "gepusht" wird, sondern er wird geschrumpft.

Ich möchte: dass der Inhalt richtig nach rechts verschoben wird, ohne den Zeilenumbruch zu verändern, so dass der rechte Rand aus dem Viewport "herausgeschoben" wird.

Wenn ich den Inhalt (#main) auf width: 100% stelle, wird zwar gepusht, aber der Inhalt lässt sich horizontal scrollen und mit der Maus hin und her bewegen.

Was kann ich tun? Ich freue mich über jeden Tip!

Sailor56 · #2 (**permalink**) 09.06.2019, 16:59

Teste doch bitte mal, ob folgende Änderungen am Code dich deinem Ziel näher bringen.

CSS für 'body' und '#main':

HTML-Code:

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  overflow-x: hidden;
}

#main {
  transition: margin-left .5s, margin-right .5s;
  padding: 16px;
}

und folgende Änderung am JavaScript Code:

Code:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("main").style.marginRight = "-250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.getElementById("main").style.marginRight = "0px";
  document.body.style.backgroundColor = "white";
}

Die Idee ist, nicht nur das margin-left des #main auf 250px zu setzen, sonder gleichzeitig dem #main nach rechts um diesen Betrag (-250px) mehr Platz zu geben, damit er in Gänze nach rechts wandert.
Dazu muss overflow des body auf hidden gesetzt werden - sonst erscheint ein horizontaler Scrollbar.
Dazu noch die Hinzufügung des transition-Wertes im CSS für die zusätzliche Änderung... bitte mal testen - könnte klappen

!

Den Gesamtcode (aus dem TryIt bei w3school) hier nochmal mit den o.g. Änderungen:

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  overflow-x: hidden;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s, margin-right .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("main").style.marginRight = "-250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.getElementById("main").style.marginRight = "0px";
  document.body.style.backgroundColor = "white";
}
</script>
   
</body>
</html>

Im TryIt klappt's zumindest.

Frau_Braun · #3 (**permalink**) 09.06.2019, 17:36

Danke, genau das war es!

Sailor56 · #4 (**permalink**) 09.06.2019, 17:41

Bitte... immer wieder gerne

Frau_Braun · #5 (**permalink**) 09.06.2019, 22:23

Danke schön! Aber leider bin ich damit noch nicht fertig. Denn die Navi schrumpft ebenfalls, anstatt zu pushen. Das merkt man erst, wenn man Titel mit mehreren Wörtern eingibt, etwa so:

<a href="">Dies ist meine erste Seite</a>

Hm, damit komme ich nicht zurecht...

Sailor56 · #6 (**permalink**) 10.06.2019, 06:45

Ersetze einfach alle Leerzeichen (whitespace) durch ein 'non breaking space:

Code:

&nbsp;

Das sieht dann so aus.

HTML-Code:

<a href="">Dies&nbsp;ist&nbsp;meine&nbsp;erste&nbsp;Seite</a>

Oder besser und einfacher, füge dem CSS für die Links folgendes hinzu.

HTML-Code:

#mySidenav a {
  white-space: nowrap;
}

Wenn du dann allerdings einen Zeilenumbruch brauchst, weil Text zu lang, dann musst du den manuell durch <br> einfügen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Quadratisches Canvas mit CSS	curby23523	CSS	0	03.06.2016 13:15
hover-Untermenüs beim Zeilenumbruch per CSS "mitnehmen"	HappyPOny	CSS	1	18.07.2015 13:52
Sich wiederholende Navigation in derselben .html soll dasselbe css teilen	DeSchroe	CSS	1	18.08.2009 23:42
Problem mit CSS Dropline menü	horst77	CSS	1	12.08.2009 11:49
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29