资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端小白进阶笔记之多级菜单分享

前端小白进阶笔记之多级菜单分享

Mike617 / 1025人阅读

摘要：注释部分为下拉菜单隐藏，显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个或者多带带设置其属性相对定位绝对定位的用法。

css技术分享之二级、三级下拉菜单的制作： 首先看一下网页中的三级下拉菜单：

接下来自己动手试一试吧！ 制作多级下拉菜单 在css中我们需要用到：

hover选择器用于选择鼠标指针浮动在上面的元素
display：none：隐藏元素
display:black：显示被隐藏的元素

第一步：搭建框架并填充内容 

    </>复制代码 
    1.     
    2. 2017年
    3.     
    4. 2018年
    5.         
      •             
      • 一月
      •                 
        •                     
        • 1
        •                     
        • 2
        •                     
        • 3
        •                     
        • 4
        •                     
        • 5
        •                     
        • 6
        •                     
        • 7
        •                     
        • 8
        •                     
        • 9
        •                     
        • 10
        •                     
        • 11
        •                     
        • 12
        •                     
        • 13
        •                     
        • 14
        •                     
        • 15
        •                     
        • 16
        •                     
        • 17
        •                     
        • 18
        •                     
        • 19
        •                     
        • 20
        •                     
        • 21
        •                     
        • 22
        •                     
        • 23
        •                     
        • 24
        •                     
        • 25
        •                     
        • 26
        •                     
        • 27
        •                     
        • 28
        •                     
        • 29
        •                     
        • 30
        •                 
      •             
      •             
      • 二月
      •             
      • 三月
      •             
      • 四月
      •             
      • 五月
      •             
      • 六月
      •         
    6.     
    7.     
    8. 2019年
    9.     
    10. 2020年
    11.     
    12. 2021年
    13.     
    14. 2022年
第二步：编写css样式 注意：子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class多带带设置其属性。注释部分为下拉菜单隐藏，显示的样式。 
</>复制代码 
  1.

此时可以得到如下效果图：

提示：二级菜单的制作需要注意的三个问题：

1、层级关系：年月日很好的诠释了多级下拉菜单的关系，当点击年份的时候可以让月份显示，点击月份的时候可以让日期显示，也就是说我们需要给要显示对象父级设置hover。
2、子元素会继承父元素的样式：在写css样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class多带带设置其属性
3、position：relative(相对定位)/absolute(绝对定位)的用法。

GPU云服务器 云服务器 多级关联菜单 多级网页菜单 多级下拉菜单 java 进阶笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112642.html

相关文章

  • 前端小白进阶笔记之多级菜单分享

    摘要：注释部分为下拉菜单隐藏，显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个或者单独设置其属性相对定位绝对定位的用法。 css技术分享之二级、三级下拉菜单的制作： 首先看一下网页中的三级下拉菜单： showImg(https://segmentfault.com/img/remote/14600000113377...

    Wuv1Up 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

  • JavaScript精编干货

    摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。 浅析用 js 解析 xml 的方法 由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。 装 X - 建立自己的斗图网站库 之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ， 迫于本屌丝开不起...

    Fourierr 评论0 收藏0

发表评论

登陆后可评论

0条评论

Mike617

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<