Son zamanlarda, okuyucularımızdan biri, site gezinme menüsünü bir jQuery kayan menü çubuğuyla nasıl değiştirebileceğimizi sordu. Böyle bir panel, kullanılabilirliği önemli ölçüde artırabilir mobil versiyonlar Siteler. Bu yazıda, WordPress temalarına nasıl kayan menü çubuğu ekleneceğini göstereceğiz.
Not: Bu makale, orta düzeyde HTML ve CSS bilgisi olduğunu varsayar.
WordPress'te Varsayılan Menüyü Kayan Çubuk ile Değiştirme
Buradaki amaç, bilgisayar kullanıcılarının görebilmesi için temamızın standart menüsünü korurken, küçük bir ekran çözünürlüğü ile kullanıcılara açılır menü çubuğunu göstermektir. tam versiyon Menü. Başlamadan önce, birçok farklı WordPress teması olduğunu anlamak önemlidir ve bu nedenle ince ayar yapmanız gerekecektir. css stilleri tasarımınıza bağlı olarak.
Öncelikle açmamız gerekiyor. Metin düzeltici not defteri yazın ve oluşturun yeni dosya. Aşağıdaki kodu kopyalayıp içine yapıştırın:
(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( sol: 0 ), "yavaş", function() ( $("#toggle") ).html(" 
"); )); ), function() ( $("#popout").animate(( sol: -250 ), "yavaş", function() ( $("#toggle").html(" "); )); )); ))(jQuery);
Yer değiştirmek örnek.com senin için Alan adı site ve değişiklik senin teman mevcut temanızın gerçek klasörüne. Dosyayı bir adla kaydedin slaytpanel.js bilgisayarda. Bu kod, kayan menü çubuğunu değiştirmek için jQuery kullanır. Ayrıca geçiş efektini de canlandırıyor.
FTP istemcinizi açın (Filezilla veya Toplam Amir) ve sitenize bağlanın. Ardından, temanızın dizinine gidin ve içinde zaten bir klasör varsa js sonra aç. Temanızın böyle bir dizini yoksa, oluşturun ve slidepanel.js dosyasını içine yükleyin.
Sonraki adım, menü için bir simge tasarlamak veya bulmaktır. Bunun için en çok kullanılan ikon üç çizgili olandır. Herhangi birinde oluşturulabilir grafik düzenleyici(örneğin, Photoshop'ta) veya Google'da mevcut olanlardan birini bulun. Bu örnekte simge için 27x23px kullanacağız. Oluşturduktan sonra menu.png olarak yeniden adlandırın ve tema dizininizdeki resimler klasörünüze yükleyin.
Bir sonraki adım, kayan menü çubuğu içindir. Aşağıdaki kodu kopyalayıp dosyaya yapıştırmanız yeterlidir. işlevler.php Konular:
wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", dizi("jquery"), "20131010", true);
Artık tüm hazırlık çalışmaları tamamlandı, temanın varsayılan menüsünü değiştirmek gerekiyor. Tipik olarak, çoğu tema bir dosyada bir gezinme menüsü görüntüler. başlık.php Konular. Açığız başlık.php ve buna benzer bir satır bulun:
"birincil", "menu_class" => "gezinme menüsü")); ?>
Buradaki zorluk, küçük ekranlarda kayan menü çubuğunu görüntülemek için temanın menüsünü HTML'ye kaydırmaktır. onu saracağız
example.com'u alan adınızla ve temanızı tema klasörünüzle değiştirin. Değişikliklerinizi kaydedin.
Son adım: CSS kullanımı büyük ekran kullanıcıları için menü simgesini gizlemek ve düşük çözünürlüklü olanlar için görüntülemek için. Ayrıca menü simgesinin konumunu ve kaydırma çubuğunun görünümünü de ayarlamamız gerekiyor. Bu CSS kodunu kopyalayıp temanızın stil sayfasına yapıştırın.
@media ekranı ve (min-width: 769px) ( #toggle ( display:none; ) ) @media screen ve (maks-width: 768px) ( #popout (konum: sabit; yükseklik: %100; genişlik: 250 piksel; arka plan : rgb(25, 25, 25); arka plan: rgba(25, 25, 25, .9); renk: beyaz; üst: 0 piksel; sol: -250 piksel; taşma: otomatik; ) #toggle ( kayan nokta: sağ; konum : sabit; üst: 60 piksel; sağ: 45 piksel; genişlik: 28 piksel; yükseklik: 24 piksel; ) .nav-menu li ( kenarlık-alt:1 piksel katı #eee; dolgu:20 piksel; genişlik: %100; ) .nav-menu li :hover ( arka plan:#CCC; ) .nav-menü li bir ( renk:#FFF; metin-dekorasyon:yok; genişlik:%100; ) )
Temanızın menülerinin farklı CSS sınıfları kullanabileceğini ve yukarıdakilerle çakışabileceğini unutmayın. Bu sorunu, hangi sınıfların sizinkiyle çakıştığını bulmak için Chrome veya Firefox'taki Müfettiş'i kullanarak çözebilirsiniz. Ayrıca, panelin görünümünü sitenin tasarımına uyacak şekilde özelleştirmekte özgür olduğunuzu unutmayın.
Çoğu geliştiricinin web sitelerine, sitenin en üstüne veya altbilgisine yerleştirilen özel Javascript tabanlı açılır paneller eklemeye başladığını fark etmiş olabilirsiniz. Bu paneller, kullanıcının dikkatini çeşitli promosyonlara, ilginç blog gönderilerine vb. çekmek için kullanılır. Bu panellerin bu kadar yaygınlaşmasının temel nedeni elbette sonuçlara odaklanılmasıdır. Bu panelleri sevebilir veya nefret edebilirsiniz, ancak bunların göreve uygun oldukları konusunda kesinlikle hemfikir olacaksınız. Blogunuza kayar paneller eklemek için birçok ücretsiz ve ticari eklenti vardır; Onları bu yazıda daha sonra ele alacağım.
Ücretsiz eklentiler
merhaba çubuğu
Hepsine sahip basit ve mütevazı bir eklenti gerekli araçlar sitenin üst kısmında bir panel oluşturmak için. Böyle bir panel kesinlikle kullanıcının dikkatini çekecektir.
Dikkat Çubuğu
Kullanıcıların dikkatini bazı önemli mesajlara çekmeniz gerekiyorsa, bazı ekstra stiller içeren normal bir div olan bir uyarı paneli oluşturabilirsiniz. Ancak, böyle bir panelin çok can sıkıcı olduğunu ve sitenizin kullanıcılarının pek hoşlanmayacağını hatırlamakta fayda var. Dikkat Çubuğu eklentisinin yardımıyla, sayfanın üst kısmında sizi siteye göz atmaktan alıkoymayacak güzel bir çubuk görüntüleyebilirsiniz. Zengin ayarlar, geliştiricinin panelin düzenini kontrol etmesine yardımcı olacaktır.
Kolay Uyarı Çubuğu
Eklenti, sitenizin en üstüne kullanışlı bir bildirim çubuğu ekler. Bildirimlerde, harekete geçirici mesajı güçlendirmek için bağlantılar bırakabilirsiniz.
Bildirim Araç Çubuğu
Blogunuzun alt bilgisine yerleştirilmiş bir panel. Özel bildirimleri görüntülemenizi sağlar. Eklenti, Statik Araç Çubuğuna dayanmaktadır.
Hızlı Bildirim Çubuğu
Eklenti, sitenin başlığında vurgulanmış bir bildirim oluşturmanıza olanak tanır. Böyle bir bildirim kesinlikle kullanıcıların dikkatini çekecek, böylece basit uyarılardan özel tekliflere kadar her şeyi yerleştirebilirsiniz.
engerek çubuğu
Eklenti, sitenin başlık alanına abone sayısını artırmak için kullanılabilecek bir panel eklemenizi sağlar. Eklenti, satır içi stiller, Aweber ve Feedburner ile entegrasyon, dönüşüm izleme, bölünmüş test ve daha fazlasını içerir.
Ticari eklentiler
Blogunuzun veya web sitenizin üstüne özel paneller eklemenizi sağlayan bir WordPress eklentisi. için farklı bildirimler görüntüleyebilirsiniz. farklı sayfalar, tüm sayfalarda görüntülenecek standart bir panel ayarlayın, vb.
dikkat çekici
Sitenize bir bildirim paneli eklemenizi sağlayan bir eklenti. Bu eklenti ile özel metinleri, Twitter gönderilerini veya RSS beslemelerini kolayca görüntüleyebilirsiniz. Ek olarak, bildirimin görünümünü özelleştirmenize olanak tanıyan çok sayıda özellik vardır.
http://wplift.com/wordpress-notification-bar-plugins/
Merhaba, blog sitesinin sevgili okuyucuları. Bugün, aynı anda birkaç tür sayfa bağlantısı uygulayabilen oldukça işlevsel ve kullanışlı bir upPrev eklentisinden bahsetmek istiyorum. Çalışmalarını (en azından bu makaleyi yazarken) her sayfanın altında bir makale ile görebilirsiniz - sağda benzer materyallerin bir listesini içeren bir açılır panel belirir.
Eklenti yalnızca benzer materyalleri değil, aynı kategorideki önceki makaleleri veya etiket arşivini (yukarıdaki makalede ayrıntılı olarak bahsettiğimiz ve pratik uygulamasını açıkladığım), önceki materyalleri görüntüleyebilir. tüm blogun formatı ve rastgele alınan yayınlar. Ek olarak, gönderi yazarken oluşturursanız, her şey küçük resimlerle tatlandırılabilir.
Bağlama, web sitesi tanıtımında şimdi nasıl bir rol oynuyor?
Genel olarak, site optimizasyonu, daha başarılı tanıtımı için bir numaralı görevdir (iki numara geri bağlantılar). İç faktörler, diğer her şeyin etkisini engelleyebilir ve azaltabilir. Öte yandan, imkansızdır (özellikle anahtar kelimeler içerikte ve dahili bağlantıların çapalarında).
Şimdi terfi için entegre bir yaklaşım sürüyor ve bağlantı kurma bunda oldukça önemli bir yer kaplıyor. Son zamanlarda, herhangi bir şeyi görselleştirmek için infografik kullanmak moda oldu. Seo konusunda benzer birçok akış şeması bulabilirsiniz, örneğin Seoprofi'nin bir sitenin nasıl tanıtılacağına dair bir makalesi vardır. Ne yazık ki, henüz böyle şaheserler yaratmaya hazır değilim, ancak onlardan bahsetmek çok fazla su dökmememe izin verecek.
Hangi bağlantı şeması seçilecek? Oldukça zor bir soru, çünkü daha önce iyi çalışan planların çoğu (hepsi de biraz daha yüksek verdiğim uygulama yöntemlerine bağlantılar) artık bir düzine yıl önce gözlemlenen olağanüstü sonuçları vermiyor. . Arama motorları da öğrenir ve kendi bakış açılarına göre neyin bariz bir hile olduğunu hesaba katmamaya çalışırlar.
Peydrank'ın teorisine göre bir dizi halka şeklinde bağlantı vermek, bu halkaya dahil olan site sayfalarının () statik ağırlığını ciddi şekilde artırmalıdır.
Ancak bu pratikte her zaman işe yaramaz. Tek tek sayfalar dizinden düştüğünde, halkanın kırılması veya işaretlemeleri azaltmak için aramanın, stat ağırlığını hesaplamak için klasik formüle ciddi bir azaltma faktörü eklemesi mümkündür.
Site sayfalarını bağlamanın, artık Yandex'i veya Google'ı memnun etmeyi amaçlayan başka bir görevi vardır. lütfen ziyaretçi. Blogunuzu denemesi için bir makale elbette yeterli olmayacak - ilgi çekmek, geciktirmek ve muhtemelen aboneniz yapmak için onu kesinlikle başka bir yere davet etmelisiniz.
Böylece, bağlantı da etkiler davranışsal faktörler aramanın da dikkate aldığı ve her yıl daha fazla ve daha fazla. Hemen hemen tüm web yöneticileri bunu anlar ve siteye benzer materyallerle, en çok okunan yayınlarla veya aynı kategorideki makalelerle bloklar ekler. Muhtemelen temada başka varyasyonlar da vardır.
Doğal olarak, uygulama seçenekleri dahili bağlantı bir de kitle var. Eklentiler olmadan bile yapabilirsiniz (makalede bir örnek bulunabilir), ancak birçoğu bağlantı için yazılmıştır. En zor şey, blogunuzda mükemmel şekilde çalışan bir seçenek seçmektir.
Ben kendim birçoğunu denedim ve hatta bazıları hakkında yorum yazdım (). Aslında bahsi geçen eklenti, ilgili gönderileri hesaplamak ve bunları blog sayfalarında listelemek için en iyilerden biri.
Ancak verileri, diğer WordPress uzantılarını da kullanarak onları daha renkli veya iddialı hale getirebilir. YARP ile ilgili aynı makalede, benzer gönderilerin bu formda görüntülenmesine izin veren İlgili Mesajlar Slider eklentisi ile verilerini kullanmanın bir örneğini verdim:
Peki ya da şöyle:
Bugün kahramanımız aradı yukarıÖnceki Ayrıca, Yet Another Related Posts Plugin veri tabanından nasıl bilgi alınacağını bilir ve bunu doğru yapar, çünkü her seferinde tekerleği yeniden icat etmeye gerek yoktur. Aslında, bu mühendislik mucizesinin olanaklarını açıklamaya geçelim.
UpPrev eklentisi ile seçenekleri bağlama
Bu tarzlara dokunmadım, çünkü aşağıda metinde anlatacağım diğer yoldan (en doğrudan değil) gittim. Sim için ikinci sekmeye gidin:
Bu eklentinin bağlantı oluşturacağı gönderi sayısını seçin. Ama biraz daha düşük, biz sadece sitemiz için bağlantı türünü seçin. Henüz Başka İlgili Gönderiler Eklentisi tabanını kullanarak ilgili gönderiler seçeneğini belirledim (önceden yüklenmiş olmalıdır), ancak ikinci veya üçüncü seçeneği seçerek bir halka bağlantısı ve ayrıca ilk.
Bu işi yalnızca ilgili alanda bir onay işaretiyle belirtilen gönderiler için düzenlemeyi amaçladım. Gönderi başlığına ek olarak, bu panel ayrıca gönderinin başlangıcından veya doldurursanız alıntı alanından birkaç kelimeyi (sayıları en altta ayarlanır) görüntüleyebilir. Bana gereksiz geldi.
Üçüncü sekme, kullanmadığım bu paneldeki bağlantıların tıklanma sayısını izlemek için kullanılır. Ancak dördüncü sekmede önbelleği etkinleştirdim. Beşinci sekmede panelin cep telefonlarında görünmesini engelledim ama tabletlerde kalmasına itiraz etmedim:
Pekala, hepsi bu, upPrev ayarları bitti, ancak panelin görünümünü Yet Another Related Posts Plugin ayarlarında zaten değiştirdim.
Kaydırmalı içeriğin görünümünü özelleştirme
Orada benzer gönderileri görüntülemekten sorumlu olacak bir şablon dosyası seçtim (bu uzantıyla çalışmanın özü ve özellikleri için yukarıdaki bağlantıya bakın):
O. şimdi upPrev eklentisi tarafından görüntülenen benzer gönderiler listesinin görünümü (kayan panelde), tema klasörümdeki () yarpp-template-list.php dosyamda kayıtlı kod tarafından kontrol ediliyor. Blogunuz gönderiler için küçük resimler oluşturuyorsa, onların desteğiyle Yet Another İlgili Gönderiler Eklentisi cephaneliğinden bir şablon seçmek mantıklıdır.
Bu dosyanın kodu:
-
have_posts()): $postsArray = dizi(); while ($ Related_query->have_posts()) : $ilişkili_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // virgülle ayırarak ilgili öğelerin bir listesini yazdırın else:?>
Alakalı Gönderi Yok.
Gördüğünüz gibi, giden panelin başlığının bulunduğu yer burasıdır, bu nedenle hataları önlemek için (gerekirse) bu dosyayı BOM olmadan UTF-8 kodlamasına dönüştürmeniz gerekir (). Sizi bilmem ama ben oldukça uzun zamandır ana karakter olarak yaşıyorum. Not defteri düzenleyicisi++ () ve içinde bu dönüşüm şu şekilde yapılır:
Bu kodun yalnızca bir banal oluşturduğu açıktır. html listesi() ve koddaki sınıflar için stil dosyasında belirtilen CSS özellikleri görünümden sorumludur. Benim durumumda, bu stiller şöyle görünür:
A.oy (color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;kenar boşluğu: 5px 0;kenarlık: noktalı 2px #ccc;) li.eto:hover (metin-dekorasyonu:altı çizili;) div.oyy (kenar boşluğu:0 0 0 0;dolgu:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;renk:#666;)
Lampochka sınıfı yeşil onay işaretleri ekler. css kodu benim için base64 kodunu kullanarak ayarlandı (bu kodu bir yere kopyaladım). İlgileniyorsanız, style.css'ime bir göz atın. Tamam şimdi her şey bitti. Bir şey unuttuysanız, sorun. Doğru, bu bağlantı seçeneğini bir ay önce kurdum ve bu süre zarfında kafamdan bir şey çoktan kayboldu.
Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz
ilginizi çekebilir
Yet Another Related Posts eklentisindeki şeffaf piksel http://yarpp.org/pixels nasıl kaldırılır ve yazı nasıl değiştirilir 
Dahili Bağlantı için İlgili Yazılar Eklentisini Kullanarak WordPress'te İlgili Yazılar Listesi Oluşturma (Küçük Resimlerle) 
Diğer İlgili Yazılar ve İlgili Yazılar ile Web Sitesi Davranış İstatistiklerini Nasıl İyileştirirsiniz WordPress için Slider Eklentileri 
Basit Sayaçlar ve Kategori ve Sayfa Simgeleri - güzel RSS ve Twitter sayaçlarının yanı sıra WordPress'teki kategoriler ve sayfalar için simgeler 
Blogumdaki WordPress eklentileri (web sitesi) Siteniz için kaydırıcılar ve slayt gösterileri - hangi seçenekler var ve jQuery Slider komut dosyalarının nasıl kullanılacağı 
Breadcrumb NavXT eklentisini kullanarak WordPress'te Breadcrumbs (bağlamayı güçlendirme) 
Sayfa oluştururken WordPress'te bellek tüketimini azaltma - yerelleştirme dosyasını değiştirmek için WPLANG Lite eklentisi 
WP-PageNavi - WordPress Blogu için Sayfa Gezinme - Kurulum, Yapılandırma ve Değişiklik dış görünüş sayfalandırma 
Takvimize edin! - WordPress için Etkinlik Takvimi 
WordPress'ten posta göndermiyor ve çalışmıyor görsel düzenleyici- SMTP'yi Yapılandır ve Düzenleyici Düğmeleri Sonrası eklentileri ile çözüm
Nasıl navigasyon menüsü siteye göre, kullanıcı profili menüsü vb. gizleyebilirsin ve tıkladığında ve üzerine geldiğinde görünürler. Bazıları sayfanın kullanılabilirliğinin bundan zarar gördüğünü söyleyebilir. Sanmıyorum, sayfa daha temiz hale geldikçe, bu da gezinmenin daha kolay olduğu anlamına geliyor. Bağlantılar dağında bir kişinin kafası karışmaz.
Bugün bir koleksiyon yaptım slayt panelleri, varsayılan olarak sayfada gizlidir. Aramak Menü, ilgili simgeye tıklamanız veya fareyle üzerine gelmeniz gerekir. Bu teknik, web tasarımına tek ekranda birçok öğeyi işaretleyemediğiniz mobil uygulamalardan geldi. Zamanla, bu tür paneller web sitelerine taşındı. Bu koleksiyon öncelikle mobil geliştiriciler için faydalı olacaktır. Küçük bir ekran çözünürlüğü ile bu görünecektir giden navigasyon ve normal, büyük monitörlerde herkesin alışık olduğu düzenli bir menü oluşturabilirsiniz. Böylece, mobil cihazı olan bir kişi, uzun süredir kullanmaya alıştığı için sitenizde kafası karışmaz. slayt panelleri, çünkü akıllı telefonundaki tüm uygulamalar aynı prensipte çalışıyor.
Bu koleksiyonun içerdiğini belirtmek isterim eklentiler, sadece altında bilenmiş mobil siteler ve geniş monitörlerde kullanımları uygunsuz olacaktır. Herhangi bir web sitesine uygun evrensel paneller olmasına rağmen. Demoyu görün ve ihtiyaçlarınıza uygun olanı seçin.
Açılır paneller üzerinde çalışır. Sitenize böyle bir menüyü uygulamak zor olmayacak ve geliştiricilerin siteleri detaylı talimatlarürünlerini kullanma konusunda.
Yakında Postovoy web sitesini yeniden tasarlamayı planlıyoruz ve aşağıdakilerden birini kullanacağız. jquery eklentileri hangileri aşağıda sunulmuştur.
Yani. İşte bir koleksiyon 20 jquery açılır kaydırma çubuğu eklentisi siteniz için. Yorum bırakmayı unutmayın.
Kaydırılabilir Yan Menü
Jquery'de güzel bir kaydırmalı gezinme menüsü. Hem mobil hem de normal siteler için idealdir.
Tuval Dışı Gezinmeler için Geçişler
3D dahil olmak üzere çeşitli animasyon efektleriyle gösterilecek bir slayt paneli düzenlemenizi sağlayan son derece güçlü bir eklenti. Eklenti 14 animasyon efekti içerir.
jPanelMenü
Gezinme çubuğu tarzda yapılır iOS Uygulamaları. Mobil site geliştirmeyi kolaylaştıracak hafif ve hızlı bir menü.
yeniden oluştur Google Bağlantı Noktası Menü
Kayar panel, Google Nexus menüsüne benzetilerek yapılmıştır.
bigSlide - Jquery slayt gezinme çubuğu
Slayt paneli hem mobil site hem de normal site için uygundur. Aramak için üç çizgiyi gösteren simgeye tıklamanız gerekir.
Çok Seviyeli Push Menü
Jqutry eklentisi, bigSlide'a benzer şekilde çalışır. Simgeye tıkladığınızda panel çağrılır. Bu menünün avantajı, çok seviyeli bir yapıyı desteklemesidir.
Kutu Kapağı Menüsü
3D efektli çok güzel slayt gezinme çubuğu.
Hareketli Kenarlık Menüleri
Ekranın köşesindeki artı işaretine tıklayarak küçük bir yan panel simgelerle. Gizlemek için "-" sembollü simgeye tıklamanız gerekir.
Snap.js
Slayt paneli mobil cihazlar için tasarlanmıştır. Menü, fare imleci ile ekran sürüklenerek veya açıksa mobil cihaz, parmak.
Kaydır ve Bas Menüler
|
Meny
Jquery eklentisi, sitenize 3D efektli harika bir slayt gezinme çubuğu uygulamanıza olanak tanır.
mb.jquery
Diğer panellerden farklı olarak, ekranın üst kısmında hareket ettirmek yerine görünür. Blokta herhangi bir html, metin ve genel olarak istediğiniz her şeyi koyabilirsiniz.
Android Yuvası
Panel, mobil siteler için keskinleştirilmiştir ve ekranın alt kısmında bulunur. Basıldığında, herhangi bir bağlantı yerleştirebileceğiniz simgeler görünür.
İçerik kaydırma çubuğu
Serin sürgülü panel iki seviye şeklinde yapılmıştır. Birincisi menü. İkincisi içerik. Şimdi bu etki, tasarımcılar ve web geliştiricileri arasında çok popüler. Birçok uygulama bulabilirsiniz. Microsoft'un mailer'ı benzer bir prensipte çalışır.Elbette sık sık sitelerin sayfalarında tanıştınız, geri çekilebilir paneller farklı tür ve tam otomatik, belirli bir zaman aralığı ile üst, alt, sağ veya sol diyen veya tıklama ile etkinleştirilen düzenlemeler. Kural olarak, şimdilik kullanıcının gözünden gizlenen bu tür panellerde bazı Ek Bilgilerönemli ve çok önemli değil. Örneğin, abonelik formları, sosyal medya widget'ları, bağlantılar, etiketler, iletişim bilgileri vb. kısacası her şey.
var büyük miktar Javascript'te sürgülü panellerin uygulanması için hazır çözümler, çeşitli CMS için modüller ve eklentiler, ayrı jQuery eklentileri, ama biraz, gözüme çarptı, tamamen çalışma yolları saf CSS.
Uzun zamandır böyle bir şeyi karıştırmak istiyordum, gizli onay kutularını kullanma mekanizması iyi biliniyor ve anlaşılabilir, ancak bir şekilde ellerim ona ulaşmadı. Ve böylece, CodePen'in tozlu depolarında birine rastladıktan sonra, denemeye ve dağa vermeye karar verdim, oldukça çalışan, biraz değiştirilmiş ve kardeşimiz için uyarlanmış, geri çekilebilir versiyonum. üst panel saf CSS'de, ne olduğu ortaya çıktı))).
Örneğe baktık, orijinaliyle karşılaştırdık ve şimdi, kimin ihtiyacı var, birlikte nasıl çalıştığına bir göz atalım. Bir kez daha, js yok, sadece bozulmamış html ve "sihirli" css işi yapacak.
HTML düzeni
Üç ana öğeden oluşur: bir temel kap, bir içerik bloğu ve bir panel açma/kapama düğmesi.
Gördüğünüz gibi, varsayılan olarak gizli ve etkin olmayan panel tasarımında type=" " bayrağı var. bir etiketle