Posts tagged under jquery

26 Oct 2016

Adding a Responsive Bootstrap Navbar with Hover Dropdown Menus

Currently, I’m working with a client who has given me a lot of creative liberty for UI and UX design. Every once in awhile though, feature requests are made without the knowledge of best practices and standard capabilities within certain libraries.  One such request, a simple navbar I completed yesterday. 

A simple responsive Bootstrap navbar which turned into 5 and a half hours of reading, struggling, thinking I knew better than hundreds of others who have probably faced these problems dozens of times, and ultimately acceptance and settling on a pretty simple but effective approach.  So we started off with the regular Bootstrap nav, with dropdown menus.  Each dropdown menu had sub-items that would take you to an anchor on another page, all grouped by page.  (Ie. Page 1 Anchor 1, Anchor 2, Anchor 3; Page 2 Anchor 1, Anchor 2, Anchor 3; etc., etc.  Easy enough, right?  But, the dropdown menus needed to open on hover.  Okay, I think that should be easy too, and with mobile Bootstrap just replaces hover with touch anyway, and will open the dropdowns when touched

Works great. 

Then I realized the purpose for opening the dropdowns by hover was because the requirement was for the top level menu items to be clickable, and take you to Page 1 or Page 2…  Here’s where I started to see it wasn’t going to be as easy as I thought, and the beginning of my four ...