Thanks for your reply.
I'm surprised that the whole issue of progressive enhancement is not being
discussed more than it is. I suppose Bootstrap has it's roots in Twitter,
it's implementing it's menu system like a web app. It makes sense to use
click to dropdowns like this- and there isn't the issue of mirroring the
site architecture in the menu with an app.
You got me thinking though of a work around. I think the click-to dropdown
implementation in Bootstrap makes sense when using it on a mobile device-
it's not possible to hover when clicking! But I wonder whether we can get
rid of those pesky non-semantic anchors ("#"). They just don't mean
anything.
Perhaps it would be possible to change the markup of the navigation, so
that the parent link is duplicated at the top of the secondary list (for
the dropdown)- basically as you suggest. That way, it would be possible to
serve a CSS-only and semantic dropdown menu structure when javascript is
not available, but to implement Bootstrap's method of click-to-dropdown
when Javascript is switched on.
Unfortunately, I don't have a clue how to start. Anyone fancy having a go?
Personally, I think this really important. Bootstrap is a fab framework,
but in my opinion the way the nav bar works makes the nav bar only suitable
for web apps- not web sites.
On Friday, March 16, 2012 8:58:00 AM UTC, Barry vd. Heuvel wrote:
>
> You could probably do something like this (when using h5bp/modernizr's
> html classes js/no-js)
>
> // Open state for the dropdown
> // ---------------------------
> .dropdown.open, .no-js .dropdown:hover {
>
> instead of only .dropdown.open. But you probably also have to change the
> css to remove the empty space between the dropdown parent and the menu.
>
> And you could also probably write some javascript to automatically change
> the markup of the navigation (duplicatie the parent item and add it as a
> child, but with different formatting, to show it is a different level then
> the rest of the children).
>
> But as Mark stated, thiss wil probably not go into the source..
>
>
>
> On Thu, Mar 15, 2012 at 19:56, baritoneuk wrote:
>
>> 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<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/<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
>>
>>
>
