zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Off Canvas-Navigation soll pushen, nicht schrumpfen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2019, 16:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 5
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard CSS Off Canvas-Navigation soll pushen, nicht schrumpfen

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2019, 16:59
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 93
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2019, 17:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 5
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard

Danke, genau das war es!
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2019, 17:41
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 93
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Bitte... immer wieder gerne
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2019, 22:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 5
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #6 (permalink)  
Alt 10.06.2019, 06:45
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 93
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
css, off canvas, sidenav

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:59 Uhr.