下拉滑动二级菜单

Michael_Lin 发布于2019-08-30 13:21 / 3261人阅读

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

下拉滑动二级菜单的应用还挺多的，比较美观。
各层之间颜色的搭配挺重要的，多试几次。
难点在把层次关系搞清楚，否则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代码：

css代码：

*{
    margin:0px;
    padding:0px;
}    
.menu-body{
    height:50px;
    background:#FFD6A4;
    overflow:hidden;
    transition:ease 0.5s;
}
.menu-body:hover{
    height:300px;
}
.menu-head{
    height:50px;
    background:#F38181;
}
.menu-content{
    width:600px;
    margin:0 auto;
}
.menu-content ul{
    display:inline-block;
    height:300px;
    list-style:none;
}
.menu-content ul:hover{
    background:rgba(100,100,100,0.1);
}
.menu-content ul li{
    width:180px;
    height:50px;
    line-height:50px;
    color:#45171D;
    font-size:16px;
    font-weight:700;
    text-align:center;
}
.menu-content a{
    color:#45171D;
    cursor:pointer;
    text-decoration:none;
}
.menu-content a:hover{
    text-decoration:underline;
}
.menu-caption{
    font-size:18px;
}

云服务器专线服务横向滑动菜单弧形滑动菜单滑动图片菜单 jquery菜单滑动

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

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

下拉滑动二级菜单

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

gggggggbong 2019-08-01 16:09 评论0 收藏0
MUI使用总结

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

elliott_hu 2019-08-23 14:48 评论0 收藏0
CSS学习笔记(九) 界面组件之导航菜单

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

pingink 2019-08-28 18:03 评论0 收藏0
Android 7.0 新特性

摘要：改进的休眠机制谷歌在中对休眠机制做了进一步的优化，在此前的中，深度休眠机制对于改善安卓的续航提供了巨大的作用。Android7.0提供新功能以提升性能、生产效率和安全性。关于Android N的性能改进，Android N建立了先进的图形处理Vulkan系统，能少的减少对CPU的占用。与此同时，Android N加入了JIT编译器，安装程序快了75%，所占空间减少了50%。在安全性上，A...

coolpail 2019-04-23 17:11 评论0 收藏0
iOS下的下拉菜单

摘要：功能开发时，经常需要根据不同条件显示相应的数据。使用下拉菜单是一种很好的方案，包括一级菜单和二级菜单。如图来自爱飞扬旅游实现该下拉菜单由两部分组成。显示下拉菜单的，由组成。具体实现的实现继承，包括了几个用于显示已选择项内容的。功能开发App时，经常需要根据不同条件显示相应的数据。使用下拉菜单是一种很好的方案，包括一级菜单和二级菜单。如图（来自爱飞扬旅游App）： showI...

xcold 2019-06-25 14:10 评论0 收藏0