🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

MultiNestedLists is a jQuery plugin to create an animated & nice looking tree view structure using Bootstrap and nested Html lists.

Bootstrap tree-view

Documentation

MultiNestedLists

A jQuery plugin for multiple nested lists

Looking up the internet, there were no solutions for my need, of having a nice style for multiple nested lists. I needed of a style that could evidence every ul inside of a li. The idea was to use nested lists to aplly in sitemaps, org charts and things like that. I have seen so many interesting solutions on the internet, like ul based in trees, sitemap examples, but not even one of these solutions would serve for my simple need. I just needed something like this:

bootstrap/ ├── css/ │   ├── bootstrap.css │   ├── bootstrap.min.css │   ├── bootstrap-theme.css │   └── bootstrap-theme.min.css ├── js/ │   ├── bootstrap.js │   └── bootstrap.min.js └── fonts/     ├── glyphicons-halflings-regular.eot     ├── glyphicons-halflings-regular.svg     ├── glyphicons-halflings-regular.ttf     └── glyphicons-halflings-regular.woff 

Accordind some requirements I had, this structure should be composed dynamically, because new ul and li can be created any time by the user. Therefore, I couldn't use any class or id in ul or li. The structure needed to be clean.

ul ├── li -> ul │   ├── li                   │   ├── li                    │   ├── li                    │   └── li /ul │   /li                     ├── li -> ul                        │   ├── li                    │   └── li /ul │   /li                 └── li -> ul                      ├── li                      ├── li                      ├── li                             └── li /ul     / li                     /ul 

All this seemed like too simple, and I was decided clearly to make this just with CSS. I decided add border-left in each ul and create pseudo-elements to show the indicating lines to each li. This seemed to be enough, but wasn't! If in any level of the list, the last li had children, the parent ul shows its border in its whole height, showing something meaningless. As if there was one more li that doesn't appears. I tried fix this just with css, but there was no advance. Therefore, I started to think how to make it better with jQuery. Then, the solution was: Instead to set border-left in the ul, set border-left in the li children and check if in each level, the last li child has children. If yes, take the border-left off. If no, let it just how it is. This worked!


You May Also Like