JQuery ile akordeon şeklinde site için Dikey menü

Menü, bildiğiniz gibi - sitenin ayrılmaz bir parçası. İlginç gezinme çevrimiçi kaynak faiz ziyaretçilere yapabiliyor. Buna ek olarak, herhangi bir menünün önemli bir özelliği - Kompaktlığı. Basit dikey menü kolayca HTML ve CSS kullanarak oluşturdu. Ama biz daha ileri gidip: Bize jQuery yardımıyla menü- "akordeon" oluşturmak için öğrenelim.

Bir menü- "akordeon" Oluştur

Bir akordeon şeklinde bir dikey menü nedir? Bu gezinmek için kolay oluşturur ve şık bir siteyi veren bir açılır liste vardır. Menü bu şekilde gerçekleştirilen, sen alt öğeleri bir sürü açmak için izin verir. İstenen öğeye mouse 'onlara Erişim oluşur. Birisi jQuery kullanımı olmadan bu şekilde basit bir menü yapmak mümkün olduğunu söyleyebiliriz. Evet, öyle. Ama bu nesne akıllı telefonlar veya tabletler sahiplerine çok faydalı olmaz. Hepimiz hitap, dikey bir menü oluşturalım. Sonra, bir navigasyon stil rengini değiştirerek, herhangi bir siteye tasarımı ayarlamak mümkün olacaktır.

HTML kodunu

Yani, bizim dikey menü oluşturmak için, önce aşağıdaki satırları içerecek olan HTML kodu çevirmek zorunda:

Accord_menu.html adlı bir dosyada bu kodu kaydedin.

Gördüğünüz gibi, biz bir sırasız liste oluşturduk. 3 ana nokta oluşur:

- fotoğraflar;

- filmler;

- kitapları.

Her öğenin birkaç paragraf vardır. # Olduğunda, Bağlantı eklemek gerekir. Şimdi sıra stil tanımlamak için önemlidir. Tüm Internet kaynağının görünümünü bağlıdır. onun tasarımına uyum entegre olmalıdır site için Dikey menüsü.

CSS kodu

stilleri ile zor olmamalı. Biz bu örnekte bir degrade dolguyu kullanan tek unutmayın. İşte CSS-kodudur:

renk CSS-dosyasında belirtilen, beden etiketleri soldaki listede öğeleri kaldırılır. Size üzerine geldiklerinde her öğe ve alt menüde nasıl davranması belirlendi. Örneğin:

# E1fee2 - Bu soluk yeşil renk alt.

# C4f0f7 Eğer bunların üzerine gelerek -golubovaty gölge alt.

Ekran özelliği gerekli dolgu ve boyutunu ayarlamak için blok değerini istiyoruz. renk, boyut, yazı tipi, konum - her şey olarak CSS dosyasında tarif edilir. accordionmenu_my1.css, örneğin, diyelim.

jQuery menü iyileştirmeler Bağlama

Hatırlayacağınız gibi, hedefimiz - dikey menü jQuery'i oluşturun. Eğer bu teknoloji ile aşina değilseniz, merak etmeyin. Biz Google veri havuzu kullanmak ve JQuery komut dosyası bağlayın. Bu daha çekici menü yapacaktır. jQuery Köprü Metni Biçimlendirme HTML ve JavaScript etkileşime dayalı bir JavaScript kütüphanesidir. jQuery unsurların içeriğini ve özelliklerini erişmesini sağlar.

Yani, HTML dosyasının vücutta gerekli komut dosyası bağlayıp at yarışı elemanları hariç 2 değişkenlerin depolanması için kurallar koyar. Bir fare tıklaması gerçekleşmemiş üzerinde birinin açılışında diğer sekmeleri kapatmayı, kod katkıda bulunun. İşte böyle görünüyor:

Tüm değişiklikleri kaydet tarayıcının menüsünde neye benzediğini görmek. Yani ortak bir sonucudur: Sonuç olarak, biz her zaman onların tercihlerine bağlı olarak, değiştirebilir çekici bir menü geldi. Ve jQuery, CSS alanında yeni bilgi edinme, onların becerilerini geliştirerek, sitenin benzersiz öğeleri yaratacaktır.