I'm doing webpage design using Twitter Bootstrap's dropdown menu.
Problem: Suppose I have a horizontal menu as shown in the Twitter Bootstrap documentation. That menu bar that list pages I want to go, and one of the pages contains sub pages.
If I were to normally cater to a desktop machine or anyone with a mouse/touchpad, user will hover mouse cursor over the Page B, to find out there are sub pages, B-1 and B-2.
If he wants to go to Page B, he can just click on the link. If he wants to go to sub pages, he'll hover on page B, and then hover down on any of the sub pages to click on it.
However, on a touchscreen device, we are not afforded such luxury of a hover.
Solution A: As with Bootstrap's implementation, by default the user will have to click on one of the dropdown menu trigger to open the menu. That makes the "Page B" link useless as a link, because it is being used as a trigger to open a menu instead. This breaks the logical grouping of the elements in the layout.
Solution B: The other solution is "split button dropdowns", where user has to click on the button or the half the button to trigger that menu's appearance. And make Page-B link in the sub menu. This is solution makes the main horizontal menu's visual complexity much higher.
I would like to know, to design for touchscreen devices, if there are any ways to model it after desktop user's experience of clicking on Page-B directly? If not, are there solutions better than Solution B with less visual complexity?
Less clicks is always good.