资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/下拉滑动二级菜单

下拉滑动二级菜单

gggggggbong / 2598人阅读

摘要：下拉滑动二级菜单的应用还挺多的，比较美观。难点在把层次关系搞清楚，否则布局都不知道从何下手。主要分为三层底层是，高度为，宽度触发高度变为注意要写，否则超出来的就会一直显示设置过渡属性才会出现滑动的效果，由触发。

下拉滑动二级菜单的应用还挺多的，比较美观。
各层之间颜色的搭配挺重要的，多试几次。
难点在把层次关系搞清楚，否则html布局都不知道从何下手。

主要分为三层

底层是class="menu-body"，高度为50px，宽度100%；hover触发高度变为300px；注意要写overflow:hidden，否则超出来的ul就会一直显示；设置transition过渡属性才会出现滑动的效果，由hover触发。

中层是class="menu-head"，高度为50px，宽度100%。

上层是三个列表，用class="menu-content"包裹起来，设置一个正好能够包裹住ul的宽度，方便用margin:0 auto居中；选中所有li设置一个宽度，height和line-height相同，以便垂直居中。

html代码：

</>复制代码 
  2.     
  3.         
  4.             
  5.             
  6.             
  7.         
  8.

css代码：

</>复制代码 
  1. *{
  2.     margin:0px;
  3.     padding:0px;
  4. }    
  5. .menu-body{
  6.     height:50px;
  7.     background:#FFD6A4;
  8.     overflow:hidden;
  9.     transition:ease 0.5s;
  10. }
  11. .menu-body:hover{
  12.     height:300px;
  13. }
  14. .menu-head{
  15.     height:50px;
  16.     background:#F38181;
  17. }
  18. .menu-content{
  19.     width:600px;
  20.     margin:0 auto;
  21. }
  22. .menu-content ul{
  23.     display:inline-block;
  24.     height:300px;
  25.     list-style:none;
  26. }
  27. .menu-content ul:hover{
  28.     background:rgba(100,100,100,0.1);
  29. }
  30. .menu-content ul li{
  31.     width:180px;
  32.     height:50px;
  33.     line-height:50px;
  34.     color:#45171D;
  35.     font-size:16px;
  36.     font-weight:700;
  37.     text-align:center;
  38. }
  39. .menu-content a{
  40.     color:#45171D;
  41.     cursor:pointer;
  42.     text-decoration:none;
  43. }
  44. .menu-content a:hover{
  45.     text-decoration:underline;
  46. }
  47. .menu-caption{
  48.     font-size:18px;
  49. }
云服务器 GPU云服务器 横向滑动菜单 弧形滑动菜单 滑动图片菜单 jquery菜单滑动

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

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

相关文章

  • 下拉滑动二级菜单

    摘要：下拉滑动二级菜单的应用还挺多的，比较美观。难点在把层次关系搞清楚，否则布局都不知道从何下手。主要分为三层底层是，高度为，宽度触发高度变为注意要写，否则超出来的就会一直显示设置过渡属性才会出现滑动的效果，由触发。 下拉滑动二级菜单的应用还挺多的，比较美观。各层之间颜色的搭配挺重要的，多试几次。难点在把层次关系搞清楚，否则html布局都不知道从何下手。 主要分为三层 底层是class=...

    Michael_Lin 评论0 收藏0

  • MUI使用总结

    摘要：预加载自定义事件第三方扩展插件涉及的，除了，其它所有手机浏览器及浏览器均无法使用，目前主要包括语音输入事件相关注意浏览器没有事件事件相关的，手机端浏览器均可使用端模拟手机浏览器也可以正常使用。 最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

    elliott_hu 评论0 收藏0

  • CSS学习笔记(九) 界面组件之导航菜单

    摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。 菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

    pingink 评论0 收藏0

发表评论

登陆后可评论

0条评论

gggggggbong

男|高级讲师
我要私信

TA的文章

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