StartBootstrap / startbootstrap-simple-sidebar

An off canvas sidebar navigation Bootstrap HTML template created by Start Bootstrap

Home Page:https://startbootstrap.com/template/simple-sidebar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there a way to create submenu?

dnwk opened this issue · comments

Is there a way to create submenu?

It would be awesome to be able to create a sub-menu... it seems that you would have to create your own css through...

commented

Did anyone do anything with this. Looks like I might need it should be able to build it.

I'll look into building this with either the next build of this template or with another one. You can play around with the Bootstrap accordion and see if you can use that to create a submenu, that is a good way to go about it.

I'll keep this open as a potentially upcoming feature, with Bootstrap 4 on the horizon there are going to be lots of changes to all of the templates on Start Bootstrap to make them all better plus compatible with the newest version of Bootstrap.

This is how I did it if anyone needs it in the interim. Not perfect but proved the concept.
Makes use of the Collapse.js plugin in Bootstrap.

Depending on use, you might need to use the .panel-group and .panel-heading classes.

<li >
                        <a class="h4" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="side-nav-headers">
                                Header <span class="caret"></span>
                        </a>
                        <div class="collapse" id="collapseExample">
                            <div class="well" id="nav-well">
                                <ul style="list-style: none">
                                    <li>
                                        <a href="#">List Item 1</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 2</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 3</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 4</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 5</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 6</a>
                                    </li>
                                    <li>
                                        <a href="#">List Item 7</a>
                                    </li>
                                </ul>
                            </div>    
                        </div>
                    </li>