CSS制作垂直口风琴2

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3用target属性制作垂直口风琴</title><!--下一个展开时，上一个时关闭状态-->

    <style>

        .accordionMenu {

            font: 12px Arial, Verdana, sans-serif;

            color:#424242;

            background: #fff;

            padding: 10px;

            width: 500px;

            margin:0 auto;

        }

        .accordionMenu h2 {

            margin:5px 0;

            padding:0;

            position: relative;

        }

        .accordionMenu h2:before {

            content:"";

            border: 5px solid #fff;

            border-color: #fff transparent transparent;

            width: 0;

            height: 0;

            position:absolute;

            right: 10px;

            top: 15px;

        }

        .accordionMenu h2 a {

            font-size: 13px;

            display: block;

            font-weight: normal;

            color:#424242;

            text-shadow: 2px 2px 2px #aeaeae;

            text-decoration:none;

            margin:0;

            padding:10px 10px;

            background: #8f8f8f;

            background: -moz-linear-gradient( top, #cecece, #8f8f8f);

            background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));

            background: -webkit-linear-gradient( top, #cecece, #8f8f8f);

            background: -o-linear-gradient( top, #cecece, #8f8f8f);

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);

            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

        }

        .accordionMenu :target h2 a,

        .accordionMenu h2 a:focus,

        .accordionMenu h2 a:hover,

        .accordionMenu h2 a:active {

            background: #2288dd;

            background: -moz-linear-gradient( top, #6bb2ff, #2288dd);

            background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));

            background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);

            background: -o-linear-gradient( top, #6bb2ff, #2288dd);

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);

            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";

            color:#FFF;

        }

        .accordionMenu p {

            padding:0 10px;

            margin:0;

            height: 0;

            overflow: hidden;

            -moz-transition: height 0.5s ease-in;

            -webkit-transition: height 0.5s ease-in;

            -o-transition: height 0.5s ease-in;

            transition: height 0.5s ease-in;

        }

        .accordionMenu :target p {

            overflow: auto;

            height:100px;

        }

        .accordionMenu :target h2:before {

            border-color: transparent transparent transparent #fff;

        }

        /*上面是实现手风琴效果的所有样式代码，其中最为关键的是：*/

        /*1、实现动态效果*/

        .accordionMenu p {

            padding:0 10px;

            margin:0;

            height: 0;

            overflow: hidden;

            -moz-transition: height 0.5s ease-in;

            -webkit-transition: height 0.5s ease-in;

            -o-transition: height 0.5s ease-in;

            transition: height 0.5s ease-in;

        }

        /*在每块面板内容上使用了CSS3的transition来实现改变面板展开时高度的平滑过渡。*/

        /*2、制作面板标题*/

        .accordionMenu h2 a {

            font-size: 13px;

            display: block;

            font-weight: normal;

            color:#424242;

            text-shadow: 2px 2px 2px #aeaeae;

            text-decoration:none;

            margin:0;

            padding:10px 10px;

            background: #8f8f8f;

            background: -moz-linear-gradient( top, #cecece, #8f8f8f);

            background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));

            background: -webkit-linear-gradient( top, #cecece, #8f8f8f);

            background: -o-linear-gradient( top, #cecece, #8f8f8f);

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);

            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

        }

        .accordionMenu :target h2 a,

        .accordionMenu h2 a:focus,

        .accordionMenu h2 a:hover,

        .accordionMenu h2 a:active {

            background: #2288dd;

            background: -moz-linear-gradient( top, #6bb2ff, #2288dd);

            background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));

            background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);

            background: -o-linear-gradient( top, #6bb2ff, #2288dd);

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);

            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";

            color:#FFF;

        }

        /*此处我们主要使用了CSS的Gradient、border-radius、text-shadow等属性制作了面板标题的默认状态和当前状态的样式风格。*/

        /*3、制作三角效果*/

        .accordionMenu h2:before {

            content:"";

            border: 5px solid #fff;

            border-color: #fff transparent transparent;

            width: 0;

            height: 0;

            position:absolute;

            right: 10px;

            top: 15px;

        }

        .accordionMenu :target h2:before {

            border-color: transparent transparent transparent #fff;

        }

        /*上面样式主要使用了CSS3的伪类“:bofore”配合“border”制作三角形*/

        /*4、展开样式 这一步是最为关键的一步，CSS3的伪类“:target”实现点击面板标题时，改变面板主内容“p”的高度。*/

        .accordionMenu :target p {

            overflow: auto;

            height:100px;

        }

    </style>

</head>

<body>

    <div class="accordionMenu">

        <div class="menuSection" id="brand">

            <h2><a href="#brand">Brand</a></h2>

            <p>content for Brand</p>

        </div>

        <div class="menuSection" id="promotion">

            <h2><a href="#promotion">Promotion</a></h2>

            <p>content for promotion</p>

        </div>

        <div class="menuSection" id="event">

            <h2><a href="#event">Event</a></h2>

            <p>content for Event</p>

        </div>

    </div>

</body>

</html>

效果图：

target的应用

CSS3属性:target来制作一个非常简单的动画口风琴的效果。

CSS3 target伪类的简介

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如“#brand”，target就是用来匹配ID为“brand”的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

因为我们讨论的是有关于CSS3的属性，它支持所有现代浏览器，但在IE6-8下无法运行。

“div.accordionMenu”包装了手风琴所有块；

“div.menuSection”包含手风琴每块的标题和主内容

把口风琴每块的标题定义为“h2”

口风琴每块主内容放在了一个“p”中，并与“h2”相邻，当然大家也可以把主内容放置在一个“div”中，容易管理

此处最关键的一点是正如前面介绍“target”，我们使用“target”来达到点击展开动画效果，我们每一块需要ID来配合使用，因此我们在手风琴中的每一块中定义了一个ID号，并且在标题中的“<a>”链接的“href”属性链接了相对应块的ID号。

CSS制作垂直口风琴2的更多相关文章

CSS3制作的垂直口风琴1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
垂直口风琴菜单3（jquery）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
CSS制作水平垂直居中对齐多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

随机推荐

ESP8266-向物联网云平台发送数据--dweet
方法一: //向物联网平台发送数据 //发送数据格式: https://dweet.io/dweet/for/my-thing-name?hello=world 免费平台 //my-thing-nam ...
Python私有变量（Private Variable）
Variables can be private which can be useful on many occasions. A private variable can only be chang ...
消息中间件之 RabbitMQ
文章内容来源 https://www.cnblogs.com/jun-ma/p/4840869.html 延伸阅读文章 https://blog.csdn.net/growing_duck/artic ...
对postcss以及less和sass的研究
1.postcss PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的抽象语法树结构(Abstract Syntax Tree,AST),第 ...
JetSonNano darknet yolov3工程通过CMakeLists.txt配置编译环境
CMakeLists.txt 写的比较糙,有疑问欢迎咨询. option(GPU ON) option(CUDNN ON) option(OPENCV ON) cmake_minimum_requir ...
Codecombat 游戏攻略（计算机科学三）
第二关赋值运算符-=字符串拼串循环语句while // 你可以把字符串连起来,或者把数字连接到字符串. // 一起唱歌,使用字符串连接: // X potions of health on the ...
asp.net (web)选择文件夹上传文件
1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
Are We Ready for SDN? Implementation Challenges for Software-Defined Networks
Name of article:Are We Ready for SDN? Implementation Challenges for Software-Defined Networks Orig ...
3D Computer Grapihcs Using OpenGL - 11 Model View Projection Matrices
本节我们将绘制一个3维物体,立方体. 如果要渲染3D物体,我们需要了解MVP(Model View Projection),它表示三个转换矩阵.实际上这个名字不够明确,更加确切的释义如下: Model ...
abc136
第一次打ABC 题目简单,但我菜 E - Max GCD 可以任选两个数,一个减去1,一个加上1,可以操作$0,\cdots,K$次,求操作后数组最大GCD 枚举数组之和的因子,试图找到符合题意的最大 ...

CSS制作垂直口风琴2

CSS制作垂直口风琴2的更多相关文章

随机推荐

热门专题