製作新鮮的內容手風琴

在開發網站時，能夠以一種既有趣又引人注目的方式組織內容是一項巨大的挑戰。更不用說通過在單個視圖中向訪問者展示過多數據來防止信息過載的重要性。

這就是為什麼有些技術可以幫助設計人員對內容進行分組並僅在用戶對您提供的內容感興趣並與頁面交互時才顯示。

今天我們將藉助 CSS、jQuery 和 easing 插件製作一個簡單但引人注目的手風琴，以實現一些花哨的效果。

在我們繼續第一步之前，您可以繼續下載演示文件。

第 1 步 - XHTML

從演示中可以看出，手風琴分為四個部分，每個部分由 LI 定義 類名為 menu 的元素 .它們位於主無序列表（ul.container ) 並共享一個通用的 XHTML 結構：

demo.html

<li class="menu"> <!-- This LI is positioned inside the main UL -->

<ul> <!-- This UL holds the section title and content  -->

<!-- The click-able section title with a unique background: -->
<li class="button"><a href="#" class="green">Kiwis <span></span></a></li>

<!-- The dropdown list, hidden by default and shown on title click: -->
<li class="dropdown">

<ul> <!-- This list holds the options that are slid down by jQuery -->

<!-- Each option is in its own LI -->
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
<li><a href="http://www.flickr.com/search/' alt='' />

Step 2 - CSS
If styled properly, even the simplest idea can make a big difference in the overall feeling your site gives to the visitors.
It is important to take extra care so that the CSS code you produce is valid and that it works well across different browsers. I've included all the styles used in the demo below:
demo.css - part 1
body{
    /* Setting default text color, background and a font stack */
    color:#cccccc;
    font-size:13px;
    background: #302b23;
    font-family:Arial, Helvetica, sans-serif;
}

ul{
    margin:0;
    padding:0;
}

ul.container{
    /* The main UL */
    width:240px;
    margin:0 auto;
    padding:50px;
}

li{
    list-style:none;
    text-align:left;
}

li.menu{
    /* The main list elements */
    padding:5px 0;
    width:100%;
}

li.button a{
    /* The section titles */
    display:block;
    font-family:BPreplay,Arial,Helvetica,sans-serif;
    font-size:21px;
    height:34px;
    overflow:hidden;
    padding:10px 20px 0;
    position:relative;
    width:200px;
}
 

 這裡我們為主要的 UL 設置樣式 - ul.container ，它包含其餘的元素。最後，我們定義了充當章節標題的超鏈接的外觀（注意實際的背景圖像尚未分配）。
 
demo.css - 第 2 部分
 
li.button a:hover{
    /* Removing the inherited underline from the titles */
    text-decoration:none;
}

li.button a span{
    /* This span acts as the right part of the section's background */
    height:44px;
    position:absolute;
    right:0;
    top:0;
    width:4px;
    display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(img/green.png) repeat-x top right;}

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(img/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
    /* The expandable lists */
    display:none;
    padding-top:5px;
    width:100%;
}

.dropdown li{
    /* Each element in the expandable list */
    background-color:#373128;
    border:1px solid #40392C;
    color:#CCCCCC;
    margin:5px 0;
    padding:4px 18px;
}
 

 這裡最有趣的部分是我們如何為每個部分顏色指定單獨的背景屬性。我們還為 span 元素提供了一個背景，它包含背景圖像的右側部分，如下圖所示。
  
第 3 步 - jQuery 

 在我們佈置好手風琴的佈局之後，是時候讓它打勾了。首先我們需要在頁面中包含一些腳本（這段代碼放在文檔的 head 部分）：
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>
 

 我們首先包含來自 Google 的 CDN 的 jQuery 庫，它將幫助我們編寫緊湊且兼容的代碼。後來我們包含了緩動插件，最後是我們自己的腳本文件，我將在下面詳細介紹。
 

 您可能已經從演示中註意到，滑下效果不是您常規的線性運動，而是更像彈跳和活潑。這是在 easing 的幫助下實現的 jQuery插件。它提供了許多有趣的效果，可以將這些可愛的細節融入您的網頁設計中。
 

 現在讓我們繼續我們自己的腳本文件。
 
script.js
 
$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";

    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e){

        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();

        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');

        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();
    })

});
 

 我們首先設置 slideUp 將使用的緩動方法 /向下滑動 效果，然後將特製的函數綁定到 li.button 的點擊事件 超鏈接。當點擊這個鏈接時，我們得到對應的li.dropDown 並顯示它，隱藏所有其他的。
 

 我正在使用 slideToggle jQuery 方法，它檢查元素是否已經在頁面上可見，並決定是否顯示或隱藏它。這樣，當您單擊手風琴的打開部分時，它會收縮而不是保持打開狀態。
 

 在此之後，我們使用 e.preventDefault() 防止瀏覽器離開頁面（畢竟我們只是點擊了一個鏈接，這是正常行為）。
 

 有了這個，我們的果味 CSS 和 jQuery 手風琴就完成了！
  
結論
 

 這次我們創建了一個新的手風琴腳本，它既可以輕鬆修改，也可以嵌入。
 

 你能想到這個腳本有什麼很棒的用途嗎？
 

 你想怎麼改？