如何通过 display:olck/none 完成一个菜单栏
我要评论通过 display：bolck/none 完成一个菜单栏的效果 图1：
首先下面是已经完成的一个效果当我们把鼠标移入到 “菜单” 这块区域时就会弹出，图2的效果
图2：
相反如果我们把鼠标移出 “菜单” 区域时，下面的子菜单就会隐藏，得到图1所显示的效果。
图3：
图中源代码的内容就是实现，图1与图2的内容样式结构，我们先给一个大的div，用来给显示的内容做一个大的盒子，在盒子中又放了5个div完成要呈现的内容，然后给这5个div设置一个 “左浮动" 的样式让它可并排在一行，当然也可以把它设置成 “行内块级元素”,在给其中放一个 “无序列表”去呈现子菜单的内容。
图4：
1.我们先给最上层 li 设置一些基本的样式，在这个标签上给一个（绝对定位）position: relative; 接着给它下级的 ul 设置一个（相对定位）position:absolute； 2.在给这个这个 ul 设置它的 |display| 为 |none| 将其隐藏——参考图5——. U2部分。 3. 然后给li 设置 （伪类）hover 调用下级 ul 的类名，把ul 的 | display |设置成 |block | —— 图4部分 —— 实现一个把鼠标移入到这个 li上，下级 ul 就会显示出来
图5：
最后如果觉得效果比较生硬，我们可以通过 @keyframes 设置 transform 的动画效果，因自己喜好去设置自己想要的动画效果。
到此这篇关于如何通过 display:olck/none 完成一个菜单栏的文章就介绍到这了,更多相关display:olck/none菜单栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用layui实现左侧菜单栏及动态操作tab项的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参2020-11-10
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们2020-03-17
本篇文章主要介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例，非常具有实用价值，需要的朋友可以参考下2017-09-14
详解css3 Transition属性（平滑过渡菜单栏案例）
这篇文章主要介绍了详解css3 Transition属性（平滑过渡菜单栏案例）的相关资料,需要的朋友可以参考下2017-09-05- 本文主要介绍了菜单栏 “三” 变形为“X”css3过渡动画的实现方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-28
- 这篇文章主要介绍了利用CSS实现的几款不错的菜单栏实例代码，文中包含滑动菜单、左侧带图标多级下拉菜单、立体动感菜单、可同时折叠的手风琴菜单、鼠标滑动展开二级菜单以2017-02-16
- 这篇文章主要介绍了CSS仿网易首页的头部菜单栏按钮和三角形制作方法的相关资料,需要的朋友可以参考下2016-08-15
- 这篇文章主要介绍了使用CSS实现菜单栏的制作当鼠标经过时有变色效果，个人感觉还是个不错的例子，希望对初学者有所帮助2014-04-14
这篇文章主要介绍了利用html+css实现菜单栏缓慢下拉效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着2021-03-22
最新评论