附加侧面菜单旁边的按钮

Question

我正在使用Simple Side Nav：http://startbootstrap.com/template-overviews/simple-sidebar/

我想在右侧附近放置一个按钮，在右侧，我将用它来隐藏并显示导航栏。

我创建了一个JSFiddle：https://jsfiddle.net/4q08khy1/

此按钮是我想要的位置，如图所示：

但它隐藏在页面的内容部分后面，有没有办法解决这个问题？

我的左导航：

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Start Bootstrap
            </a>
        </li>
        <li>
            <a href="#">Dashboard</a>
        </li>
        <li>
            <a href="#">Shortcuts</a>
        </li>
        <li>
            <a href="#">Overview</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
    <a href="#" class="toggle"><span> << </span></a>
</div>

和toggle上的样式

<style>
    .toggle {
        background: #1ABC9C;
        color: #eee;
        position: absolute;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        right: -50px;
        top: 18px;
        box-shadow: 5px 0 0 rgba(0,0,0,0.1);
        z-index: 5000;
    }
</style>

Answer 1

尝试将以下CSS添加到您的代码中：

a#menu-toggle {
   margin: -25px 0 0 -36px;
}