2

我使用 Suckerfish 创建了一个 CSS 下拉菜单。问题在于，当您单击将您带到类别页面的顶级导航项时，指针仍位于该导航项上方，并且下拉菜单会自动出现在 IE 中。

它对 Firefox 很好，因为在我移动鼠标之前不会出现下拉菜单，但是 IE 会立即启动，根本没有任何鼠标移动。

由于菜单非常大，用户不知道页面已更改。

这个网站http://www.foodnetwork.com/似乎实现了我想要的，在下拉菜单再次出现之前略有延迟。我知道他们将它与 JS 和 CSS 混合在一起，但不能完全弄清楚他们在做什么。

有什么想法吗

4

4 回答 4

1

我知道您目前正在使用不同的技术解决方案来解决这个问题，但请在判断之前至少看看我的建议。我不足以直接解释它，所以我只会给你几个要点，然后链接到解决方案以帮助你。

此解决方案包含以下属性：

  • 没有使用任何类型的客户端脚本（Javascript）
  • 绝对的浏览器和平台兼容性
  • 文本缩放友好
  • 窄窗口宽度处理
  • 适用于非 CSS 或禁用 CSS 的浏览器
  • 置于公共领域

发布文件的站点使用此菜单（它归作者所有）。所以，请访问这个GRC 的无脚本纯 CSS 菜单系统页面。

我真的希望这对你有帮助！

于 2010-07-30T09:36:13.330 回答
0

使用 jQuery 的hoverIntent来实现延迟效果。此外，即使光标暂时移出菜单，菜单也会保留在那里。防止菜单出现和消失时分散注意力的闪烁效果。

于 2010-07-29T11:36:52.513 回答
0

只是把它扔在那里，因为您可能希望菜单也有其他更改：

您可能需要考虑Superfish（Suckerfish 的更新/升级 [并且可能过度杀伤，因此请看一下] 版本），其中一个新增功能是菜单上的delay选项。

于 2010-07-29T11:37:50.753 回答
0

所以我得到了解决方案。

我在文档的头部添加了带有 JS 的 CSS 并设置了一个小的延迟。这样，当用户单击主导航链接时，下拉菜单默认使用 CSS 隐藏，然后使用 JS 编写的 CSS 显示。用户在页面加载时看到一个没有下拉菜单的页面，然后在 1.5 秒后出现下拉菜单，因此向用户显示重新加载的页面。 

// Add dropdown styles
        function addDDStyles() {
            var head = document.getElementsByTagName('head')[0];
            var logindiv = document.createElement('link');
            logindiv.setAttribute('type', 'text/css')
            logindiv.setAttribute("rel", "stylesheet");
            logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
            logindiv.setAttribute("media", "screen");
            head.appendChild(logindiv);
        }
        setTimeout('addDDStyles()', 1500)

于 2010-07-30T09:12:39.320 回答