belahd free asked 6 years ago


Source: http://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html How to make the SideNav fixed and collapsible? Thanks.

Michal Szymanski staff answered 6 years ago


Try this code:
    <!-- Sidebar navigation -->
    <ul id="slide-out" class="side-nav fixed default-side-nav light-side-nav">

        <!-- Logo -->
        <div class="logo-wrapper waves-light">
            <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
        </div>
        <!--/. Logo -->

        <!--Search Form-->
        <form class="search-form" role="search">
            <div class="form-group waves-effect">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
        <!--/.Search Form-->

        <!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <!--/. Side navigation links -->
    </ul>
    <!--/. Sidebar navigation -->

    <div class="container">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>
Javascript
// Show sideNav
$(".button-collapse").sideNav();

$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');

belahd free answered 6 years ago


I mean, it is opened by default and when I click the button, it hides.

Michal Szymanski staff answered 6 years ago


What do you mean by collapsible? Do you want to achieve the same result like this example? Or you want, that from default SideNavis fixed, and when you click the button , it hides?

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags