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.

DropDownMenuSolution

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.