XHTMLforum - CSS Off Canvas-Navigation soll pushen, nicht schrumpfen

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.