首頁 > web前端 > js教程 > Jquery 垂直多層手風琴選單附原始碼下載_jquery

Jquery 垂直多層手風琴選單附原始碼下載_jquery

WBOY
發布: 2016-05-16 15:32:04
原創
1366 人瀏覽過

首先給大家展示下效果圖,喜歡的朋友繼續往下看哦。

這是一款簡單但實用的多層垂直手風琴下拉清單選單。這個多層手風琴選單完全使用CSS來製作,它透過將不同的子選單分組,製作出多層選單的效果。

此多級手風琴選單是透過在checkbox元素上使用:checked偽元素來製作。如果需要一些好看的動畫效果,可以實用插件中提供的main.js文件,它可以提供選單開啟和收縮時左側小箭頭的動畫效果。

 效果示範       原始碼下載

使用方法

HTML結構

這個多級手風琴選單的HTML結構非常簡單:整個手風琴是一個無序列表。如果某個清單項目中包含有子選單,則新增一個input[type=checkbox]和一個label標籤,同時為該清單項目新增一個.has-children的class類別。所有其它標準的列表項都包含在一個a標籤中。

<ul class="cd-accordion-menu">
 <li class="has-children">
 <input type="checkbox" name ="group-1" id="group-1" checked>
 <label for="group-1">Group 1</label>
 <ul>
 <li class="has-children">
  <input type="checkbox" name ="sub-group-1" id="sub-group-1">
 <label for="sub-group-1">Sub Group 1</label>
 <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu --> 
登入後複製

 CSS樣式

此多層手風琴選單僅使用CSS來偵測點擊和展開子選單。它使用的方法是透過checkbox元素,然後透過:checked偽類和相鄰的兄弟選擇器來改變

    元素的顯示模式,從「none」改為「block」。

    首先要確保所有有子選單的清單項目都帶有checkbox元素。當你點擊在一個label元素上的時候,實際上是點擊了對應的checkbox元素:這透過設定label元素的for屬性來實現。接著就可以簡單的隱藏checkbox元素,透過label元素來取代它。

    .cd-accordion-menu input[type=checkbox] {
     /* hide native checkbox */
     position: absolute;
     opacity: 0;
    }
    .cd-accordion-menu label, .cd-accordion-menu a {
     position: relative;
     display: block;
     padding: 18px 18px 18px 64px;
     background: #4d5158;
     box-shadow: inset 0 -1px #555960;
     color: #ffffff;
     font-size: 1.6rem;
    }  
    登入後複製

     JavaScript

    如果你需要為這個手風琴選單添加一些好看的動畫效果,可以使用jQuery和插件中提供的main.js檔案。同時需要在ul.cd-accordion-menu元素上新增.animate class類,它會使小箭頭的方向在開啟和關閉子選單時產生動畫效果。

    以上內容就是本文給大家介紹的Jquery 垂直多級手風琴菜單附源碼下載的全部敘述,希望大家喜歡。喜歡的朋友可以直接點擊下載原始碼哦。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板