一级导航hover时显示二级导航总结

和大多数一级导航显示,二级导航在一级导航hove时显示时一样,既可以使用CSS来实现也可以使用JS来实现。

1、CSS实现: HTML结构上将每个二级导航放在对应的一级导航 li 标记内部。使用CSS在 li 标签:hover时显示二级导航。

  优点:结构清晰、实现方便、可以减少不必要的标签和JS代码。

  缺点:只是单纯的显示隐藏,不够灵活,不能设置更多动画效果,当然可以使用CSS3动画来实现动画效果。

     li标签上的:hover IE6不兼容,需要额外补丁。

2、JS实现:

  A、HTML结构上将一级导航和二级导航作为兄弟元素一一对应,使用JS遍历一级标签元素和二级标签元素,

     使用onmouseover/onmouseout将对应i一级菜单ndex下标的二级菜单显示和隐藏。

  优点:HTML上将每个块结构分离,方便修改和管理。

  B、HTML结构上和CSS实现一样,将二级菜单作为一级菜单子元素。在一级菜单li标签上添加hover类来控制二级菜单显示和隐藏。

  优点:JS现实方便,也没有使用CSS实现时的兼容性问题。

总结:在不考虑兼容IE6的情况下使用CSS实现会更加简便和高效。使用JS实现更灵活,兼容性也更好。

原文地址:https://www.cnblogs.com/chenzechuang/p/6634206.html