Question

我想用bootstrap开发一个web应用程序。我有一个左侧边栏菜单。当手机浏览器打开此页面时，我希望该菜单从右侧切换我想像这样创建：https://formstone.it/

我的例子在这里：https://jsfiddle.net/gd39damu/3/

html代码：

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>

      </div>
    </nav>

    <div class="container">
    </div>

<div class="sidebar">
    <div class="navigation">

        <ul>
        <li><a  href="aa">aa</a></li>
        <li><a  href="bb">bb </a></li>
        <li><a  href="cc">cc</a></li>
        <li><a  href="dd">dd</a></li>
        </ul>
        </div>

</div> <!-- // Sidebar -->
</body>

css代码：

 @import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
    .sidebar {
      background-color: #aaaaaa;
    }

    @media (min-width: 800px) {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: block;
      }

    .navigation {
        width: 240px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
    }
    }

    .navigation {
        background: #455a64;
        overflow-y: auto;
        padding: 30px;
    }

    @media (max-width: 800px){
        .sidebar {
            display: none;
        }
    }

Answer 1

我建议使用另一个jQuery插件，以使菜单更顺畅：http://ascott1.github.io/bigSlide.js/

它是一个轻量级的lib，大小约为1kb。

Answer 2

我使用了 jQuery切换和CSS来实现这一点您可以在pastebin

上查看完整代码

Answer 3

使用 jQuery切换功能

if ($(window).width() < 768){});

Answer 4

使用Bootstrap的非画布覆盖菜单。

示例：http://codeply.com/go/zyKyFfeUcH

Bootstrap3左侧边栏右侧切换

4 个答案: