javascript - 双引导简单侧边栏

标签 javascript jquery html css twitter-bootstrap-3

我使用的来源是:http://startbootstrap.com/template-overviews/simple-sidebar/

我在制作它时遇到了麻烦,因此我无法拥有两个这样简单的侧边栏。我试图做到这一点,所以页面的每一侧都有一个(一个在左边,一个在右边)。现在,侧边栏默认位于左侧。每个侧边栏将由 2 个单独的按钮激活。

**备注在

< div id="wrapper" > 
-- 改为
< div id="wrapper" class="toggled">

最佳答案

在html页面中添加菜单,在CSS中添加相应的样式,就可以在右边再添加一个侧边栏。

HTML:

<!-- Right - Sidebar -->
    <div id="sidebar-wrapper-right">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Right toggle
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

CSS:

#sidebar-wrapper-right {
 z-index: 1000;
 position: fixed;
 right: 250px;
 width: 0;
 height: 100%;
 margin-right: -250px;
 overflow-y: auto;
 background: #000;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

在这里查看工作中的 JS fiddle :DEMO

关于javascript - 双引导简单侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35857122/

相关文章:

javascript - 在 div 上悬停时添加透明度但有时间延迟

javascript - 在地址栏中显示 iFrame url

javascript - 方法调用对象内部的方法

JavaScript typeof 运算符-数字与字符串

jquery - 捕获 $.ajax 响应中的错误,并显示异常

html - 看起来很奇怪的菜单(bootstrap nav-pills)

javascript - Angular 网络应用程序 : Splash screen is not rendered and browser is busy fetching the js files

javascript - 页脚仅在调整大小后可见

javascript - 媒体查询断点上的 CSS 重置值(调整窗口大小或方向更改)

javascript - DIV 在 html5 视频之上