如何创建垂直引导响应式导航？ [关闭]答案

【问题标题】：How can I create a vertical bootstrap responsive navigation? [closed]如何创建垂直引导响应式导航？ [关闭]
【发布时间】：2015-05-18 15:14:05
【问题描述】：

我对此很陌生。我想知道如何使用引导程序创建一个垂直导航栏，但我希望它固定在左侧 100% 高度。并响应移动。这是我想要的示例。

http://www.drawingart.org/

我尝试过类似的方法，但这并不是我真正想要的

http://www.bootply.com/88026

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

基本的想法是在你的网格中有一个导航栏，在特定的屏幕尺寸（在本例中为 xs 和 sm 尺寸）下，它固定在屏幕的左上角。主要内容应该占据整个屏幕宽度。

您只需使用 CSS 设置固定导航的样式，使其具有全高、负左定位（默认隐藏）、不同的背景颜色等。

以下是 HTML“骨架”的示例：

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 mobile-menu">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Menu item</a></li>
                <li><a href="#">Menu item</a></li>
                ...
            </ul>
        </div>
        <div class="col-lg-9 col-md-8">
            <div class="row">
                <!-- your content -->
            </div>
        </div>
    </div>
</div>

还有 CSS：

.mobile-menu {
  padding-top: 15px;
  overflow-y: auto;
}
@media (max-width: 991px) {
  .mobile-menu {
    position: fixed;
    top: 0;
    width: 240px;
    left: -243px;
    z-index: 100;
    height: 100%;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.23);
    background-color: #fff;
  }
}

然后你只需要添加一些 Javascript 来打开/关闭菜单（在这个例子中实际上是一个简单的 left:0 / left:-243px），如果你想要的话也可以添加动画。

我为 Bootstrap 创建了类似的东西，你可以在 here 找到它，它真的很容易使用。

【讨论】：