在Twitter Bootstrap中实现下拉菜单背后的想法是什么? [英] What was the thinking behind the implementation of the dropdown menu in Twitter Bootstrap?

查看:156
本文介绍了在Twitter Bootstrap中实现下拉菜单背后的想法是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在关注Twitter的Bootstrap框架,我真的很感动。但是,我不理解下拉导航菜单工作方式背后的想法。

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?

其次,似乎Twitter Bootstrap下拉列表背后的想法菜单点亮父页面。我可能没有那么好解释...
说,你有一个简单的网页结构:

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:


  • 主页

  • 关于

    • 团队


    • 网页设计

    • 主机

    • 域名

    在传统的下拉菜单结构中,您将鼠标悬停在约和服务以及包含子链接的下拉菜单中(例如网页设计,将出现托管等。但是,您也可以单击父页面(即关于和服务)并访问它们。

    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.

    使用Bootstrap,您无​​法拥有在结构中的父页面中,您必须使用锚标记(#)。单击此按钮后,您将在下拉列表中看到这些页面。如果有父页面,这是不好的。从语义(#是什么意思?)和可访问性(javascript关闭,屏幕阅读器等)的观点来看,它也不是很好。

    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.

    我可能错过了什么,但有人可以解释这背后的想法,特别是关于父页面和语义html /可访问性?

    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

    这篇关于在Twitter Bootstrap中实现下拉菜单背后的想法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆