I'm loving Bootstrap. It's now become my main framework after moving from a combination of 960gs and GetSkeleton. I have to take my hat off to the Mark and Jacob for all the amazing work they've done.
I'm now using Bootstrap as part of the fab Roots theme for Wordpress (based on Bootstrap and the HTML5 Boilerplate) which lets me start WP projects really quickly. I can see a lot of the thinking comes from the Twitter website. This has pros and cons. As I've said, I really love Bootstrap, but I'd like to stick with one of my concerns, and that's to do with progressive enhancement and accessibility. It was great to see Mark respond to my question on Stack Overflow on his blog. You can see my original question here: http://stackoverflow.com/questions/9433285/what-was-the-thinking-behind-the-implementation-of-the-dropdown-menu-in-twitter and Mark's reply on his blog here: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/ My question was to do with using blank anchor links "#" as the top level links. I can definitely see the thinking behind it. For me I see the major advantage of having a click-to-dropdown as it working on multiple devices. A hover-to-dropdown doesn't work on mobile devices properly, as you can't properly "hover" to see the dropdown. However there are still big issues in my (very) humble opinion with the implementation they have adopted. Perhaps I am being overly pedantic or missing something. If so, I hope to be corrected! It's usual for a navigation menu to mirror the site architecture. The top level pages being the main links, and 2nd level pages being in a dropdown menu under each top link. It's also usual to use lists and sub lists for this: <ul> <li><a href="/" title="Home Page (level 1)">Home</a></li> <li><a href="/about/" title="About Page (level 1)">About</a> <ul> <li><a href="/about/the-team/" title="The Team / About (level 2)">The Team</a></li> <li><a href="/about/others/" title="Others / About (level 2)">Others</a></li> </ul> </li> <li><a href="/contact/" title="Contact Page (level 1)">Contact</ a></li> </ul> Here you can click the top level pages, and traditionally you'd see the dropdown appear when you hovered over it. In Bootstrap the above isn't really possible in that you can't make the parent page a link, so the following is an approximation: <ul class="nav"> <li><a href="/" title="Home Page (level 1)">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/about/the-team/" title="The Team / About (level 2)">The Team</a></li> <li><a href="/about/others/" title="Others / About (level 2)">Others</a></li> </ul> </li> <li><a href="/contact/" title="Contact Page (level 1)">Contact</a></ li> </ul> The issue I have with the implementation in Bootstrap is that you have to set the top page as an anchor tag. This has a number of issues in my mind: 1) How do you link through to the parent page now that it's an anchor link? In the above example I've had to duplicate the parent link in the dropdown. 2) You could put the parent link in the sub list above the sub pages (as I have in the above example), but this isn't mirroring the architecture of the site. In my view this also makes it less accessible. 3) A blank anchor link is semantically meaningless. 4) It relies on javascript. OK, most people have Javascript on, but I'm a great believer in progressive enhancement. It should work as expected with Javascript switched off, but you can do even more cool things with it switched on. So, is it not possible to have a solution in Bootstrap for dropdowns and other similar components that avoid the use of blank anchors, use progressive enhancement work without javascript switched on? I say this as a humble web developer! Best wishes, Ian
