Pタグを親部門を無視する

Question

オフキャンバスメニューに問題があります。メニューが開くと、その中のpタグは、左マージンが拡大するにつれて変化するように見えます。私は、pタグがメニューの開閉を完全に無視して、テキストの配置を維持したい。ここで私はそれが何をしたいのでしょう。基本的に

function openNav() { 
 
    document.getElementById("nav").style.width = "250px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.width = "0"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: width 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px auto; 
 
    white-space: nowrap; 
 
} 
 

 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>

、私は彼らが配置されているかのように、pタグが行動したい：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

は私の現在のコードにすることを比較絶対に、しかし、navが拡大するとき、中心に置かれてください。

Answer 1

は別の<div>であなたの<p>タグを囲み試し幅を一定に保ち、nav

のleft配置を変更されます<nav>が動くかどうかにかかわらず、静的に配置されます。そして、そこにあなたのセンター整列を適用します。

function openNav() { 
 
    document.getElementById("nav").style.width = "250px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.width = "0"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: width 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px 0; 
 
    white-space: nowrap; 
 
} 
 

 
#pHolder{ 
 
    margin-left: 75px; 
 
    width: 80px; 
 
    text-align: center; 
 
} 
 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <div id="pHolder"> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
    </div> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>

Answer 2

代わりwidthを変更するので、この

function openNav() { 
 
    document.getElementById("nav").style.left = "0px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.left = "-250px"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -250px; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
    width: 250px; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: left 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px auto; 
 
    white-space: nowrap; 
 
} 
 

 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>