纯CSS实现展开列表
效果预览
以下为源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
*{
padding:0;
margin:0
}
.menu>li{
float:left;
width:80px;
background:#0ff;
list-style:none;
text-align: center;
}
.menu>li:hover .hiddenlist{
height:100px;
}
.menu>li:hover{
background:#707;
}
.hiddenlist{
position:fixed;
height:0;
overflow:hidden;
background:#999;
transition:height 0.5s ;
}
.hiddenlist ul{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80px;
}
.hiddenlist ul li{
text-align:center;
}
.hiddenlist li:hover {
background:#7fff;
}
@keyframes move{
0% {height: 0 }
100% {height: 120px}
}
</style>
<body>
<div class="nav">
<ul class="menu">
<li>一
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>二
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>三
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
</ul>
</div>
<div style="clear:both;">因为hidden的position属性为fixed,所以不会影响布局</div>
</body>
</html>
纯CSS实现展开列表的更多相关文章
- day19—纯CSS实现菜单列表下框跟随效果
转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...
- 【纯css】左图右文列表,左图外框宽度占一定百分比的正方形,右上下固定,右中自动响应高度。支持不规则图片。
查看演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 使用纯CSS制作展开合并立方体特效
显示效果 源码 <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- [TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
- 纯css实现手机通讯录
我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单,就是两个列表 <div class="con&qu ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
随机推荐
- .NET Framework 类库——C#命名空间大全
引用地址:https://msdn.microsoft.com/zh-cn/library/gg145045.aspx C# using引用时,不知道有哪些命名空间,这下转载收集一篇,方面查找使用. ...
- Eclipse中如何打开Map/Reduce Locations窗口
Window->Show View->Other->MapReduce Tools,双击打开
- L1与L2正则(转)
概念: L0范数表示向量中非零元素的个数:NP问题,但可以用L1近似代替. L1范数表示向量中每个元素绝对值的和: L1范数的解通常是稀疏性的,倾向于选择:1. 数目较少的一些非常大的值 2. 数目 ...
- console输出彩色字体
console.log("%c%s","color: red; background: yellow; font-size: 24px;","警告!& ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-9项目各种全局帮助类
本文目录 1. 前沿2.CacheHelper基于Microsoft.Extensions.Caching.Memory封装3.XmlHelper快速操作xml文档4.SerializationHe ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-8项目加密解密方案
本文目录1. 摘要2. MD5加密封装3. AES的加密.解密4. DES加密/解密5. 总结 1. 摘要 C#中常用的一些加密和解密方案,如:md5加密.RSA加密与解密和DES加密等,Asp.N ...
- cactiEZ 配置
CactiEZ 中文版是简单有效的cacti中文解决方案,它基于centos6 整合了cacti的相关软件,重新编译的一个新的操作系统 它基于centos6,启动速度快,支持EXT4文件系统,全中文页 ...
- Codeforces 1045B Space Isaac
Space Isaac 我们定义第一个集合为a, 第二个集合为b 先把a数组排序, 然后我们会以线段的形式得到b集合. 我们先用a[ 1 ]去和 b 中的元素结合, 只有size(a) 个数字未被覆盖 ...
- 查看当前的app运行的是哪个Activity
1.确认手机连接了adb-->检查方式:adb devices 2.手机运行任意app,随意进入一个页面 3.此时cmd运行:adb shell "dumpsys window | g ...
- jQuery Validate自定义错误信息,自定义方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...