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>