Css 按侧边栏导航菜单

我试图得到一个侧边栏推导航，看起来像。我的中间元素div之间确实有内容。我的html看起来像：

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Hire Me</a>
</div>

<div id = "main">

<span style="font-size:50px;cursor:pointer" onclick="openNav()" id="btnMenu">&#9776;</span>

<div class = "centerElement">

</div>
</div>

javascript是

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

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

---

我也试过我的第一把小提琴，但由于某种原因，我的导航栏甚至没有打开。我真的不想努力找出原因，但是如果这有帮助的话

我让你的小提琴在密码笔中工作，如果我理解你的问题，你想在打开侧导航时将内容推到一侧。为了实现这一点，我更改了一些css属性

您有您的

centerElement

，它有

位置：绝对这不允许它在打开时调整到侧导航

与您的
btnMenu
图标相同

我在您的
btnMenu
周围创建了一个div，并添加了

.menuIcon {
  text-align: right;
}

把它放在右边，就像你看到的一样。
我还删除了您的
btnMenu
样式

我还将您的
.centerElement
类更改为

.centerElement {
  width: 45%;
  margin: auto;
}

这将使内容居中，并在导航打开时进行调整

你可能需要使用一些其他的边距和填充来让事情排成一行，但我认为这就是你的目标

谢谢，我现在可以处理了
.centerElement {
  width: 45%;
  margin: auto;
}