css实现下拉菜单效果,怎么用html和css实现下拉列表
您可能经常会看到以下效果：
没错，就是页面上常见的“展开折叠”的交互形式。通常的方法是控制display属性的值在none和其他值之间切换。但是虽然能实现功能，但是效果很生硬，所以会有这样的需求。3354希望元素在展开和折叠时能有明显的高滑效果。
前面的实现可以使用jQuery的slideUp()/slideDown()方法。但是在移动端，由于CSS3动画支持的很好，移动端的JavaScript框架并没有提供动画模块。这里自然想到了CSS3技术。
作者第一反应是用高度溢出：隐藏；实现，没有性能问题，也不用担心显示问题。但是我一眨眼就想到很多时候我们需要展示的内容是动态的，也就是说内容高度不是固定的(当然你也可以用overflow-y:auto；暂时)。要达到这个效果，身高要用“非定值auto”！
但是，auto不是一个数值，而是一个关键字。所以，如果用height在0px和auto之间切换，在一个3354数值和关键字不能计算的隐含规定下，就无法形成转场或动画效果。
还有css中的clip-path属性：很多初学者习惯在none和特定值之间形成动画效果，这是不可能的。
所以为了达到文章开头的效果，笔者推荐max-height属性：
div class= accordion input Id= collapse 1 type= radio name= tap-input hidden/input Id= collapse 2 type= radio name= tap-input hidden/Id= collapse 3 type= radio name= tap-input hidden/文章标签for= collapse1 列表1/标签内容1br内容2br内容3br内容4/p/文章标签for= collapse2 列表2/标签内容1br内容2br内容3br内容4/p}.手风琴文章{ cursor:pointer；}标签{ display:block；填充：0 20px高度：40px背景色：# f66光标：指针；行高：40px字体大小：16px颜色：# fff} p {溢出：隐藏；填充：0 20px边距：0；边框：1px纯色# f66边框顶部：无；边框-底部-宽度：0；最大高度：0；行高：30px过渡：全. 5s轻松；} input:n-child(1):checked ~ article:n-of-type(1)p，input:n-child(2):checked ~ article:n-of-type(2)p，input:n-child(3):checked ~ article:n-of-type(3)p { border-bottom-width:1px；max-height:130 px；}在css中，最小高度/最大高度出现的场景必须在自适应布局或流体布局中。对于扩展的max-height值，我们只需要确保设置值大于内容高度，即——因为在max-height height 时，元素高度就会以height属性的高度计算。
但是，建议不要将max-height的值设置得太大。毕竟，过渡或动画的时间是“完成动画的时间”而不是“显示内容的时间”
拉动效应还有一种表现形式：
其特点是当鼠标悬停在组件的一部分上时，该部分会展开并挤压旁边的部分，当鼠标离开时又会恢复原状。如果鼠标快速跳过，会产生拉手风琴的效果。
用JS实现手风琴效果，必须监控鼠标事件，mouseenter和mouseleave，CSS中的：hover可以代替这两个效果。所以用纯CSS实现手风琴效果的关键是：hover，其核心代码如下：
Li {}li:hover {}对于版面来说，连续实现伸缩效果比较好的方法是flex！
ul class= accordion Li/Li Li/Li Li/Li Li/Li Li/Li Li/ul . accordion { display:flex；宽度：600px高度：200px}李{ flex:1；光标：指针；过渡：全部300ms}李：第n个孩子(1){ background-color:# f66；}李：第n个孩子(2){ background-color:# 66f；}李：第n个孩子(3){ background-color:# f90；}李：第n个孩子(4){ background-color:# 09f；}李：第n个孩子(5){ background-color:# 9 C3；}李：第n个孩子(6){ background-color:# 3c 9；}李：hover { flex:2；背景色：# ccc}这里有一点值得注意：像动画延迟等一些“特殊”情况，可以在HTML中以内联style的形式插入CSS自定义变量，这样可以简化代码：CSS3自定义变量是如何从一个项目重构到一个项目中使用的？
关于纯css页面中列表集合的效果的这篇文章到此为止。有关CSS页面中列表集合的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。