The Bootstrap Drop-Down Menu Parent Page Solution
When I redesigned this website, I ended up adapting a theme that was based on Twitter's Bootstrap framework. While this looked good and worked well, there was one area where Bootstrap failed to deliver: the drop-down menus.
Bootstrap is designed to be mobile friendly, which is great. On mobile devices everything is done with (fat) fingers rather than a mouse, so "hovering" over controls isn't possible. As a consequence, the drop-down menus are opened/closed by clicking on them. All good so far.
The problem for this website was that the drop-down menu's parent item is also the parent page for the items in that drop-down menu. Since clicking opened/closed the drop-down menu, it was impossible to select and visit the parent page. That's not good, so I started searching for a solution.
A quick internet search showed that I wasn't alone with this problem, and others had been trying to solve it too. However, the solutions that I found all had their drawbacks:
Idea 1: Disable the click-to-open functionality, and reinstate drop-down on hover.
Pro: Works great on a desktop computer
Con: Drop-down menu is no longer usable on mobile devices
Idea 2: Switch to drop-down on hover only when the browser window is larger than 768 pixels
Pros: Works on desktop computers. Drop-down menu works on small mobile devices
Cons: Fails on tablets which have high-resolution screens. Parent page is still not accessible on mobile devices
As you can see, both ideas have ugly downsides. Eventually, I realised that I was trying to solve the wrong problem. I was trying to somehow enable visiting the parent page by clicking on the drop-down menu's parent, whereas what I really wanted was for people to be able to visit the parent page. Once I started thinking about it that way, the solution came quickly...
The "Real" Solution
The solution is remarkably simple: insert an "Overview" entry at the top of the drop-down menu that links to the parent page. This works fine on all devices, and completely side-steps the original "how can I visit the parent item by clicking on it" problem. It's also very easy to implement. Here's the Silverstripe 3 template code that does this:
<li class="<% if $LinkingMode == 'section' || $LinkingMode == 'current' %>active<% else %>{$LinkingMode}<% end_if %>"> <a href="{$Link}" title="{$Title.XML}">Overview</a> </li>
This is inserted at the top of the dropdown-menu section, which is lines 9-11 of the full menu code below.
<% loop $Menu(1) %> <% if $Children%> <li class="dropdown <% if $LinkingMode == 'section' || $LinkingMode == 'current' %>active<% else %>{$LinkingMode}<% end_if %>"> <a href="{$Link}" class="dropdown-toggle" data-toggle="dropdown" title="{$Title.XML}"> $MenuTitle.XML </a> <ul class="dropdown-menu"> <li class="<% if $LinkingMode == 'section' || $LinkingMode == 'current' %>active<% else %>{$LinkingMode}<% end_if %>"> <a href="{$Link}" title="{$Title.XML}">Overview</a> </li> <% loop $Children %> <li class="<% if $LinkingMode == 'section' || $LinkingMode == 'current' %>active<% else %>{$LinkingMode}<% end_if %>"> <a href="{$Link}" title="{$Title.XML}"> $MenuTitle.XML </a> </li> <% end_loop %> </ul> </li> <% else %> <li class="<% if $LinkingMode == 'section' || $LinkingMode == 'current' %>active<% else %>{$LinkingMode}<% end_if %>"> <a href="{$Link}" title="{$Title.XML}"> $MenuTitle.XML </a> </li> <% end_if %> <% end_loop %>
And with those three lines, the parent page is visitable on all device types.
I hope that this post comes in handy. For me it doubles as a reminder to look at problems from a different angles. Looking at a problem from a fresh perspective can help deliver a better solution.
Post your comment