HTML5 details 结合 summary、纯 CSS 实现 JQuery slide动画
<details>
和 <summay>
是 HTML5 新增的 2 个标签,只有现代浏览器支持这 2 个标签,所以,想什么兼容IE之类的老古董的人可以立刻粗去了。
<details>
<details>
用于描述文档或文档某个部分的细节,与 <summary>
配合使用可以为 details
定义标题。标题是可见的,用户点击标题时,会显示出 details
。
<details>
拥有 open 属性,details
元素默认是隐藏的,设置 open
属性后,可以定义 details
元素默认可见,与 checkbox
定义 checked
属性是一个道理。
定义:
<body>
<details></details>
</body>
如上所示,我定义了一对details标签,在页面中会出现如下内容:
点击上面这块内容,三角形会旋转90度
那么看到这里大家应该懂了,这个应该就是一个类似于伸缩菜单的标签
<summary>
<summary>
包含 details
元素的标题,details
元素用于描述有关文档或文档片段的详细信息,summary
元素应该是 details
元素的第一个子元素。
<body>
<details>
<summary>你好像有丶东西?</summary>
<p>龟龟 你秀得我头晕</p>
</details>
</body>
了解这些标签的用途后,我定义了如上几个标签,看看页面上的内容把:
如图所示,summary标签的内容变成了标题,而p标签的内容被默认隐藏了,点击一下试试:
可以看到,点击标题后,p
标签的内容就被展开了,所以,利用这些特性,我们就阔以拓展拓展,做出一个伸缩菜单栏的效果了。
那么需要拓展的就是,将三角号去掉,将点击时的蓝色边框去掉,将三角形换成自己想用的东西,最后再加上CSS3的一些过渡效果。
制作多级菜单栏下拉效果
简单折叠菜单 无过渡效果
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
::-webkit-details-marker{
display:none;
}
::-moz-list-bullet {
font-size: 0;
float: left;
}
summary{
font-weight:bolder;
cursor:pointer;
user-select: none;
outline: 0;
}
li{
list-style: none;
}
</style>
</head>
<body>
<details>
<summary>商品管理</summary>
<li>商品列表</li>
<li>添加商品</li>
</details>
<details>
<summary>品牌管理</summary>
<li>品牌列表</li>
<li>添加品牌</li>
</details>
<details>
<summary>分类管理</summary>
<li>分类列表</li>
<li>添加分类</li>
</details>
</body>
以上代码演示效果如下:
利用 transition
属性、属性选择器 [ ]
与相邻兄弟选择器 +
制作 slide 滑动效果
HTML 代码:
<div>
<details open>
<summary>商品管理</summary>
</details>
<ul>
<li>商品列表</li>
<li>添加商品</li>
</ul>
</div>
<div>
<details open>
<summary>品牌管理</summary>
</details>
<ul>
<li>品牌列表</li>
<li>添加品牌</li>
</ul>
</div>
<div>
<details open>
<summary>分类管理</summary>
</details>
<ul>
<li>分类列表</li>
<li>添加分类</li>
</ul>
</div>
CSS 代码:
div {
width: 7%;
margin: 0 auto;
text-align: center;
}
::-webkit-details-marker {
display:none;
}
::-moz-list-bullet {
font-size: 0;
float: left;
}
details {
position:relative;
background:#f5f5f5;
}
summary {
font-weight:bolder;
cursor:pointer;
user-select: none;
outline: 0;
}
li {
border:1px solid #eee;
border-top : 0;
list-style: none;
}
/* 实现动画的原理 */
summary::after {
content: '';
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-top: 5px solid #000;
position: absolute;
top: 44%;
right: 8%;
transition:.3s ease-out;
}
[open] summary::after {
transform:rotate(180deg)
}
ul {
max-height: 0;
padding:0;
margin-top:0;
transition: .3s ease-out;
overflow: hidden;
}
[open] + ul {
max-height: 60px;
}
以上代码演示效果如下:
发布评论
评论
共计
1条评论
最新评论