Verwendung von Skew auf Eltern verursacht Sidesnav Position zu verlieren

Sorry für den Wortlaut, ich bin mir nicht sicher, wie genau es zu formulieren.Verwendung von Skew auf Eltern verursacht Sidesnav Position zu verlieren

Ich habe eine Kopfzeile und einen Container, der ein Sideav und eine Schaltfläche enthält, um es umzuschalten. Ich versuche, den Header zu neigen, während ich den Container normal halte, indem ich in die entgegengesetzte Richtung schiebe. Dies führt jedoch dazu, dass das Sitenav seine Höhe verliert: 100% und es bleibt nicht links hängen.

Wie kann ich den Hintergrund verzerren, ohne die SideNave zu beeinflussen? Hier

ist die Geige und Code https://jsfiddle.net/q0ddzw4v/

HTML

<body id="body"> 
    <header class="header"> 
     <div class="header__container"> 
      <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.</p> 
       <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
      </div> 
     </div> 
    </header> 

    <script> 
     function openNav() { 
      document.getElementById("mySidenav").style.width = "250px"; 
     } 

     function closeNav() { 
      document.getElementById("mySidenav").style.width = "0"; 
     } 
    </script> 
</body>

CSS

body { 
    font-family: sans-serif; 
} 

.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; 
} 

.sidenav a:hover, 
.offcanvas a:focus { 
    color: #f1f1f1; 
} 

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

#main { 
    padding: 16px; 
} 

.header { 
    width: 100%; 
    height: 100vh; 
    background-color: #C18D8D; 
    transform: skewY(-10deg); 
} 

.header__container { 
    width: 80%; 
    max-width: 71.25rem; 
    margin: auto; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    transform: skewY(10deg); 
}

Quelle

2017-06-08 Sai

Statt den .header Behälter Verkanten, fügen Sie ein pseduo-Element und Skew es:

body { 
 
    font-family: "Lato", sans-serif; 
 
    transition: margin-left 0.5s; 
 
} 
 

 
.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; 
 
} 
 

 
.sidenav a:hover, 
 
.offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

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

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

 
.header { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
.header::before { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #C18D8D; 
 
    transform: skewY(-10deg); 
 
    content: ''; 
 
} 
 

 
.header__container { 
 
    position: relative; 
 
    z-index: 0; 
 
    width: 80%; 
 
    max-width: 71.25rem; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
}

<header class="header"> 
 
    <div class="header__container"> 
 
    <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.</p> 
 
     <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
    </div> 
 
    </div> 
 
</header> 
 

 
<script> 
 
    function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    // document.getElementById("body").style.marginLeft = "250px"; 
 
    } 
 

 
    function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    // document.getElementById("body").style.marginLeft = "0"; 
 
    } 
 
</script>

Quelle

2017-06-08 10:24:31

Ja, das ist, wie sollte es – Sai

Willkommen danke sein :) Ich mag den Hintergrund Idee. –

Verwendung von Skew auf Eltern verursacht Sidesnav Position zu verlieren

Antwort

Verwandte Themen