I’ve been looking at Twitter’s Bootstrap framework and I’m really impressed. However, I don’t understand the thinking behind the way the dropdown navigation menu works.
Firstly, in order to see child links, you have to click on the parent. I can see the benefits of this, but why not have the more traditional dropdown on hover approach as the default?
Secondly, it seems that the thinking behind the Twitter Bootstrap’s dropdown menu illuminates parent pages. I’m probably not explaining that very well…
Say, you have a simple web page structure:
- Home
- About
- The Team
- Services
- Web Design
- Hosting
- Domains
- Contact
In a traditional dropdown menu structure, you’d hover over “about” and “services” and the dropdown menu containing the child links (eg “Web design”, “Hosting” etc.) would appear. However, you would also be able to click on the parent page (i.e. “About” and “Services”) and visit them.
With Bootstrap you can’t have a parent page in the structure, you have to use the anchor tag (“#”). When you click this, you then see the pages in the dropdown. This is no good if there is a parent page. It’s also not great from a semantic (what does “#” mean?) and accessibility (javascript turned off, screen readers etc) point of view.
I’ve probably missed something, but can someone explain the thinking behind this particularly in regards to parent pages and semantic html/accessibility?
It has been done this way simply because hover menus do not work well on touch screen devices.
https://github.com/twitter/bootstrap/issues/1029