Adapting Menu for Touch

Before the proliferation of touch devices website menus were controlled with mouse hovers and clicks.

To view the child items associated with a particular menu item, simply hover over the item to pop up the child menu with the list of child items.

If you wanted to view the parent page, a simple click was all that was required.

Adapting menu for touch: child menu

But hovering doesn’t work with touch devices. Touching on the parent page in the menu navigates to the page, not showing the child menu.

To facilitate child menus on touch enabled devices clicking on the parent should not open that page, but rather show the list of child items.

To modify the traditional menu for touch devices the parent menu items are disabled.

If the parent page isn’t accessible how to view it?

Adapting menu for touch: child menu incorporating parent

If you need to implement the parent page move it, possibly with a variation in name into the child list. For example, the Veg page could be moved as a child below with the renamed parent Vegetables.

The parent page in the menu is there solely for structure it’s no longer a physical viewable page.