javascript - 菜单 : how to auto select first subitem

标签 javascript css submenu

我需要重现我们可以在 forbes.com 上找到的那种菜单。我只对 Logo 项子菜单感兴趣。 我就快完成了。我制作了 Logo 元素菜单,带有类别名称的第一级菜单和显示每个类别的文章链接的第二级菜单。

到目前为止,它是一个以基本方式设置的完整 CSS 菜单。当用户将鼠标放在 Logo 上时,它只显示第一个子菜单级别。我想我需要一些 JS,因为我的目标是 - 就像在 forbes 子菜单上一样 - 在第一个子元素上显示鼠标悬停效果,以允许同时显示第二个子菜单级别。 (看起来更好看)

这是我的代码(简化):

<ul id="menu"><li>
<a href="#" >Mylogo</a>

<ul class="submenu1">

<li class="item1"><a href="#">item1</a>
<ul class="subemnu2">content</ul>
</li>

</ul>/*----submenu1-------*/
</li>/*-----li menu------*/
</ul>/*---- ul menu-------*/

感谢您的帮助。问候

最佳答案

您的用例不需要 JavaScript。您可以使用 CSS3 动画来实现:

http://www.w3schools.com/css3/css3_animations.asp

当用户将鼠标悬停在第一个子项上时,您可以更改其外观 (.submenu1:hover),还可以触发动画以显示第二级菜单项。

关于javascript - 菜单 : how to auto select first subitem,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12588335/

相关文章:

javascript - 具有 3 列的 Google 图表

jquery - 在某个点停止固定位置滚动?

html - 内容和页脚之间的空间

CSS 水平子菜单

javascript - 如何让玩家在Canvas中出现并移动?

javascript - 通过 $scope 访问函数中的 ng-resource 会导致无限循环

javascript - OnClick事件调用javascript函数语法

html - 如何垂直对齐标签中的元素?

jquery - 按顺序显示子菜单项

javascript - 隐藏 TinyNav 子菜单