mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Merge pull request #592 from Minstel/Bootstrap_4_offcanvas
Migrate offcanvas menu to BS 4
This commit is contained in:
Arnold Daniels
@@ -10,7 +10,7 @@
|
||||
<title>Off Canvas Push Menu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
@@ -29,38 +29,36 @@
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
|
||||
<a class="navmenu-brand" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="../navmenu/">Slide in</a></li>
|
||||
<li class="active"><a href="./">Push</a></li>
|
||||
<li><a href="../navmenu-reveal/">Reveal</a></li>
|
||||
<li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu/">Slide in</a></li>
|
||||
<li class="nav-item active"><a class="nav-link" href="./">Push</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
@@ -74,8 +72,9 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/jasny-bootstrap.min.js"></script>
|
||||
<script src="../../../js/offcanvas.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
padding: 70px 0 0 0;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 0) {
|
||||
.navbar-toggle {
|
||||
display: block; /* force showing the toggle */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
right: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<title>Off Canvas Reveal Menu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
@@ -29,39 +29,37 @@
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left">
|
||||
<a class="navmenu-brand" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="../navmenu/">Slide in</a></li>
|
||||
<li><a href="../navmenu-push/">Push</a></li>
|
||||
<li class="active"><a href="./">Reveal</a></li>
|
||||
<li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu/">Slide in</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
|
||||
<li class="nav-item active"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="canvas">
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu" data-recalc="false" data-canvas=".canvas">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
@@ -79,8 +77,9 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/jasny-bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.navmenu {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: relative;
|
||||
@@ -18,24 +16,18 @@ html, body {
|
||||
min-height: 100%;
|
||||
padding: 50px 0 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 0) {
|
||||
.navbar-toggle {
|
||||
display: block; /* force showing the toggle */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
right: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.canvas {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>Navmenu Template for Bootstrap</title>
|
||||
<title>Off Canvas Slide-in Menu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
@@ -28,44 +28,41 @@
|
||||
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
|
||||
<a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li class="active"><a href="./">Slide in</a></li>
|
||||
<li><a href="../navmenu-push/">Push</a></li>
|
||||
<li><a href="../navmenu-reveal/">Reveal</a></li>
|
||||
<li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="../navmenu/">Slide in</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="nav navmenu-nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<header class="navbar navbar-light bg-light fixed-top hidden-md hidden-lg">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Navmenu Template</h1>
|
||||
<h1>Off Canvas Slide-in Menu Template</h1>
|
||||
</div>
|
||||
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
|
||||
<p>Also take a look at the examples for a navmenu with <a href="../navmenu-push">push effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
|
||||
@@ -75,8 +72,9 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/jasny-bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,46 +1,45 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
body {
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
padding: 70px 0 0 0;
|
||||
}
|
||||
|
||||
.navmenu {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
.navbar-toggle {
|
||||
}
|
||||
.navbar-toggler {
|
||||
position: absolute;
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1px) {
|
||||
.navbar-toggle {
|
||||
.navbar-toggler {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0 0 0 300px;
|
||||
}
|
||||
}
|
||||
.navmenu {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
display: none !important; /* IE8 fix */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,42 +79,46 @@ $('#myMenu').on('show.bs.offcanvas', function (e) {
|
||||
|
||||
<h2 id="offcanvas-examples">Example</h2>
|
||||
<p>The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.</p>
|
||||
|
||||
<div class="bs-example bs-navmenu-offcanvas-example">
|
||||
<div id="myNavmenuCanvas">
|
||||
|
||||
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="myNavmenuCanvas" data-placement="left">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
||||
{% highlight html %}
|
||||
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
|
||||
<a class="navmenu-brand" href="#">Brand</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
|
||||
<header class="navbar navbar-light bg-light fixed-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
* limitations under the License.
|
||||
* ======================================================================== */
|
||||
|
||||
+function ($) { "use strict";
|
||||
+function ($) { "use strict"
|
||||
|
||||
// OFFCANVAS PUBLIC CLASS DEFINITION
|
||||
// =================================
|
||||
@@ -172,7 +172,7 @@
|
||||
$('body').css('overflow', 'hidden')
|
||||
//Fix iPhone scrolling
|
||||
if (isIphone) {
|
||||
$('body').addClass('lockIphone');
|
||||
$('body').addClass('lockIphone')
|
||||
}
|
||||
|
||||
if ($('body').width() > bodyWidth) {
|
||||
@@ -185,13 +185,13 @@
|
||||
//disable scrolling on mobiles (they ignore overflow:hidden)
|
||||
$('body').on('touchmove.bs', function(e) {
|
||||
if (!$(event.target).closest('.offcanvas').length)
|
||||
e.preventDefault();
|
||||
});
|
||||
e.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
OffCanvas.prototype.enableScrolling = function() {
|
||||
$('body').off('touchmove.bs');
|
||||
$('body').removeClass('lockIphone');
|
||||
$('body').off('touchmove.bs')
|
||||
$('body').removeClass('lockIphone')
|
||||
}
|
||||
|
||||
OffCanvas.prototype.show = function () {
|
||||
@@ -215,7 +215,7 @@
|
||||
if (elements.index(this.$element) !== -1) {
|
||||
$(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
|
||||
this.$element.css(placement, -1 * offset)
|
||||
this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
|
||||
this.$element.css(placement) // Workaround: Need to get the CSS property for it to be applied before the next line of code
|
||||
}
|
||||
|
||||
elements.addClass('canvas-sliding').each(function() {
|
||||
@@ -244,7 +244,7 @@
|
||||
this.$element.addClass('in')
|
||||
this.slide(elements, offset, $.proxy(complete, this))
|
||||
}, this), 1)
|
||||
}, this));
|
||||
}, this))
|
||||
}
|
||||
|
||||
//Hide other opened offcanvas menus, and then open this one
|
||||
@@ -319,13 +319,14 @@
|
||||
var time = 150
|
||||
|
||||
if (this.state == 'slide-in') {
|
||||
var $body = $('body')
|
||||
var doAnimate = $.support.transition
|
||||
|
||||
this.$backdrop = $('<div class="modal-backdrop fade" />')
|
||||
if (this.options.backdrop) {
|
||||
this.$backdrop.addClass('allow-navbar')
|
||||
|
||||
if (this.options.canvas && $(this.options.canvas)[0] !== $('body')[0]) {
|
||||
if (this.options.canvas && $(this.options.canvas)[0] !== $body[0]) {
|
||||
$(this.options.canvas).addClass('limit-backdrop')
|
||||
this.$backdrop.appendTo(this.options.canvas)
|
||||
} else {
|
||||
@@ -337,7 +338,8 @@
|
||||
|
||||
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
|
||||
|
||||
this.$backdrop.addClass('in')
|
||||
$body.addClass('modal-open')
|
||||
this.$backdrop.addClass('show').show()
|
||||
this.$backdrop.on('click.bs', $.proxy(this.autohide, this))
|
||||
|
||||
doAnimate ?
|
||||
@@ -346,21 +348,23 @@
|
||||
.emulateTransitionEnd(time) :
|
||||
callback()
|
||||
} else if (this.state == 'slide-out' && this.$backdrop) {
|
||||
this.$backdrop.removeClass('in');
|
||||
$('body').off('touchmove.bs');
|
||||
var self = this;
|
||||
var self = this
|
||||
|
||||
this.$backdrop.hide().removeClass('show')
|
||||
$('body').removeClass('modal-open').off('touchmove.bs')
|
||||
|
||||
if ($.support.transition) {
|
||||
this.$backdrop
|
||||
.one($.support.transition.end, function() {
|
||||
self.$backdrop.remove();
|
||||
self.$backdrop.remove()
|
||||
callback()
|
||||
self.$backdrop = null;
|
||||
self.$backdrop = null
|
||||
})
|
||||
.emulateTransitionEnd(time);
|
||||
.emulateTransitionEnd(time)
|
||||
} else {
|
||||
this.$backdrop.remove();
|
||||
this.$backdrop = null;
|
||||
callback();
|
||||
this.$backdrop.remove()
|
||||
this.$backdrop = null
|
||||
callback()
|
||||
}
|
||||
|
||||
if (this.options.canvas && $(this.options.canvas)[0] !== $('body')[0]) {
|
||||
@@ -409,8 +413,8 @@
|
||||
}
|
||||
|
||||
OffCanvas.prototype.autohide = function (e) {
|
||||
var $target = $(e.target);
|
||||
var doHide = !$target.hasClass('dropdown-backdrop') && $target.closest(this.$element).length === 0;
|
||||
var $target = $(e.target)
|
||||
var doHide = !$target.hasClass('dropdown-backdrop') && $target.closest(this.$element).length === 0
|
||||
|
||||
if (doHide) this.hide()
|
||||
}
|
||||
@@ -458,11 +462,11 @@
|
||||
var data = $canvas.data('bs.offcanvas')
|
||||
var option = data ? 'toggle' : $.extend($this.data(), $canvas.data())
|
||||
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (data) data.toggle()
|
||||
else $canvas.offcanvas(option)
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
}(window.jQuery)
|
||||
|
||||
@@ -40,6 +40,24 @@
|
||||
overflow-y: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navmenu-fixed-left,
|
||||
.navmenu-fixed-right {
|
||||
.dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
transform: none !important;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navmenu-fixed-left,
|
||||
.navbar-offcanvas.navmenu-fixed-left {
|
||||
left: 0;
|
||||
|
||||
@@ -6,6 +6,20 @@
|
||||
&.in {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu {
|
||||
position: static !important;
|
||||
float: none;
|
||||
transform: none !important;
|
||||
background: rgba(0, 0, 0, .02);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: .35rem 1rem .35rem 1.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
// "default-variables.less" should be loaded before this file.
|
||||
// -------------------------------------------------------------
|
||||
|
||||
@zindex-navmenu-fixed: @zindex-modal;
|
||||
@zindex-navmenu-fixed: (@zindex-modal + 1);
|
||||
@zindex-alert-fixed: 1035;
|
||||
|
||||
@container-smooth: @container-lg;
|
||||
|
||||
Reference in New Issue
Block a user