Left and right sidenav

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Left and right sidenav

amelcher pro asked 7 years ago

I currently have the fixed navbar with the hidden sidebar working from the right side of the page.

I'd like to have another sidebar nav menu on the left side.  How would I set that up html / js wise?

 

I'm using the latest 4.4.5 jQuery version.  Thanks in advance for your help.

 

Adam

Marta Szymanska staff pro premium answered 7 years ago

Hi, theoretically, you can have two side-navs on the page but when you minimalize a browser's window and click button-collapsible, you'll activate only one side-nav. Now, we don't have such a settings in our sass and javascript files to allow activate two side-navs on small devices. I can only say that we will think about such a functionality and maybe we'll add one to MDB package. Best, Marta

amelcher pro commented 7 years ago

so forgetting mobile side of things, what would I need to do to enable a left and right sidenav js wise? Thanks for your help on this and your swift reply. Adam

Marta Szymanska staff pro premium answered 7 years ago

Here's the HTML code: <body class="fixed-sn light-blue-skin"> <!--Double navigation--> <header> <!-- Sidebar navigation --> <div id="slide-out1" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar list-unstyled"> <!-- 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 href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a href="#" 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> <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 mask-strong"></div> </div> <!--/. Sidebar navigation --> <!-- Sidebar navigation --> <div id="slide-out" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar list-unstyled"> <!-- 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 href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a href="#" 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> <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 mask-strong"></div> </div> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"> <!-- SideNav slide-out button --> <div class="float-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> </nav> <!-- /.Navbar --> </header> <!--/.Double navigation--> <!--Main Layout--> <main> <div class="container-fluid mt-5"> <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2> <br> <h5>1. Fixed side menu, hidden on small devices.</h5> <h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5> <div style="height: 2000px"></div> </div> </main> <!--Main Layout--> Javascript code inserted into the script: $('.button-collapse').sideNav({ edge: 'right', // Choose the horizontal origin closeOnClick: true // Closes side-nav on clicks, useful for Angular/Meteor }); Best, Marta

amelcher pro commented 7 years ago

Thank you for the help. For those who also want both a left and right sidebar nav I also added this to slide the left sidenav in and out and create a separate button to control the function: 1. Added a new button in horizontal nav bar with the class .button-collapse-left 2. then added some jquery to bottom of page that contains the sidebar html : jQuery('.button-collapse-left').click(function(e){ jQuery('#slide-out1').toggleClass('open'); }); 3. added .left-aligned class to second navbar with id #slide-out1 and removed fixed class from same id. 4. and then finally some css: .side-nav.left-aligned{left: 0;right: auto;transform: translateX(-100%);transition-property: all;transition-property: transform;transition-duration:0.7s;transition-timing-function: ease-in-out;width:250px;} #slide-out1.open {transform: translateX(0px);transition-property: all;transition-property: transform;transition-duration:0.7s;transition-timing-function: ease-in-out;} Hope this helps anybody else!

.jonathan. pro commented 7 years ago

Hi amelcher, do you happen to know how to change the background color of the original code? Like without those trees or leaves in the bottom and different color? thanks

amelcher pro commented 7 years ago

Jonathan, The background styles for the sidenav are controlled from the #slide-out line. The background MDB uses in their sidebar is the .sn-bg-4 if you where change that class to .white for inatance it would change the background of the sidebar to the color white, however you would also need to add the .white class to the ul class (directly underneath the #slide-out id to change the look of the sidebar to white (if you were going to change the MDB sidebar nav they currently use). Hope this helps :) Adam

.jonathan. pro commented 7 years ago

Hi amelcher, than you so much for the help!! So I was able to change the color however it only changes the color up to the last dropdown which in this case is the "contact me" dropdown. Below that, it remains the original color. Any idea what can I do to change the whole side bar background color? I tried applying the new color at the end of the list but there really isn't anything there since that's where the side bar ends and navbar starts; so not sure where to apply the new color/class in order for the whole side bar to take effect. Any ideas would be appreciated, I'm half way there! haha. Thanks again!

Marta Szymanska staff pro premium answered 7 years ago

Hi, I'm glad I've helped and thank you for your help for the other users. Best, Marta

winitserver2018 answered 7 years ago

how to change back ground color of side navbar in Angular component Thank You Raj

Damian Gemza staff commented 7 years ago

Hello winitserver2018, You can change background color of sidenav by adding proper color class to the element . For example, if you want to get sidenav with green color, please modify class of your element like following: If you need more help with Angular, please open a ticket in Angular category, or search already opened tickets for answer or post comment if proper ticket. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
amelcher
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets