Multilevel (up to 3 level) Vertical Menu with bootstrap/Jquery

Question

I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appe

Answer 1

This may not be the answer you are looking for but it's what I would do in your case.

I use sometimes bootstrap but, as good as it is, in my humble opinion, people are very often thinking it's a miraculous code that can make you do whatever you want, and lately I am finding people spent more time trying to modified bootstrap css's than making the whole css's from scratch (if you know a bit of basic css), not to say so many webs "looking" so simillar.

For what you want to do I would basically clearing ALL classes in the html and just sniping the elements from the container I could do a menu as you show in the image (well, it needs some extra style like adding the arrow icons, shadows and such, but the point is to show you another way to do it).

html:

        
            


                

                    Client Advice
                    


                        
Pre-advice
                        
Strategy & Technical
                        
Research
                        

                            APL & Products
                            

                                

                                    
                                        Approved Product List                                        
                                    

                                    

                                        
Platforms
                                        
Managed Funds
                                        
Wealth Protection
                                        
Listed Securities
                                        
Wealth Protection
                                        
Listed Securities
                                        
Listed Securities
                                    

                                
                                
Model Portfolios
                                
Non-approved Products
                            
                        
                        
Implementation
                        
Review
                        
Execution Only
                    
                
                
Personal Development
                
Practice
                
News
            

    

And just this css (please notice that when I call directly a tag you may need to call it a different way:

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

And I have just kept the classes that activate the script so keep it untouched.

FIDDLE

I hope this can be usefull for you. Feel free to ask any question or if you want something you want to modified (and you can't after, of course, trying) I will try my best to help you.