0

我正在尝试为我的 Twitter Bootstrap 3 应用程序实现一个侧边栏。nav nav-pills nav-stacked当我单击一个按钮时，我的页面左侧会出现一个固定位置。我给了z-index:1000，所以它出现在我的内容之上。

小提琴：http: //jsfiddle.net/mavent/8YtDS/14/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
        MyBrand
    </a>

    </div>
</nav>
<div class="col-md-3" id="mysidebar" style="  top: 0;bottom:0; left: 10px;
    position: fixed;     height: 100%;    background-color: #faff18;
    opacity: 0.9;    overflow: hidden;    z-index:1000;      margin: 0;  padding: 0; display:none;">
    <div style="position: relative;  top: 60px;  background-color: #7d1c80; opacity: 0.9;">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
        </ul>
    </div>
</div>
<div class="row" style="background-color: #aaa;">
    <div class="col-md-offset-3">
        <button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
        <button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
    </div>
</div>

但是我需要不同的行为，当侧边栏出现时，我的页面将被推到右侧。检查此页面并单击左上角的按钮。如何使用 css/js 获得这种行为？ http://jpanelmenu.com/

4

4 回答 4

2

一般的做法是将一个类添加到<body>标签或主包装器中，例如navopened单击按钮。

添加类后，您可以使用该类定位任何元素，并使用任一定位移动“整个”页面：position:relative; right: -[nav width]px

或变换：transform: translate([nav width]px)

转换具有更好的性能，但浏览器支持较少。

CSS 示例：

/* before, without body class added */

body #outsidewrapper{
  position:relative;
  right:0px;
}

/* after, when the click event adds the class to the body */

body.navopened #outsidewrapper{
  position:right:-300px;
}

现在，重要的是要注意您不应该移动 body 标签本身，因为它有可能隐藏您的导航。我会移动一个外包装。

于 2013-09-23T22:20:30.890 回答
1

好的，所以我做了一些游戏，一个是我的代码，一个是你的代码。

编辑你的... http://jsfiddle.net/8YtDS/15/

我的一个（按钮位置是毛孔，但你明白了） http://jsfiddle.net/e6JnT/1/

我的可以切换进出...

主要部分是在您想要移动的部分周围有一个包装器......这将是您的代码，然后您只需移动它或相应地调整它的大小。

我确实将它向左滑动，但你可以用大小来做，这样你就不会错过任何东西。

于是进入代码。

$("#mybutton").click(function () {
    $("#wrapper").animate({
        left: '200px' 
    });

    $("#mysidebar").animate({
        left: '0px' 
    });          
});

所以我在 jQuery 中使用 animate 函数，因为它是最通用的函数，可以移动元素并使其看起来不错。

我所做的就是将元素向左滑动到 200px 为菜单腾出空间，并将 id 为“myslidebar”的元素滑动到“0px”以使其能够被看到。

编辑：http: //jsfiddle.net/8YtDS/18/

于 2013-09-23T22:38:06.257 回答
1

我可以看到两种方法来实现这一点。

  1. 替换position: fixed为float: left。
    一个。见http://jsfiddle.net/kdcTc/

    湾。没有引导http://jsfiddle.net/5kPNd/

    将侧边栏移到顶部，使顶部导航栏也向右移动。这不适用于引导程序。看来，引导导航栏类中有一些条件可以防止这种转变。

    该课程navbar-fixed-top似乎固定在顶部导航栏。删除它可以让品牌导航栏发生变化，但也有其他副作用。

  2. margin-left
    使用See http://jsfiddle.net/7eEaB/2/将主面板和导航栏向右移动

于 2013-09-23T22:45:17.840 回答
0

尝试这个...

http://jsfiddle.net/8YtDS/17/

HTML

<div id="wrapper">
    <div id="menu-panel">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="">Do something</a></li>
            <li><a href="">Do something</a></li>
            <li><a href="">Do something</a></li>
            <li><a href="">Do something</a></li>
        </ul>
    </div>
    <div id="content">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header"> 
                <a class="navbar-brand navbar-left" href="/" title="">
                   MyBrand
                </a>
            </div>
            </nav>
        <button id="mybutton" class="btn btn-primary">Click me</button>
    </div>
</div>

CSS

#wrapper{
position: relative;
height: 100%;
background: #F90;
}

#menu-panel{
width: 100px;
position: absolute;
left: -100px;
top: 0;
height: 100%;
}

#wrapper.open{
margin-left: 100px;
}

Javascript

$("#mybutton").click(function () {
    $("#wrapper").toggleClass("open");
});

只是经验中的一个说明：避免使用 jQuery animate 来“平滑”幻灯片。在某些浏览器上，这对我来说非常紧张。如果可能，应该使用 CSS 转换，因为我相信它们是由 GPU 处理的，jQuery 是一种故障安全（参见 Modernizr）。

希望对您有所帮助！

谢谢

菲尔

于 2013-09-24T14:50:27.017 回答