Боковая панель Не работает

Question

У меня есть боковая панель ниже, и то, что она должна делать, это то, что когда она будет открыта, она будет толкать элементы в сторону, но она не работает. Вот мой код:

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
} 
 

 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft= "0"; 
 
}

#div1, #div2, #div3, #div4 { 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    margin: 10px; 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    font-family: "Lato", 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; 
 
    transition: 0.3s 
 
} 
 

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

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> 
 

 
</div> 
 

 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <a href="#">Item 1</a> 
 
    <a href="#">Item 2</a> 
 
    <a href="#">Item 3</a> 
 
    <a href="#">Item 4</a> 
 
</div> 
 

 
<div id="main"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
</div>

Хотя, мой код не раздвинуть div с, а image в сторону. Как я могу это сделать?

Answer 1

Изображения и divs не толкаются с боковой панели, потому что вы применяете маржу слева к #main, а изображения/divы существуют за пределами #main. Либо поместите эти элементы внутри #main, либо примените их к body вместо

Answer 2

В настоящее время ваш артефакт вашего изображения внутри элемента #main. Чтобы получить движение, которое вам нужно, его, вероятно, лучше всего перевернуть весь ваш «движущийся» контент в «содержащий» элемент, а затем применить к нему изменения.

Здесь мы используем #wrapper вокруг все, кроме меню, затем установите width:100% и выключить overflow-x на теле, так что при нажатии мы не получают боком появляются полосы прокрутки

HTML

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#">Item 1</a> 
    <a href="#">Item 2</a> 
    <a href="#">Item 3</a> 
    <a href="#">Item 4</a> 
</div> 
<div id="wrapper"> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 

     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> 

    </div> 

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <div id="main"> 
     <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
    </div> 
</div> 

#div1, 
#div2, 
#div3, 
#div4 { 
    float: left; 
    width: 55px; 
    height: 55px; 
    margin: 10px; 
    border: 1px solid black; 
} 

body { 
    font-family: "Lato", sans-serif; 
    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, 
.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; 
} 

#wrapper { 
    width:100%; 
    transition: padding-left .5s; 
} 

@media screen and (max-height: 450px) { 
    .sidenav { 
     padding-top: 15px; 
    } 
    .sidenav a { 
     font-size: 18px; 
    } 
} 

JS

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 

function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
    document.getElementById("wrapper").style.paddingLeft = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("wrapper").style.paddingLeft = "0"; 
} 

JSFIDDLE

---

Как личное предпочтение, хотя (для предотвращения вспышки ваших пунктов меню изменяющегося ширина/упаковку для новых линий), я бы предложил сохранить ширина меню согласована и изменила его свойство стиля left, чтобы переместить его в и из вида тела, как в this fiddle.