Welcome, Old Sport!

简易的手风琴式切换功能CSS & jQuery

by ilikecss ON 2010/10/08 15632

以前发布过一款手风琴式的切换菜单,现在这款我觉得代码更合理,兼容性更强一些,而且简单易制作。网上也有许多插件,但需要花钱购买,我想把代码稍微修改下自己觉得可以使用就可以了,我想国人因该不会花上将近 800 人民币去购买一款 jQuery 插件。

Step1. 创建HTML

<div id="accordion-1">
<dl>
    <dt>First slide</dt>
    <dd><h4>LUFFY</h4><p><img src="images/pic_one.jpg" alt="LUFFY" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
    <dt>Second slide</dt>
    <dd><h4>ZORO</h4><p><img src="images/pic_two.jpg" alt="ZORO" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
    <dt>One more slide</dt>
    <dd><h4>NAMI</h4><p><img src="images/pic_three.jpg" alt="NAMI" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
    <dt>Another slide</dt>
    <dd><h4>SANJI</h4><p><img src="images/pic_four.jpg" alt="SANJI" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
    <dt>Wow one more</dt>
    <dd><h4>USOPP</h4><p><img src="images/pic_five.jpg" alt="USOPP" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
    <dt>Last one</dt>
    <dd><h4>CHOPPER</h4><p><img src="images/pic_six.jpg" alt="CHOPPER" />One Piece is a manga and anime series created by mangaka Eiichiro Oda. One Piece focuses on a ragtag crew of pirates called Straw Hat Pirates led by Captain Monkey D. Luffy. Luffy's greatest ambition is to obtain the world's ultimate treasure, One Piece, and become Pirate King.<br /><a href="#" class="more">Read more</a></p></dd>
</dl>
</div>

Step2. 创建CSS

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
.easy-accordion { display: block; position: relative; overflow: hidden; padding: 0; margin: 0;}
.easy-accordion dt,.easy-accordion dd { margin: 0; padding: 0;}
.easy-accordion dt,.easy-accordion dd { position: absolute;}
.easy-accordion dt { margin-bottom: 0; margin-left: 0; z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd { z-index:1; opacity: 0; overflow: hidden;}
.easy-accordion dd.active { opacity: 1;}
.easy-accordion dd.no-more-active { z-index: 2; opacity: 1;}
.easy-accordion dd.active { z-index: 3;}
.easy-accordion dd.plus { z-index: 4;}
.easy-accordion .slide-number { position: absolute; bottom:0; left: 10px; font-weight: normal; font-size: 1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
dd p {line-height: 120%}
#accordion-1 { width: 728px; height: 245px; padding: 10px; background: #fff; border: 1px solid #b5c9e8;}
#accordion-1 dl { width: 728px; height: 245px; color: #294F88;}
#accordion-1 dt { height:46px; line-height: 44px; text-align: right; padding:0 15px 0 0; font-size:1.1em; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; text-transform:uppercase; letter-spacing:1px; background: #fff url(../images/slide-title-inactive-1.jpg) no-repeat; color:#26526c;}
#accordion-1 dt.active { cursor: pointer; color:#fff; background:#fff url(../images/slide-title-active-1.jpg) no-repeat;}
#accordion-1 dt.hover { color: #68889b;}
#accordion-1 dt.active.hover { color: #fff;}
#accordion-1 dd { padding: 25px; background: url(../images/slide.jpg) repeat-x; border:1px solid #dbe9ea; border-left:0; margin-right: 3px;}
#accordion-1 .slide-number { color:#68889b; left:10px; font-weight: bold;}
#accordion-1 .active .slide-number { color: #FFF;}
#accordion-1 a { color: #68889b;}
#accordion-1 dd img { float: right; margin: 0 0 0 30px;}
#accordion-1 h4 { font-size: 1.5em; margin-bottom: 10px;}
#accordion-1 a.more { padding-top: 10px; display: block;}
#accordion-1 a.more:hover { text-decoration: underline;}

Step3. 插入jQuery和脚本包

jQuery 参数代码较长请下载使用。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Step4. 如果需要请下载完整代码包

8条评论
  1. #1

    和意未来说道:

    来和你学习新东西了

  2. #2

    Kicker说道:

    ЎHola! їPuedo tomar, Foto de su sitio, Have a nice day

  3. #3

    bet365说道:

    Good day!This was a really fine post!
    I come from itlay, I was luck to find your topic in wordpress
    Also I obtain a lot in your theme really thanks very much i will come again

  4. #4

    elan说道:

    if this demo will be broadcast will be better

  5. Hey Alexis, and pigs fly???

    -Thank You,
    Coleman
    immediate insurance

  6. I like reading your site because you can always get us fresh and cool stuff, I feel that I ought to at least say thanks for your hard work.

    – Henry




TOP