固定侧栏

Question

谁能告诉我与本网站完全相同的侧栏导航最简单，最干净的方法是什么：http://www.makerstudios.com/（但在左侧）

使用bootstrap 3

感谢。

Answer 1

这是一个非常有用的Bootstrap 3插件/插件。它被称为 Jasny Bootstrap ，在许多功能中，一个是关闭的画布导航。它的外观和感觉非常像Bootstrap，所以如果这是你选择的框架（比如我），我强烈推荐这个。

我遇到一些问题，每次点击后侧边栏会自动关闭在菜单中，所以修复（如果需要）是将data-autohide="false"添加到打开面板的按钮。这样它就会保持打开状态，直到用户点击“关闭”链接。

<a data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-autohide="false">CLICK</a>

Answer 2

我发现这个小提琴可能对你有所帮助 Demo

HTML

<body>
    <nav class='sidebar sidebar-menu-collapsed'> <a href='#' id='justify-icon'>
        <span class='glyphicon glyphicon-align-justify'></span>
      </a>

        <ul class='level1'>
            <li class='active'> <a class='expandable' href='#' title='Dashboard'>
            <span class='glyphicon glyphicon-home collapsed-element'></span>
            <span class='expanded-element'>Dashboard</span>
          </a>

                <ul class='level2'>
                    <li> <a href='#' title='Traffic'>Traffic</a>

                    </li>
                    <li> <a href='#' title='Conversion rate'>Conversion rate</a>

                    </li>
                    <li> <a href='#' title='Purchases'>Purchases</a>

                    </li>
                </ul>
            </li>
            <li> <a class='expandable' href='#' title='APIs'>
            <span class='glyphicon glyphicon-wrench collapsed-element'></span>
            <span class='expanded-element'>APIs</span>
          </a>

            </li>
            <li> <a class='expandable' href='#' title='Settings'>
            <span class='glyphicon glyphicon-cog collapsed-element'></span>
            <span class='expanded-element'>Settings</span>
          </a>

            </li>
            <li> <a class='expandable' href='#' title='Account'>
            <span class='glyphicon glyphicon-user collapsed-element'></span>
            <span class='expanded-element'>Account</span>
          </a>

            </li>
        </ul> <a href='#' id='logout-icon' title='Logout'>
        <span class='glyphicon glyphicon-off'></span>
      </a>

    </nav>
</body>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
 body {
    background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
    width: 44px;
}
nav.sidebar-menu-expanded {
    width: auto;
}
nav.sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background: none repeat scroll 0 0 #0099ff;
    color: white;
    padding: 20px 10px;
}
nav.sidebar a#justify-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
}
nav.sidebar a#logout-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
nav.sidebar ul.level1 {
    margin: 0;
    padding: 0;
    margin-top: 60px;
}
nav.sidebar ul.level1 li {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
    outline: 0;
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    color: white;
    text-decoration: none;
    text-align: left;
    padding: 4px 4px 4px 0px;
    font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
    color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
    display: none;
    font-size: 11px;
    position: relative;
    bottom: 5px;
}
nav.sidebar ul.level1 li.active {
    margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
    background: none repeat scroll 0 0 black;
    border-radius: 4px;
    color: white !important;
    width: 30px;
    padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
    color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
    margin: 20px 6px 20px 30px;
    padding: 0;
    display: none;
}
nav.sidebar ul.level1 ul.level2 li {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
    border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
    text-decoration: none;
    outline: 0;
    color: white;
    text-decoration: none;
    font-size: 11px;
}

的jQuery

(function () {
    $(function () {
        var SideBAR;
        SideBAR = (function () {
            function SideBAR() {}

            SideBAR.prototype.expandMyMenu = function () {
                return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
            };

            SideBAR.prototype.collapseMyMenu = function () {
                return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
            };

            SideBAR.prototype.showMenuTexts = function () {
                return $("nav.sidebar ul a span.expanded-element").show();
            };

            SideBAR.prototype.hideMenuTexts = function () {
                return $("nav.sidebar ul a span.expanded-element").hide();
            };

            SideBAR.prototype.showActiveSubMenu = function () {
                $("li.active ul.level2").show();
                return $("li.active a.expandable").css({
                    width: "100%"
                });
            };

            SideBAR.prototype.hideActiveSubMenu = function () {
                return $("li.active ul.level2").hide();
            };

            SideBAR.prototype.adjustPaddingOnExpand = function () {
                $("ul.level1 li a.expandable").css({
                    padding: "1px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "1px 4px 4px 4px"
                });
            };

            SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
                $("ul.nbs-level1 li a.expandable").css({
                    padding: "4px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "4px"
                });
            };

            SideBAR.prototype.ignite = function () {
                return (function (instance) {
                    return $("#justify-icon").click(function (e) {
                        if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
                            instance.adjustPaddingOnExpand();
                            instance.expandMyMenu();
                            instance.showMenuTexts();
                            instance.showActiveSubMenu();
                            $(this).css({
                                color: "#000"
                            });
                        } else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
                            instance.resetOriginalPaddingOnCollapse();
                            instance.collapseMyMenu();
                            instance.hideMenuTexts();
                            instance.hideActiveSubMenu();
                            $(this).css({
                                color: "#FFF"
                            });
                        }
                        return false;
                    });
                })(this);
            };

            return SideBAR;

        })();
        return (new SideBAR).ignite();
    });

}).call(this);

Answer 3

此解决方案仅适用于使用Angular的用户。使用Angular的ng-class，我们可以隐藏并显示侧栏。

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}

Answer 4

编辑：我为引导程序侧边栏添加了另一个选项。

实际上有三种方式可以制作bootstrap 3侧边栏。我试图让代码尽可能简单。

固定侧栏

在这里，您可以看到demo我开发的一个简单的固定侧边栏，其高度与页面相同

列中的侧栏

我还开发了一个相当简单的列边栏，可以在容器内的两个或三个列页面中工作。它需要最长列的长度。在这里，您可以看到demo

控制台

如果您使用google bootstrap信息中心，则可以找到多个合适的信息中心，例如this one。但是，大多数都需要大量编码。我开发了一个仪表板，无需额外的javascript（在bootstrap javascript旁边）。这是demo

对于所有三个示例，您当然必须包括jquery，bootstrap css，js和theme.css文件。

要使侧边栏转置，您需要一个简单的javascript文件来转置所需的侧边栏，例如本页的其他答案或here

滑杆

如果您希望侧边栏在按下按钮时隐藏，这也可以只使用一点点javascript.Here是demo

Bootstrap 3可折叠侧边栏

4 个答案:

固定侧栏

列中的侧栏

控制台

滑杆