How to make a Multi-level sidebar nav?

Topic: How to make a Multi-level sidebar nav?

szq pro asked 8 years ago

I'd like to add at least 1 more sub-level to a fixed sidebar nav that would also open as a concertina/dropdown format (ie like it already does currently). eg: Top Menu (level 1) >> submenu1 (level 2) >> submenu2 (level 3) Is this possible? If so, what would I need to do? I tried to create this by nesting the current html/css - but this menu item won't open (to show level 3) when clicked. Thanks, Suze

Add comment

bartek free answered 7 years ago

0 1 Best answer

Hello, Have you checked it maybe? I've got the same problem with arrows. Is there any way to fix it? Regards

raunakbaid free commented 7 years ago

hello i want to create side bar menu with multilevel & collapsible menu when goes to mobile any one please help me to create

Add comment

Bartłomiej Malanowski staff answered 8 years ago

0 0 Best answer

@david1, thank you for the information. We'll check it

Frank Kreutzer free commented 5 years ago

Has a fix been found for this issue?

Add comment

david1 pro answered 8 years ago

0 0 Best answer

There is some odd behavior when using the arrow-r and rotate-icons on the submenu. When you click to expand level 1 of the menu, the arrow icon rotates down, correctly. Then when you click to expand level 2 of the menu, both the level 2 AND the level 1 menu arrows rotate.

Frank Kreutzer free commented 5 years ago

Has a fix been found for this issue?

Add comment

Michal Szymanski staff answered 8 years ago

1 0 Best answer

Try this code:

<pre><code>
            <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-light">Click me</a>
                    <div class="collapsible-body">
                         <ul class="collapsible collapsible-accordion">
                            <li><a class="collapsible-header waves-light">Click me</a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li><a href="#" class="waves-light">Link</a>
                                        </li>
                                        <li><a href="#" class="waves-light">Link</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            </code></pre>

Please insert min. 20 characters.

Try this code:

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

szq

Pro User 10Support score
4Questions 1Answers 0Snippets