max
max

Reputation: 1589

Nested dropdown menu in Bootstrap in mobile

I'm building this website using bootstrap.

The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.

Nested Dropdowns in the Desktop version

However this is how it looks in mobile:

Nested Dropdowns in the Mobile version

They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.

I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.

Question: I'm really not experienced in developing UI. Is my approach sufficient? How should i solve this problem?

Upvotes: 2

Views: 4944

Answers (1)

professormeowingtons
professormeowingtons

Reputation: 3514

I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.

Upvotes: 2

Related Questions