Question

我正在尝试获得看起来像this的侧边栏推送导航。我确实在我的中心元素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>

我相信它可能是因为我的centerElement类不允许推送其内容。如果这是真的，我的btnMenu也必须改变。

css代码：

 .centerElement {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 600px;
 height: 600px;
 margin: -300px 0 0 -300px;
}

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

#btnMenu {
position: absolute;
top: 72px;
right: 128px;
font-size: 18px;
}

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

我也试过了我的第一个小提琴，但由于某种原因我的导航栏甚至没有打开它。没有真正关心努力找出原因，但如果这有助于它is。

Answer 1

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

你的centerElement position: absolute;有btnMenu这不允许它在打开时调整到侧面导航。

与您的btnMenu图标相同

我在.menuIcon { text-align: right; }周围创建了一个div并添加了

btnMenu

将它放在右侧，就像你拥有它一样。我也删除了你的.centerElement样式

我还将您的.centerElement { width: 45%; margin: auto; }课程改为

max-n-of

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

你可能需要使用其他一些边距和填充来排列，但我认为这就是你想要的。

https://codepen.io/anon/pen/qjORpO

按侧栏导航菜单

1 个答案: