如何在没有 Javascript 的情况下制作带有下拉菜单的 CSS 选项卡?

发布于 2024-08-13 18:50:29 字数 68 浏览 4 评论 0原文

我需要制作也有下拉菜单的选项卡,并且要求它们必须在没有 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

待天淡蓝洁白时 2024-08-20 18:50:29

请参阅此 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

谷夏 2024-08-20 18:50:29

这是一个解决方案

Here is one Solution

汹涌人海 2024-08-20 18:50:29

尝试 Suckerfish,Internet Explorer 需要 JavaScript,因为旧版本仅支持 :hover 在链接上。

Try Suckerfish, Javascript is needed for Internet Explorer as older versions only support :hover on links.

你在看孤独的风景 2024-08-20 18:50:29

基本上,您需要在锚标记上使用悬停伪类。为了避免使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文