Author: Michal Szymanski
MDB Pro required
This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.
Get MDB PRO
Step 1 - the basic structure
Similarly to the previous tutorial, in the beginning, we'll create a basic structure for our project.
Open the index.html file in your project folder (the folder where you have unzipped the MDB package) and
paste the following code below the
body tag:
<!--Main Navigation-->
<header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
</main>
<!--Main layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
Step 2 - side navigation
Go to the
SideNav Docs, then copy the code for the
Basic Example and paste it between the
header tags:
<!--Main Navigation-->
<header>
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed">
<ul class="custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 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="fas fa-chevron-right"></i>
Submit blog<i class="fas 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="far fa-hand-pointer"></i>
Instruction<i class="fas 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="far fa-eye"></i> About<i class="fas 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="fas fa-envelope-o"></i> Contact
me<i class="fas 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>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<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 -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->
</header>
<!--Main Navigation-->
After saving the file and refreshing the browser you will notice an impressive blue navigation element on the left side.
Resize the browser window to mobile size and the SideNav disappears. The problem is that the hamburger button, which should trigger SideNav and makes it visible, doesn't work.
That's because we have to initialize it first.
Initialization involves calling the proper javascript function.
Step 3 - SideNav initialization
In the scripts section (at the bottom of the document), below the MDB files, place the following code:
<script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>
Save the file and refresh the browser. Now the hamburger button should work as expected.
To learn more about available options of the SideNav read our SideNav Docs.
Step 4 - Navbar
Admin dashboards are complicated constructions because they have to manage multiple functionalities and data.
That's why they require advanced navigation.
We usually use so-called "double navigation" - the connection of SideNav and Navbar.
In our current project, we already have the SideNav. Now we'll take care of Navbar.
But first, let's remove the code for the Slide-out button. We don't need it, because we'll manage the SideNav another way.
Remove it:
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>
Now go to the Navbar documentation and copy the code for the Basic Example.
Then place it above the SideNav:
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" 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>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
Save the file and refresh the browser. You will notice that the SideNav covers the left part of the Navbar.
SideNav has
fixed position. That means it will be always visible in the same place over any other content.
In order to resolve these problems, we have to set a right padding to
main,
header and
footer. Thanks to that any content inside these elements will be pushed out of the scope of the
SideNav.
The SideNav is 240 px wide, so we have to add
padding-right: 240 px to
main,
header and
footer.
We could do it via CSS but thanks to MDB it's much easier.
Add the
.fixed-sn class to the
body element and
.double-nav class to the
.navbar.
<body class="fixed-sn">
<nav class="navbar navbar-expand-lg navbar-dark indigo double-nav">
Save the file and refresh the browser. There are still a few things to improve, but our double navigation now works as expected.
Step 5 - Footer
The last thing we'll create in this lesson is a
footer.
Go to
Footer Docs and copy
the code for the Copyright element. Then paste it below the main section.
Then remove the entire code between
<!--Footer Links--> comments and leave only the
.footer-copyright element. Finally the
footer should look like that:
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Previous lesson Live preview Next lesson
Spread the word:
