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制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

随机推荐

ubuntu16.04 下安装jdk
1. 在/usr/lib目录下新建jdk mkdir jdk 2. 执行文件移动 sudo mv ./resource/jdk-8u191-linux-x64.tar. ...
Python私有变量（Private Variable）
Variables can be private which can be useful on many occasions. A private variable can only be chang ...
【华容道】题解（NOIP2013提高组day2）
分析这道题很容易想到令f[x][y][x1][y1]表示空白块在(x,y).指定棋子在(x1,y1)时的最少步数,让空白块和四周的棋子交换,当空白块要和指定棋子交换时,把指定棋子移动,搞一下BFS就 ...
JavaScript正则表达式简介（一）
一.正则表达式正则表达式Regular Expression,可以简写为regexp.regex或是RE. 正则表达式使用单个字符串来描述或是匹配一系列符合某个句法规则的字符串模型. 按照某种规则去 ...
.NET(c#) 移动APP开发平台 - Smobiler(2) - 平台介绍
看到大家很多人在后台问我一些问题,所以准备写一个系列了,下面给个目录目录: .NET(c#) 移动APP开发平台 - Smobiler(1) 环境的搭建及上手第一个应用类似开发WinForm的方式 ...
APK文件结构和安装过程
APK文件结构Android应用是用Java编写的,利用Android SDK编译代码,并且把所有的数据和资源文件打包成一个APK (Android Package)文件,这是一个后缀名为.apk的压 ...
jetty 启动时出现的问题
启动时出现: 1. NoClassDefFoundError: javax/xml/registry/infomodel/User 是需要导入jaxr-api包, <dependency> ...
Java实体类之间的映射（一对一关系）
如下描述:一个人有有一个身份证一个身份证只能属于某一个人 /** 一个人有有一个身份证一个身份证只能属于某一个人 */ class Person{ //人 private String name; ...
SQL Server中数据去重单列数据合并
sql中我们偶尔会用到对数据进行合并,但其中的某一列数据要进行合并的操作: 如下图,一个用户有多个角色ID,如果我们想要统计一个用户有哪些角色,并且以单列的展现形式,单纯的用DISTINCT去掉肯定是 ...
iView 实战系列教程(21课时)_4.iView 实战教程之布局篇（二）
https://github.com/iview/iview 下载iview的代码 Layout布局大概的样子 Iview的源代码.Layout 组件比较简单,,里面一个slot Sider是最复杂的 ...

CSS制作垂直口风琴2

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

随机推荐

热门专题