Bootstrap 3 faltbare Sidebar

Wer könnte mir bitte sagen, was wäre der einfachste und sauberste Weg, genau dasselbe zu tun sidebar-navigation dieser website : http://www.makerstudios.com/ (aber auf der linken Seite)

Verwendung von bootstrap 3

Dank.

InformationsquelleAutor der Frage Jeremie4zw | 2014-05-04

css twitter-bootstrap-3

27

Hier ist ein super nützliches plugin /add-on für Bootstrap-3. Es heißt Jasny Bootstrap und unter den vielen Funktionen, ist eine off-canvas-navigation. Das sieht und fühlt es ist sehr ähnlich wie Bootstrap, so dass, wenn das ist Ihre-framework der Wahl (wie bei mir), empfehle ich dieses.

Hatte ich einige Problem mit der sidebar schließen automatisch nach jedem Klick im Menü, also das Update für das (wenn Sie es brauchen) Hinzugefügt data-autohide="false" auf die Schaltfläche, öffnet das Fenster. Auf diese Weise bleibt er offen, bis der Benutzer klickt auf ein 'CLOSE' - link.
```
<a data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-autohide="false">CLICK</a> 
```
InformationsquelleAutor der Antwort no0ne

Fand ich diese Geige, kann es helfen, sowohl Sie als auch 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);

InformationsquelleAutor der Antwort 4dgaurav

Diese Lösung ist nur für Leute, Eckig. Mit ng-class Eckige, können wir ein-und ausblenden der Seitenleiste.

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;
    }
}

InformationsquelleAutor der Antwort Razan Paul

5

EDIT: ich habe eine weitere option für die bootstrap-Seitenleisten.

Gibt es eigentlich drei Arten, auf die Sie machen können ein bootstrap-3-sidebar. Ich habe versucht, den code so einfach wie möglich.

Feste Seitenleiste

Hier sehen Sie eine demo einer einfachen fixed sidebar habe ich entwickelt, mit der gleichen Höhe wie die Seite

Sidebar in einer Spalte

Habe ich auch entwickelt eine ziemlich einfache Spalte, der sidebar, der in einem zwei-oder drei-Säulen-Seite in einem container. Es nimmt die Länge der längsten Spalte. Hier sehen Sie eine demo

Dashboard

Wenn Sie google-bootstrap-Armaturenbrett, finden Sie mehrere geeignete dashboard, wie diese eine. Allerdings, die meisten von Ihnen erfordern eine Menge der Kodierung. Ich habe entwickelt ein dashboard, das funktioniert ohne zusätzliche javascript (neben der bootstrap-javascript). Hier ist ein demo

Für alle drei Beispiele, die du natürlich noch die jquery, bootstrap, css, js und Thema.css-Dateien.

Für die Herstellung der sidebar transponierbaren Sie eine einfache javascript-Datei, um die Umsetzung der gewünschten sidebar, wie in anderen Antworten auf dieser Seite oder hier

Schieberegler

Wenn Sie wollen, dass die Seitenleiste zu verstecken, die auf das drücken einer Taste, dies ist auch möglich mit nur ein wenig javascript.Hier ist ein demo

InformationsquelleAutor der Antwort FabianW

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Feste Seitenleiste

Sidebar in einer Spalte

Dashboard

Schieberegler