在使用jQuery手風琴的形式現場垂直菜單

在菜單中，你也知道 - 該網站的一個組成部分。 有趣的導航在線資源能夠興趣的訪問者。 此外，任何菜單的一個重要性質 - 它的緊湊性。 一個簡單的垂直菜單輕鬆使用HTML和CSS創建。 但是，我們更進一步：讓我們學習如何創建菜單 - “手風琴”與jQuery的幫助。

創建一個菜單- “手風琴”

什麼是手風琴狀的垂直菜單？ 這是一個下拉列表，它創建了一個易於瀏覽，並給出了一個時尚網站。 菜單，以這種方式進行，讓你把很多的子項。 當你點擊所需的項目鼠標訪問時，才會發生。 有人可能會說，這有可能使以這種方式一個簡單的菜單，而不使用jQuery的。 是的，它是。 但是這個對象不會是智能手機或平板的業主是非常有用的。 讓我們創建一個垂直的菜單，呼籲所有。 然後，改變顏色造型導航，將有可能調整設計到任何網站。

HTML代碼

因此，要建立我們的垂直菜單，你必須首先撥打HTML代碼，其中將包含以下幾行：

在一個名為Accord_menu.html文件保存此代碼。

正如你所看到的，我們已經創建了一個無序列表。 它由3個主要點：

- 照片;

- 薄膜;

- 書。

每個項目都有幾個段落。 在哪裡＃，你將需要添加的鏈接。 現在，它描述的風格是很重要的。 這一切都取決於你的互聯網資源的外觀。 該網站必須和諧地融為一體，其設計的垂直菜單。

CSS代碼

隨著款式你應該不是難事。 我們注意到，只有在這個例子中使用了漸變填充。 這裡是CSS代碼：

顏色在CSS文件中指定，大小標誌是從左邊的列表中的項目中刪除。 它確定了如何在每個項目和子菜單的行為，當你在它懸停。 例如：

＃e1fee2 -這 淡綠色 子。

＃C4f0f7當你將鼠標懸停在他們-golubovaty陰子。

顯示屬性問塊值來調整必要的填充和大小。 顏色，大小，字體類型，位置 - 一切都在CSS文件的描述。 稱呼它，例如，accordionmenu_my1.css。

連接jQuery的菜單改進

您可能還記得，我們的目標 - 打造一個垂直菜單jQuery的。 如果你不熟悉這項技術，不用擔心。 我們使用谷歌庫，並連接jQuery腳本。 這將使其更具吸引力的菜單。 jQuery是基於超文本標記HTML和JavaScript的相互作用的JavaScript庫。 jQuery的允許您訪問元素的內容和屬性。

因此，連接必要的腳本的HTML文件的主體和設置的規則為2個變量的存儲，除了賽馬元素。 貢獻代碼，在其上有一個鼠標點擊所述一個的開閉其他標籤。 下面是它的外觀：

保存所有更改，看看它看起來像在瀏覽器菜單。 這是一個共同的結果： 因此，我們得出一個有吸引力的菜單，你可以隨時改變，這取決於他們的喜好。 而在jQuery的，CSS的領域獲取新知識，您將創建該網站的獨特元素，提高他們的技能。