HTML5课上(xià)学到的下拉菜单,小白代码奉上ヾ(◍°∇°◍)ノ゙。
基础版
首先要理解我们最终需要的效果是什么:
1 父级菜单显示
的时候,子级菜单隐藏
2 鼠标移动到含有子元素的li
标签时,该标签显示其子元素(菜单)
如何实现?
1 以鼠标事件onmouseover
和onmouseout
来控制
2 运用元素的隐藏(display:none
)和显示(display:block
)来实现
代码如下(注意理解:核心CSS在16~21
行):
1 |
|
优化版
在第一个代码的基础上有所优化:
1 |
|
理解逻辑,就可以再多弄几级菜单咯。
JS版
1 |
|
Thanks♪(・ω・)ノ
- 本文链接: https://anyway521.github.io/post/15f251b5.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!