Question

我很擅长这个。我想知道如何创建一个带引导程序的垂直导航栏，但我希望它固定在左侧100％高度。并对移动设备做出响应。这是我想要的一个例子。

http://www.drawingart.org/

我尝试过类似的东西，但这并不是我想要的东西

http://www.bootply.com/88026

Answer 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来打开/关闭菜单（实际上是一个简单的左边：0 /左：在这个例子中是-243px），如果你想要的话可能还有动画。

我为Bootstrap创建了这样的东西你可以找到here并且它非常容易使用。

如何创建垂直引导响应式导航？

1 个答案: