如何通过 display:olck/none 完成一个菜单栏_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

通过 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菜单栏内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • ie/火狐/chrome操作display:none对象所遇问题解答
  • css元素隐藏原理及display:none和visibility:hidden
  • ie9崩溃现象当js设置tr元素样式为display:none
  • ie7下父元素及子元素的隐藏顺序不当带来的display:none出现bug
  • display:none和visibility:hidden的差别比较与演示代码
  • 怎么在控制版面隐藏NBA2KOL的图标?大神快来帮忙
  • nvidia opengl driver 运行反恐精英OL时提示,求解决!
  • DIV 的 display:inline CSS1 内联对象的默认值。用该值将从对象...
  • 我的电脑怎么玩不了真三国无双OL
  • div border为什么加上display:inline就不显示
  • 战地风云ol怎么安装
  • display = ""是什么意思?
  • 在CSS样式表中display是什么意思啊
  • display = ""是什么意思?
  • 《挑战OL》单机版具体制作流程?
  • 在CSS样式中 .ol是什么意思啊
  • 怎么隐藏csol在控制版面的图标和名称用(regedit)修改
  • Csol死机显示这个怎么回事
  • CSOL到不了登陆界面就黑屏
  • 玩怪物猎人OL AMD双显卡不能切换、游戏卡顿、未响应怎么办...
  • display属性值为inline-block的元素究竟具有哪些行内元素的性质
  • Ol Skool的《Touch You》 歌词
  • 有序列表ol漂亮css分页样式代码(纯css)
  • 本人购买的惠普DV6 7208TX 居然玩不了CSOL WIN8不兼容 做...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程displayolcknone单栏ie/火狐/chrome操作display:none对象所遇问题解答css元素隐藏原理及display:none和visibility:hiddenie9崩溃现象当js设置tr元素样式为display:noneie7下父元素及子元素的隐藏顺序不当带来的display:none出现bugdisplay:none和visibility:hidden的差别比较与演示代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法有趣的css实现隐藏元素的7种思路css实现快速炫酷抖动动画效果css弹性盒flex-grow、flex-shrink、flex-basis详解子元素margin-top导致父元素移动的问题解决生僻标签 fieldset 与 legend 的用法详解css世界--代码实践之图片alt信息呈现css 奇思妙想边框动画效果的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved