Topic: Advanced Double Navigation with hidden SideNav & fixed Navbar – JQuery – MDB 4.4.1
Hello having issue getting this example working in VS 2017 the dropdown does not dropdown and the hamburger does not slide the side panel out?
Bootstrap v4.0.0-beta
jquery-3.2.1
MDB PRO 4.4.1
https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-hidden-navbar-fixed.html#
Could someone show a working example on codepen or Jfiddle
Many Thanks Oliver
Here is my code
-----------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap Template</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<script src="SCRIPT/jquery-3.2.1.js"></script>
<script src="SCRIPT/mdb.min.js"></script>
<script src="SCRIPT/bootstrap.min.js"></script>
<script type="text/javascript" >
// SideNav init
var container = document.getElementById('slide-out');
Ps.initialize(container, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
</script>
<style>
.bg-skin-lp {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body class="hidden-sn mdb-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">Submit listing</a>
</li>
<li>
<a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">For bloggers</a>
</li>
<li>
<a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">Introduction</a>
</li>
<li>
<a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">FAQ</a>
</li>
<li>
<a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar navbar-toggleable-md navbar-expand-lg double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Material Design for Bootstrap</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main Layout-->
<main>
<div class="container-fluid">
<h2>Advanced Double Navigation with hidden SideNav & non-fixed Navbar:</h2>
<br>
<h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
<h5>2. Non-fixed navbar. When you scroll down it will disappear.</h5>
<div style="height: 2000px"></div>
</div>
</main>
<!--Main Layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" ></script>
<script>
// SideNav Initialization
$(".button-collapse").sideNav();
</script>
</body>
</html>
Hi Oliver,
I can not attach MDB pro source files on codepen or Jfiddle
This is a working solution.
https://jsfiddle.net/syqd6v8d/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No