如何在没有 Javascript 的情况下制作带有下拉菜单的 CSS 选项卡?
我需要制作也有下拉菜单的选项卡,并且要求它们必须在没有 JavaScript 的情况下工作。这可能吗?某处有很好的例子吗?
I need to make tabs that also have drop down menu and requirements are that they have to work without JavaScript. Is this possible and is there good example of this somewhere?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
请参阅此 http://www.lwis。 net/free-css-drop-down-menu/dropdown.nvidia.com.html
这是纯CSS。看源码就明白了。
这是由免费 css 下拉菜单框架 http://www.lwis 构建的。 net/free-css-drop-down-menu/
仅适用于 IE 6 或更早版本的最小 JavaScript 代码。其他一切都是纯CSS。
如果你需要在包括 IE 6 在内的所有浏览器中使用纯 CSS,请尝试这个
http://www .cssplay.co.uk/menus/new-dropdown.html
但它有一些限制
编辑:
这也是纯 css 菜单。
http://www.grc.com/menu2/invitro.htm
这包括 IE5 .x、IE6、IE7 测试版、所有新旧 Netscape、Mozillas、Firefox(在 PC 和 Linux 平台上)、Opera、Safari 和许多其他 Mac 浏览器
see this http://www.lwis.net/free-css-drop-down-menu/dropdown.nvidia.com.html
it's pure css . see the source code to understand.
This is built by Free css dropdown menu framework http://www.lwis.net/free-css-drop-down-menu/
Minimal JavaScript code only for IE 6 or earlier. Everything else is pure CSS.
if u need pure css in all browser including IE 6 try this
http://www.cssplay.co.uk/menus/new-dropdown.html
but it has some limitations
Edit:
This is also pure css menu.
http://www.grc.com/menu2/invitro.htm
This includes IE5.x, IE6, IE7's betas, all old and new Netscapes, Mozillas, Firefoxes (on PC and Linux platforms), Operas, Safari and many other Mac browsers
这是一个解决方案
Here is one Solution
尝试 Suckerfish,Internet Explorer 需要 JavaScript,因为旧版本仅支持 :hover 在链接上。
Try Suckerfish, Javascript is needed for Internet Explorer as older versions only support :hover on links.
基本上,您需要在锚标记上使用悬停伪类。为了避免使用 javascript,您需要确保导航是结构化的,以便锚点可以执行此操作,因为在 ie6 中,这是唯一允许悬停的元素。因此,使用CSS作为关闭状态,您将包含下拉列表的元素设置为display: none,然后在悬停时将其设置为display: block;
它实际上相当简单 - 难点是将下拉菜单放置在您想要的位置。
Basically you need to use the hover pseudo class on the anchor tag. To avoid using javascript you need to make sure navigation is structured so the anchors can do this as in ie6 this is the only element that allows hover. So using CSS for the off state you set the element that contains the dropdown to display: none and then on the hover you set it to display: block;
It is actually fairly straightforward - the hard bit is positioning the drop down where you want it.