/ / Bootstrap linke Navigationsbeispiel benötigt - twitter-bootstrap, twitter-bootstrap-3

Bootstrap linke Navigationsbeispiel benötigt - twitter-bootstrap, twitter-bootstrap-3

Auf der Suche nach einigen sauberen und einfachen Beispielen, um eine reaktionsschnelle Navigation auf der linken Seite einzurichten, wird fast genau so verfahren, wie Foundation sie verwendet. 4 Dokumentseite bei http://foundation.zurb.com/docs/v/4.3.2/index.html Muss in der Lage sein, zu Seiten zu verlinken und zu erweitern, wenn Unterseiten darunter gruppiert sind. Irgendwelche guten Bootstrap-Beispiele, die das tun?

Antworten:

9 für die Antwort № 1

Schauen Sie sich dieses Beispiel an. Es ist eine linke Seite außerhalb des Canvas-Menüs mit reduzierbaren Untermenü ..

http://www.bootply.com/129625

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}

.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
background-color:#3b3b3b;
padding-top:0;
}
#sidebar .nav>li {
color: #ddd;
background: linear-gradient(#3E3E3E, #383838);
border-top: 1px solid #484848;
border-bottom: 1px solid #2E2E2E;
}
#sidebar .nav>li:first-child {
border-top:0;
}
#sidebar .nav>li>a {
color: #ddd;
}
#sidebar .nav>li>a>img {
max-width: 14px;
}
#sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
text-decoration: none;
background: linear-gradient(#373737, #323232);
color: #fff;
}
#sidebar .nav .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
#sidebar .nav a:hover .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
}