Elegant Accordion with jQuery and CSS3 實際執行畫面 |
使用方法:
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
第二步 設計選單滑動的內容
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">標題</div>
<div class="bgDescription"></div>
<div class="description">
<h2>標題</h2>
<p>內容</p>
<a href="#">連結</a>
</div>
</li>
<li class="bg2">
<div class="heading">標題</div>
<div class="bgDescription"></div>
<div class="description">
<h2>標題</h2>
<p>內容</p>
<a href="#">連結</a>
</div>
</li>
<li class="bg3">
<div class="heading">標題</div>
<div class="bgDescription"></div>
<div class="description">
<h2>標題</h2>
<p>內容</p>
<a href="#">連結</a>
</div>
</li>
<li class="bg4">
<div class="heading">標題</div>
<div class="bgDescription"></div>
<div class="description">
<h2>標題</h2>
<p>內容</p>
<a href="#">連結</a>
</div>
</li>
</ul>
第三步 寫入 CSS 樣式表
ul.accordion{
list-style:none;
position:absolute;
right:80px;
top:0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
float:right;
width:115px;
height:480px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
background-image:url(../images/4.jpg);
}
ul.accordion li.bleft{
border-left:2px solid #fff;
}
ul.accordion li .heading{
background-color:#fff;
padding:10px;
margin-top:60px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
position:absolute;
width:480px;
height:175px;
bottom:0px;
left:0px;
display:none;
}
ul.accordion li .description h2{
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:45px;
color:#444;
text-align:left;
margin:0px 0px 15px 20px;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
line-height:14px;
margin:10px 22px;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a{
position:absolute;
bottom:5px;
left:20px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#888;
}
ul.accordion li .description a:hover{
color:#333;
text-decoration:underline;
}
ul.accordion li .bgDescription{
background:transparent url(../images/bgDescription.png) repeat-x top left;
height:340px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:none;
}
第四步 寫入 JavaScript 運行程式
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
作者網站:http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/
檔案大小:751 KB(包含範例)
檔案下載:http://tympanus.net/Tutorials/ElegantAccordion/ElegantAccordion.zip
檔案備份:下載
0 意見