Bootstrap3左侧边栏右侧切换

问题描述 投票:0回答:4

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

1

1

2

我的例子是: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;
        }
    }
javascript html css twitter-bootstrap
4个回答
1
投票

我已经使用jQuery切换和CSS来实现这一点您可以在pastebin上查看完整代码


1
投票

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

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


0
投票

使用jQuery切换功能

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

0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.