1
Arbeiten an vertikalen Navigationsleiste finden Sie hier: CodeplyNavigationsleiste in Bootstrap 4
Mein Code ist folgende:
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<style>
html, body {
height: 100%;
}
.wrapper, .row {
height: 100%;
margin-left: 0;
margin-right: 0;
}
.wrapper:before, .wrapper:after,
.column:before, .column:after {
content: "";
display: table;
}
.wrapper:after,
.column:after {
clear: both;
}
#sidebar {
background-color: #eee;
padding-left: 0;
float: left;
min-height: 100%;
}
#sidebar .collapse.in {
display: inline;
}
#sidebar > .nav > li > a {
white-space: nowrap;
overflow: hidden;
}
#main {
padding: 15px;
left: 0;
}
/*
* off canvas sidebar
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}
#main {
width: 1%;
left: 0;
}
#sidebar .visible-xs {
display: inline !important;
}
.row-offcanvas {
position: relative;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.row-offcanvas-left.active {
left: 45%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}
@media screen and (min-width: 768px) {
.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-left.active {
left: 3%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width: 42px;
}
#main {
left: 0;
}
}
</style>
<script>
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
</script>
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><a href="#"><i class="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
<li><a href="#"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
<li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
<li><a href="#"><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
<li>
<a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
<ul class="nav nav-stacked collapse left-submenu" id="item1">
<li><a href="google.com">View One</a></li>
<li><a href="gmail.com">View Two</a></li>
</ul>
</li>
<li>
<a href="#" data-target="#item2" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
<ul class="nav nav-stacked collapse" id="item2">
<li><a href="#">View One</a></li>
<li><a href="#">View Two</a></li>
<li><a href="#">View Three</a></li>
</ul>
</li>
<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></a></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p><a href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a></p>
<p>
Main content...
</p>
</div>
<!-- /main -->
</div>
</div>
</body>
</html>
Ich bin nicht die gleiche Funktionalität zu bekommen. Mein Code zeigt keine Einträge für Menüauswahlen an. Außerdem haben alle Menüoptionen einen Hyperlink-Mouseover-Effekt, während das ursprüngliche Beispiel nicht über diese verfügt. Kann mir jemand helfen zu verstehen, was ich falsch mache?
Dank
Nur um sicherzugehen I Verstehen Sie, was Sie tun möchten - Möchten Sie die Navigation von Codeply (in Bootstrap 3.3.6) in Bootstrap 4 umschreiben? – thisiskatkat
Ja, genau. Danke – Mark