Need Submenu in SideNav


Topic: Need Submenu in SideNav

anandbohra pro asked 2 years ago

Expected behavior Submenu inside Sidenav

Actual behavior Not found any example in MDB Site

Resources (screenshots, code snippets etc.) Searched whole site but in none of the example you have Sub Menu inside Side Nav


anandbohra pro answered 2 years ago

I am able to achieve this through little bit of Jquery knowledge. first I copied the Collapsible accordion inside collapsible body then give submenu a dummy class then written small jquery function to change the icon.

sidenav

<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>
                    <ul class="collapsible collapsible-accordion MySubMenu">
                        <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">Sub Introduction</a>
                                    </li>
                                    <li>
                                        <a href="#" class="waves-effect">SUb Monthly meetings</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

then a jquery function

$('.collapsible-body .collapsible ').on('click', function (event) {
            if ($(this).children('li.active').length > 0) {

                $('ul.MySubMenu li.active a.collapsible-header i.rotate-icon').removeClass('fa-angle-down').addClass('fa-angle-up');
            }
            else
            {
                $('ul.MySubMenu li a.collapsible-header i.rotate-icon').addClass('fa-angle-down').removeClass('fa-angle-up');
            }
        });

then some CSS

.side-nav .fa-angle-up.rotate-icon {
        position: absolute;
        top: .8rem;
        right: 0;
        margin-right: 1.25rem;
    }

Finally I am able to create the desired submenu I was looking for


Grzegorz Bujański staff commented 2 years ago

Hi. Unfortunately this is not supported by default. I'm glad that you managed to solve this problem yourself.


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: 4.19.1
  • Device: All Device
  • Browser: All Browser
  • OS: Al OS
  • Provided sample code: No
  • Provided link: No