Home Web Development Bootstrap Solution to: How do I make Bootstrap 3 collapsable menus retract or...

Get social!

Bootstrap

For a project using Bootstrap version 3 and focusing on mobile devices, I had the following Bootstrap navigation menu on one of my pages:

Pretty standard stuff. When viewed on an iPhone or Android phone, the menu looks something like the photo below.

iphone

When someone clicks on a menu link (for instance, the "Filter Properties List" link), a modal dialog comes up (not a Bootstrap dialog -- my own homegrown version). It slides in from the bottom. After the user is done with it, they can click the "Done" button and it slides back out again. The problem is that the Bootstrap menu is still open. To me, it would be nicer if the menu closed after you clicked an item on it. It does this in some circumstances, but not all.

Solution

After mucking around with css transitions and various jQuery calls, I finally settled on the following code:

With it, when a user clicks on a menu item, the menu retracts immediately afterwards. There's probably a cleaner way to do this (I wonder if Bootstrap already has this functionality built in?) and jQuery can grow teeth when used like a sledgehammer. Still, it seems to be working OK so far. So file this solution under "whatever works".

Leave a Reply

Bad Behavior has blocked 66 access attempts in the last 7 days.