使用jQuery創建簡單的手風琴菜單

06-19

讓我們創建一個簡單的手風琴菜單使用jQuery。手風琴菜單是一些動畫效果的菜單。它有幾頂行菜單點擊它時，切換到打開子菜單選項的項目。另一個頂層菜單被選中時，其他打開的菜單將自動摺疊和保存有用的屏幕面積。我們將使用jQuery效果動畫手風琴菜單。jQuery提供淡入/淡出效果，但手風琴菜單看起來更逼真，如果我們用出來的效果/幻燈片的幻燈片。第1步：為您的菜單創建HTML 首先，我們將創建的HTML顯示出菜單。我們將使用HTML中渲染菜單，然後我們將使用CSS來應用一些樣式的列表。下面將我們的菜單代碼：

ul id="accordion"> <li><div>Sports</div> <ul> <li><a href="#">Golf</a></li> <li><a href="#">Cricket</a></li> <li><a href="#">Football</a></li> </ul> </li> <li><div>Technology</div> <ul> <li><a href="#">iPhone</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> </ul> </li> <li><div>Latest</div> <ul> <li><a href="#">Obama</a></li> <li><a href="#">Iran Election</a></li> <li><a href="#">Health Care</a></li> </ul> </li></ul>

如果您的HTML頁面，現在看起來應該是這樣：

第2步：使用CSS應用到你的菜單一些風格讓適用於一些我們的菜單樣式。複製後，在你的HTML文件中的CSS代碼：

#accordion { list-style: none; padding: 0 0 0 0; width: 170px;}#accordion div { display: block; background-color: #FF9927; font-weight: bold; margin: 1px; cursor: pointer; padding: 5 5 5 7px; list-style: circle; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}#accordion ul { list-style: none; padding: 0 0 0 0;}#accordion ul{ display: none;}#accordion ul li { font-weight: normal; cursor: auto; background-color: #fff; padding: 0 0 0 7px;}#accordion a { text-decoration: none;}#accordion a:hover { text-decoration: underline;}

請注意，在上面的CSS代碼，我們應用圓角的CSS我們的菜單，以改善外觀。雖然這項技術適用於所有現代的Web瀏覽器，但它不會使用Internet Explorer。如果我們想改變一下列印Internet Explorer的感覺，我們可能要包括IE特定的樣式。我們的HTML頁面，一旦我們套用的樣式，我們的菜單看起來像這樣：

步驟3：給生活菜單使用jQuery 因此，我們的基本骨架是完整的。我們已經使用了HTML代碼的手風琴菜單內容顯示，然後應用CSS樣式表，以提高可用性。讓我們的生活增添使用jQuery的手風琴菜單。複製下面的jQuery代碼的HTML頁面：

$("#accordion > li > div").click(function(){ if(false == $(this).next().is(":visible")) { $("#accordion ul").slideUp(300); } $(this).next().slideToggle(300);});$("#accordion ul:eq(0)").show();

如果您發現上面的代碼中，我們取得了第一個菜單項，在手風琴菜單可見。

$("#accordion ul:eq(0)").show();