Tıklandığında pürüzsüz açılır menü. JQuery'deki açılır menü. Basit açılır menü

Birkaç istek aldıktan sonra açılır menünün nasıl yapılacağına dair bir makale yazmaya karar verdim. Böyle bir menü oluşturmanın en iyi ve en kolay yolu jQuery'ye güvenmektir.

Önce HTML işaretlemesine bakalım

jQuery Basit açılır menüsünü temel alan basit açılır menü

• Ev
• Ürünler
• Hizmetler
• Bize Ulaşın

İçerik

Basit, sırasız bir ul listesi vardır, li etiketleri gezinme menüsünün temelini oluşturur. Daha sonra, aşağıdaki kodu uygun li etiketine ekleyin; bu, açılır listeyi yapılandıracaktır.

Dikkat ederseniz iki şeyi fark edeceksiniz:

1. li etiketinin bir açılır sınıfı vardır.
2. Ana bağlantı ddIcon sınıfına sahiptir.

Açılır sınıf, jQuery'de bir açılır menüyü göstermek/gizlemek için kullanılır. İkinci sınıf olan ddIcon, açılır menüye yönelik bir işaretçi görüntülemek için kullanılır.

Menü stillerinin özel bir yanı yoktur; genel stiller şunlardır:

Kapsayıcı ( genişlik: 960 piksel; kenar boşluğu: 0 otomatik; dolgu-top: 50 piksel; ) .container h1 ( yazı tipi boyutu: 30 piksel; renk: #666; kenar boşluğu: 1em; ) .container nav ( border-radius: 4 piksel; arka plan rengi: #fff; yükseklik: 37 piksel; ) .container nav ul li ( konum: göreceli; kayan nokta: sol; ) .container nav ul li a ( yazı tipi boyutu: 12 piksel; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; text-transform: büyük harf; renk: #545454; dolgu: 13 piksel 15 piksel; görüntüleme: blok; kenarlık sağ: 1 piksel katı #f9f9f9; ) .container nav ul li a.ddIcon ( arka plan: şeffaf url("dd.png) ") tekrarlama yok %86 %52; dolgu: 13px 25px 13px 15px; ) .container nav ul li a:hover ( arka plan rengi: #cc333f; color: #fff; ) .container nav ul li.active a ( arka plan -color: #cc333f; color: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( konum: mutlak; arka plan rengi: # cc333f; dolgu: 15px 15px 20px; genişlik: 172px; sol: 0px; üst: 38px; görüntüleme: yok; ) .container nav ul li .subNav .navSection ( dolgu: 5px 0; ) .container nav ul li .subNav h4 ( kenar boşluğu-bottom: 0,5em; ) .container nav ul li .subNav h4 a ( yazı tipi boyutu: 11 piksel; renk: #edc951; text-transform: büyük harfe dönüştür; border-bottom: 1 piksel katı #D33B47; dolgu: 7px 10px; ) .container nav ul li .subNav h4 a:hover ( color: #edc951; ) .container nav ul li .subNav h4 a span ( float: right; font-size: 10px; color : #fff; -moz-transition: renk 0,5s kolaylık 0s; ) .container nav ul li .subNav h4 a span:hover ( color: #390206 ) .container nav ul li .subNav a ( float: yok; border: yok ; görüntüleme: blok; text-transform: büyük harfe çevirme; renk: #fff; dolgu: 7px 15px; -moz-transition: renk 0,5s kolaylık 0s; satır yüksekliği: 1,3; ) .container nav ul li .subNav:hover ( color : #390206; ) .container .section ( clear: her ikisi de; dolgu: 10px; ) .container .section makale p ( font-size: 16px; color: #488fb8; line-height: 1.3; ) .container .section makale başlığı p ( üst dolgu: 20 piksel; yazı tipi boyutu: 20 piksel; renk: #333; satır yüksekliği: 1,3; kenar boşluğu alt: 0,4 em; )

Artık yeniden canlanmamız lazım Aşağıya doğru açılan menü. En basit jQuery işlevi bu konuda bize yardımcı olacaktır.

$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav))"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" relative ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "yok ")); $(this).removeClass("active"); $("nav ul li").css(("position":"relative", "z-index":"1")); )) ; ));

Her liste öğesi için kendi açılır menünüzü oluşturmak mümkündür: li öğesinin içine .subnav sınıfını içeren bir blok yerleştirin ve ayrıca .dropdown sınıfını li'nin kendisine atayın.

Günümüzde jQuery gezinme menüleri, içinde bağlantılar bulunan metin bloklarından daha fazlasıdır. Gerçekten harika görünen bir gezinme menüsü oluşturmak için JQuery ve CSS3'ü nasıl kullanabileceğinizi paylaştım.

JQuery'nin gücünü kullanarak navigasyon menüsünü dinamik bir menüye dönüştürebiliriz. Şu anda dinamik gezinme oluşturmak için yalnızca CSS3'ü kullanabilseniz de JQuery, menüleri daha da güçlü hale getirir.

Dinamik işlevlerin yanı sıra tasarım da önemli bir rol oynamaktadır. Çünkü ziyaretçiler sitenize geldiklerinde ilk gördükleri şey budur.

Menü sunulamazsa, bu durum kullanıcılara kötü bir kullanıcı deneyimi yaşatacaktır. İyi bir menü tasarımı web sitenizin kalitesini artıracak ve daha iyi bir kullanıcı deneyimi sağlayacaktır.

Bugün size 30 harika jQuery navigasyon menüsü örneği sunuyorum.

Pushy, CSS dönüşümlerini ve geçişlerini kullanan duyarlı, tuval olmayan bir gezinme menüsüdür. Mobil cihazlarda harika çalışıyor. Demoyu mutlaka izleyin, kesinlikle beğeneceksiniz.

Demo | İndirmek

Bu, güzel kaydırılabilir gezinme listeleri oluşturmak için başka bir harika jQuery menüsüdür. Ayırt edici özelliği kaynak dosyaların küçük boyutudur.

Demo | İndirmek

Bu, çok ilginç özelliklere sahip basit, duyarlı bir açılır menüdür. Menü simgesine tıkladığınızda öğe simgelerini içeren bir menü penceresi açılır. Demoya göz atın.

Demo | İndirmek

Slidebars, uygulama stillerini bir tuvale bağlı kalmadan hızlı ve kolay bir şekilde uygulamaya yönelik bir JQuery çerçevesidir. Kaydırma çubukları ayrıca yönlendirme değişikliklerini ve yeniden boyutlandırmayı da yönetir.

Demo | İndirmek

JQuery ve CSS3 kullanarak kare şeklinde animasyonlu bir web sitesi menüsü görüntüleyen JQuery Menüsü. Demoyu izleyerek bundan emin olun.

Demo | İndirmek

Bu jQuery gezinme menüsü, bir sayfayı 3D menüye dönüştürür. Buradaki fikir, bir menü simgesine tıkladığınızda sayfa içeriğinin yana kaydığı ve menünün öne getirildiği bir mobil uygulama tasarımı oluşturmaktır.

Demo | İndirmek

Çeşitli düzeylere ve esnek ancak basit ayarlara sahip duyarlı bir mobil jQuery menüsü oluşturmaya yönelik eklenti. Farklı tarayıcılarla uyumlu olduğundan klavyeyi kullanarak gezinmek mümkündür.

Demo | İndirmek

Açılan alt öğelerle tuvale bağlanan ve bağlanmayan uygulamalar için jQuery menüsü. Çok sayıda seçenek, eklenti ve uzantı sayesinde çok esnek menü özelleştirmesi mümkündür.

Demo | İndirmek

Menüler oluşturmak ve duyarlı özellikleri kolayca eklemek için jQuery eklentisi. Sidr ile web sitenizin çeşitli öğelerinin yanı sıra duyarlı menüler de oluşturabilirsiniz.

Demo | İndirmek

slimMenu duyarlı, çok seviyeli gezinme menüleri geliştirmenize yardımcı olacak küçük bir jQuery eklentisidir. Bunun güzel yanı, birkaç farklı menüye sahip olmanız ve bunların hepsinin tamamen duyarlı olmasıdır.

Demo | İndirmek

Kabın tüm genişliği boyunca yatay bir menü ayarlamanıza olanak tanıyan jQuery gezinme menüsü. Bu eklenti bunu çok kolaylaştırıyor. Ayrıca IE7 desteği de uygulanabilir.

Demo | İndirmek

Bu, dokunmatik ekranlar, fareyle üzerine gelme efektleri ve klavyeyle gezinme desteğiyle harika çok düzeyli menüler oluşturmak için medya sorgularını ve JavaScript'i kullanmanın mobil öncelikli bir örneğidir.

Demo | İndirmek

Fare bir açılır menü öğesinin üzerine geldiğinde olayları tetikleyen jQuery menüsü. Amazon'unki gibi duyarlı açılır menüler oluşturmak için idealdir.

Demo | İndirmek

Menüleri görüntülemenin basit ve sezgisel bir yolunu sunan bir jQuery menü eklentisi. Duyarlı menü listeleri oluşturur. Tüm cihazlarda çalışır!

Demo | İndirmek

Shifter, geçiş düğmesine tıkladığınızda sağ taraftan dışarı kayan slayt menüleri oluşturmak için kullanımı kolay, mobil öncelikli bir jQuery eklentisidir. Yapılandırılacak yalnızca bir maxWidth seçeneği vardır. Mobil cihazlar için çözünürlüğü/yönelimi ayarlamanıza olanak tanır.

Demo | İndirmek

Hamburger, ekranın sağ kenarına bir açılır menü yerleştiren Android Uygulaması tarzı bir slayt menüsü oluşturmaya yönelik bir jQuery eklentisidir. Menü tam boyuta genişletildiğinde içerik alanıyla örtüşür ancak eylem çubuğuyla örtüşmez.

Demo | İndirmek

Focusss, kullanıcıların dikkatini sitenin ana bölümlerine çekmenize ve daha az fark edilen bölümleri daha az fark edilir hale getirmenize yardımcı olabilecek harika bulanıklaştırma özelliklerine sahip tuval olmayan bir kenar çubuğu menüsü oluşturan bir jQuery gezinme menüsüdür.

Demo | İndirmek

Drawer, tıklandığında ekranın yanından çıkan duyarlı, animasyonlu bir menü oluşturmaya yönelik bir jQuery eklentisidir. Benzer işlevleri Android uygulamalarında da görmüş olabilirsiniz.

Demo | İndirmek

Datmenu, çeşitli CSS3 animasyon özelliklerine sahip birinci sınıf bir jQuery duyarlı menüdür. Bu eklentinin harika yanı, js seçenekleriyle tamamen özelleştirilebilir olmasıdır.

Demo | İndirmek

jPanelMenu, CSS3 animasyon geçiş özelliklerine sahip bir panel gezinme menüsü oluşturmanıza olanak tanıyan güzel ve modern bir jQuery menüsüdür. jPanelMenu'nun stili Facebook ve Google'ın mobil versiyonlarını anımsatıyor. Eklenti çeşitli mobil uygulamalar için kullanılabilir.

Demo | İndirmek

Fly Side Menu, 3D dönüşümler ve geçişler içeren bir yan menü oluşturmak için CSS3 kullanan harika bir gezinme menüsü eklentisidir.

Demo | İndirmek

PageScroll, herhangi bir web sitesinde ve açılış sayfalarında kullanılması önerilen özel bir mobil jQuery menüsüdür.

Demo | İndirmek

DD Icon Menu, fareyle üzerine gelindiğinde genişleyen menü alt öğeleriyle ekranın kenarında yer alan simgelerden oluşan dikey bir menü oluşturmanıza olanak tanıyan bir jQuery eklentisidir.

Demo | İndirmek

Seçilen bir aralıktaki (hafta, ay veya yıl) tarihlere göre gezinmenizi sağlayan jQuery menüsü. AJAX çağrılarını kullanarak bilgi istemek için idealdir.

Demo | İndirmek

Mobil menüler oluşturmayı çok kolaylaştıran jQuery navigasyon menüsü eklentisi. Mobil cihazlarda menü konumunu ayarlamak için CSS geçişlerini kullanır.

Gezinmeyi jQuery'de alt kategorilerin açılır listesiyle dikey bir açılır menü biçiminde kendiniz yazmak için, bu mekanizmanın çalışma prensibini anlamanız gerekir. Ama önce navigasyon yapısına bakalım:

Navigasyon

• Alt 1
  • test 1
  • test 2
  • test 3
  • test 4
• Alt 2
  • test 1
  • test 2
  • test 3
  • test 4
• Alt 3
  • test 1
  • test 2
  • test 3
  • test 4
• Alt 4
  • test 1
  • test 2
  • test 3
  • test 4
• Alt 5
  • test 1
  • test 2
  • test 3
  • test 4

Tahmin edebileceğiniz gibi açılır menümüz madde işaretli listelere dayanmaktadır. Bir etiketin üzerine geldiğinizde

• test 1
• test 2
• test 3
• test 4

Ama nasıl diye soruyorsun? Evet aslında her şey çok basit. Öncelikle navigasyon listemizin stil sayfasına bakalım, şöyle görünecek:

Gövde ( arka plan: rgb(244, 244, 244); yazı tipi ailesi: Verdana; yazı tipi ağırlığı: 100; ) /*---Navigasyon---*/ #menu ( genişlik: 200 piksel; kenar boşluğu: 0; dolgu: 2px; ) #menu li ( list-style-type: none; ) .menu ( konum: göreceli; arka plan: çikolata; arka plan: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; arka plan: -webkit-linear-gradient(üst, rgb(198, 255, 242), #2AC4B3); arka plan: -o-linear-gradient(üst, rgb(198, 255, 242), #2AC4B3); kenarlık : 1px katı #2AC4B3; ) .menu:hover ( arka plan: #00c; arka plan: -moz-linear-gradient(üst, rgb(230, 230, 230), #0CBFAB); arka plan: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); arka plan: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu yayılma ( genişlik: 11 piksel; yükseklik: 11 piksel; ekran: blok; konum: mutlak; üst: 8 piksel; sağ: 10 piksel; imleç: işaretçi; ) .menu ul ( genişlik: 150 piksel; kenar boşluğu: 0; dolgu: 1 piksel; konum: mutlak; üst: -1 piksel; sol: 198px; ) .menu ul li ( arka plan: çikolata; arka plan: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); arka plan: -webkit-doğrusal-gradyan(üst, rgb(198, 255, 242), #2AC4B3); arka plan: -o-doğrusal-gradyan(üst, rgb(198, 255, 242), #2AC4B3); kenarlık: 1 piksel katı #fff; ) .menu ul li:hover ( arka plan: #00c; arka plan: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); arka plan: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); arka plan: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu a ( dolgu: 5 piksel; ekran: blok; metin- dekorasyon: yok; renk: beyaz; ) .menu a:hover ( color: beyaz; ) /*---END---*/

Stil sayfasından açılır listenin başlangıçta gizli olmadığını görebilirsiniz, ancak bu noktayı şunu kullanarak düzelteceğiz:

$(document).ready(function())( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")" ) ; $("#menu li").hover(function())( $(this).children("ul").show(); /* $("ul", this).show() ile eşdeğerdir ;*/ $(this).find("span").css("background", "url("right.png")"); /* $("span", this).css("background ile eşdeğerdir) ", "url ("right.png")");*/ ),function())( $(this).children("ul").hide(); /* $("ul" ile eşdeğerdir, this ).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css ("arka plan", " url("aşağı.png")");*/ )) ))

Şimdi açılır menünün jQuery koduna detaylı olarak bakalım, çünkü... Belki bazıları için tamamen açık olmayacaktır. En başta aşağıdaki yapı yazılmıştır:

$(document).ready(function())( ))

Sayfa tamamen yüklendikten sonra yürütülmesi gereken komutları belirtir. Bu, henüz yüklenmemiş olması nedeniyle herhangi bir nesneyi bulmanın imkansız olduğu durumlarda çeşitli türde hataların ortaya çıkmaması için yapıldı.

$(".menu ul").hide();

Bu giriş ne anlama geliyor? “$()” yapısı elemanları seçmenizi sağlar. Bu nedenle, başlangıçta açılır listemizi gizlememiz gerekiyor. “$()” yapısını alıp içine ilgilendiğimiz nesneyi yazıyoruz. Bizim durumumuzda bu nesne “menü” sınıfını içeren madde işaretli bir liste olacaktır. Daha sonra ilgilendiğimiz nesneyi gizlememizi sağlayan “hide()” yöntemini yazıyoruz.

$(".menu span").css("background", "url("down.png")");

O ne yapıyor? Ana elemanına “menu” sınıfı atanmış olan bir etiketi arar ve “css("background", "url("down.png")")" yöntemini kullanarak "background" stil özelliğine "value" değerini atar. url("down.png")". "down.png" listenin genişletilebileceğini gösteren bir simgedir.

Sonra listemizi genişletecek yapı geliyor, şöyle görünüyor:

$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" arka plan" , "url("aşağı.png")"); )

Ana elemanı id=”menu” olarak atanan bir etiket arıyoruz.Daha sonra "hover" metodu ve parantez içinde iki fonksiyon geliyor. İlk işlev, fare üzerine gelindiğinde yürütülecek ve ikincisi, fare imleci ilgilendiğimiz öğeyi bıraktığında yürütülecektir.

İlk fonksiyon şunu söylüyor:

$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");

"$(this)" yapısı, o anda üzerinde durduğumuz öğeyle ilgilendiğimiz anlamına gelir (bu İngilizce'den this'dir). Ve etiketin üzerine geldik.

Bundan sonra, etiketin alt öğelerini, yani etiketi ararız ve arka planını başka bir simgeyle değiştiririz.

Bundan sonra, fare imleci liste elemanından ayrıldıktan sonra her şeyi orijinalinde olduğu gibi yapan bir fonksiyon yazılır:

Function())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")") ;)

jQuery'de yazılan kodun ve açılır menümüzün düzgün çalışması için jquery.com adresinden kütüphaneyi indirip, açılış etiketinden sonraki satırı yazarak bağlamanız gerekmektedir.

Tamam artık her şey bitti! Sonuç olarak, siteniz oldukça ağırsa, belki de komut dosyasının çok geç başlayacağını (sitenin yüklenmesi uzun sürecektir) ve kullanıcıların ilk önce nasıl tamamen açıldığını ve ancak daha sonra gizlendiğini göreceğini belirtmek isterim. görüyorsunuz, çok çirkin. Bu nedenle tüm jQuery komutlarını şu yapının arkasına taşımak gerekir: “$(document).ready(function()())”. Bunun gibi görünecek:

$(document).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" arka plan" , "url("down.png")"); ))

Komut dosyamızın bağlantısı etiketten en sonuna, kapanış etiketinden önceye taşınmalıdır veya komut dosyasını madde işaretli listeden hemen sonra bağlayabilirsiniz.

(indirilenler: 314)

Bugün site için nispeten yeni nesil navigasyondan - tam ekran menülerden - bir seçim yapmak istiyorum. Sayfada gezinmenin olmadığı, yalnızca bir düğmenin olduğu, tıklandığında bir menünün açıldığı durumlarda kullanılırlar. Benzer bir prensip -framework'te de görülebilir: Gezinme çubuğu artık sığmadığında, menü öğelerinin listesini içeren blok gizlenir. Onun yerine, kural olarak üç şeritli bir görüntü içeren bir düğme görünür. Basıldığında tam menü görüntülenir. Birçok modern web sitesinde menü, büyük ekranlarda bile her zaman gizlidir. Bu, sayfayı yüklememek için yapıldı. Ancak bunu artık tüm projelerinizde yapmamalısınız. Menü ikincil öneme sahipse gizleyebilirsiniz ancak karmaşık yapıya sahip büyük bir siteniz varsa bu seçeneği kullanmamak daha iyidir. Bu yüzden. Genel çalışma prensibini çözdük ama bu tür menü oldukça standart, yeni bir şey istiyorum. Kısa bir süre önce, navigasyonun yalnızca kesilmediği, aynı zamanda bir açılır pencerede tamamen tam ekran açıldığı siteleri fark etmeye başladım. Popüler kayan panellere benzer bir şey ama bunların hepsi çalışma alanının tamamını kaplıyor. Bu konunun asıl konusu olan sitelerin arkasında ayrı jQuery eklentileri ve css3 çözümleri görünmeye başladı.
Kişisel olarak navigasyon menüsünün bu uygulamasını gerçekten seviyorum çünkü mobil cihaz kullanan kullanıcılar için uygun ve büyük monitörlerde çok etkileyici görünüyor. Tam ekran menülere sahip giderek daha fazla site ortaya çıkıyor, ayrıca daha fazla ücretsiz jQuery eklentisi var ve konsept giderek bir trend haline geliyor.
Bu yüzden. Açılır pencerede tam ekran menüler için 20 jQuery eklentisini dikkatinize sunuyoruz.

Bu eğitimde, sitenizde gezinmeyi daha da kolaylaştırmak için kenar çubuğu açılır menüsünü nasıl oluşturacağınızı göstereceğiz. Bu tür menü, modern web tasarımında popüler bir trend. Birçok web sitesi bu tür menüyü kullanır. Onun yardımıyla proje sayfalarındaki kaostan kurtulabilir, daha okunabilir hale getirebilir, kullanıcıların dikkatini ana içeriğe odaklayabilirsiniz.

Bu, dikkat dağıtıcı olmadan minimalizme ulaşmanın harika bir yoludur. Bugün kendimiz böyle bir menü oluşturacağız.

Gezinme menüsü oluşturmak için öncelikle ayarlara bir göz atalım:

Animasyon Menüsü Demosu

Öncelikle Normalize.css'yi indirmeniz ve varsayılan tarayıcı stillerini yapılandırmanız, menünün tüm tarayıcılarda aynı göründüğünden emin olmanız gerekir. Alt öğeler içeren menü öğelerinin önünde bir ok görüntülemek için FontAwesome'ı kullanacağız. Menüdeki sınıfları değiştirmek için jQuery'yi yükleyin ve tüm özel jQuery kodunu script.js'ye taşıyın. Son bağlantı web projesinin ana tablosudur.

Hamburger simgesi sitede gezinmenin ortak bir özelliğidir. Genellikle FontAwesome gibi bir simge yazı tipi kullanılarak oluşturulur, ancak bu eğitimde biraz animasyon ekleyeceğiz, böylece onu sıfırdan oluşturacağız. Hamburger simgemiz, yatay şeritler halinde oluşturulmuş üç div sınıfını içeren bir yayılma etiketidir.

Stiller şöyle görünür:

Geçiş düğmesi ( konum: sabit; genişlik: 44 piksel; yükseklik: 40 piksel; dolgu: 4 piksel; geçiş: 0,25s; z-index: 15; ) .toggle-button:hover ( imleç: işaretçi; ) .toggle-button .menu -bar ( konum: mutlak; kenarlık yarıçapı: 2 piksel; genişlik: %80; geçiş: 0,5 saniye; ) .toggle-button .menu-bar-top ( kenarlık: 4 piksel katı #555; kenarlık alt: yok; üst: 0; ) .toggle-button .menu-bar-middle ( yükseklik: 4 piksel; arka plan rengi: #555; kenar boşluğu üst: 7 piksel; kenar boşluğu alt: 7 piksel; üst: 4 piksel; ) .toggle-button .menu-bar -bottom ( border: 4px katı #555; border-top: yok; top: 22px; ) .button-open .menu-bar-top ( transform: döndür(45deg) tercüme et(8px, 8px); geçiş: .5s; ) .button-open .menu-bar-middle ( transform:translate(230px); geçiş: .1s kolaylık girişi; opaklık: 0; ) .button-open .menu-bar-bottom ( transform:rotate(-45deg) tercüme et(8px, -7px); geçiş: .5s; )

Simgenin sabit bir konumu vardır ve sayfa kaydırıldığında değişmez. Aynı zamanda 15'lik bir z-indeksine sahiptir, bu da her zaman diğer öğelerin üstünde olacağı anlamına gelir. Her biri diğer stilleri paylaşan üç çubuktan oluşur. Böylece her çubuğu class.menu-bar'a taşıyacağız. Kalan stilleri ayrı sınıflara taşıyoruz. Sihir, herkese açık olan span etiketine başka bir sınıf eklediğimizde gerçekleşir. Bunu jQuery kullanarak şu şekilde ekliyoruz:

$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("tıklayın", function() ( $(this).toggleClass("button-open") ); ) ); ) );

JQuery'e aşina olmayanlar için, simgemizi içeren $toggleButton ile bir değişkeni başlatıyoruz. Bunu JavaScript'e ihtiyaç duymadan bir değişkende saklıyoruz. Daha sonra simgeye yapılan tıklamaları dinleyen bir olay dinleyicisi oluşturuyoruz. Kullanıcı hamburger simgesini her tıklattığında, olay dinleyicisi class.button-open işlevini değiştiren toggleClass() işlevini başlatır.

.button-open sınıfı eklendikten sonra onu öğelerin görüntülenme şeklini değiştirmek için kullanabiliriz. Üst ve alt çubukların 45 derece dönmesini ve orta çubuğun sağa hareket edip kaybolmasını sağlamak için CSS3 Translate() ve rotary() işlevlerini kullanırız. İşte özelleştirebileceğiniz animasyon:

Artık hamburger simgeniz olduğuna göre onu kullanışlı hale getirelim ve tıkladığınızda bir açılır menü oluşturalım. Menü düzeni şöyle görünür:

• Ev
• Hakkında
• Blog
• Oku tıklayın
  • Hizalama
  • İşaretleme
  • Yorumlar
• Dersler
• Temasta olmak

Şimdi bu menüdeki her stilin ayrıntısına girmeyeceğiz, bunun yerine birkaç önemli noktaya odaklanacağız. Öncelikle div ve .menu-wrap sınıfı var. Stillerine bakın:

Menü sarma ( arka plan rengi: #6968AB; konum: sabit; üst: 0; yükseklik: %100; genişlik: 280 piksel; sol kenar boşluğu: -280 piksel; yazı tipi boyutu: 1em; yazı tipi ağırlığı: 700; taşma: otomatik ; geçiş: 0,25s; z-endeksi: 10; )

Konum sabittir, böylece sayfa kaydırılırken menü her zaman aynı konumda kalır. %100 yükseklik, menünün sayfadaki tüm dikey alanı kaplamasına olanak tanır. Lütfen sol kenar boşluğu alanının menünün genişliğine eşit negatif bir sayıya ayarlandığını unutmayın. Bu, menünün görünüm alanından kaybolacağı anlamına gelir. Tekrar görünür hale getirmek için jQuery ile başka bir geçiş sınıfı oluşturuyoruz. JavaScript dosyamız şöyle görünecek:

$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("tıkla", function()) ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );

Menü sarmalayıcıyı içeren başka bir $menuWrap değişkeni ekliyoruz. Daha önce oluşturduğumuz olay işleyicinin aynısını kullanın. Ancak bu sefer iki sınıfı değiştiriyoruz: biri düğme için, diğeri menü kabuğu için. class.menu-show'un sol kenar boşluğu değeri 0'dır, bu bir gölge efekti katacaktır.

Menü gösterisi (sol kenar boşluğu: 0; kutu gölgesi: 4px 2px 15px 1px #B9ADAD; )

Liste öğelerinden birinin, bir alt menü içeren class.menu-item-has-children'a sahip olduğunu fark edebilirsiniz. Ayrıca bağlantının hemen altında .sidebar-menu-arrow sınıfını içeren bir span etiketi bulunmaktadır.

span'ın bir ::after sözde öğesi vardır ve bir FontAwesome oku içerir. Varsayılan olarak alt menü gizlidir ve yalnızca oka tıkladığınızda görünür. Bunu jQuery ile şu şekilde yapabiliriz:

$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );

Oku tıklattığımızda, yayılma alanından hemen sonraki öğeyi (bizim durumumuzda alt menü) hedefleyen ve onu görünür hale getiren bir işlevi çağırırız. Kullandığımız fonksiyon SlideToggle'dır. Bir elementin görünmesini ve kaybolmasını sağlar. Örneğimizdeki işlevin tek bir parametresi vardır: animasyonun süresi.

Örnekteki menü öğelerinin fareyle üzerine gelme efekti vardır. ::after sözde elemanı kullanılarak oluşturulur. Kod şuna benzer:

Menü kenar çubuğu li > a::after ( içerik: ""; görüntüleme: blok; yükseklik: 0,15em; konum: mutlak; üst: %100; genişlik: %102; sol: %50; dönüştürme: tercüme et(-%50) ); arka plan görüntüsü: doğrusal degrade (sağa, şeffaf %50,3, #FFFA3B %50,3); geçiş: arka plan konumu 0,2 sn 0,1 sn kolaylaştırma; arka plan boyutu: %200 otomatik; ) .menu-sidebar li > a:hover::after ( arka plan konumu: -100% 0; )

::after sözde elemanı, her bağlantının altında 0,15em tam genişlik ve yüksekliğe sahip bir blok seviyesi elemanı içerir. Hepsi bir alt çizgi gibi görünüyor. Özel olan şey, çizgiye sadece arka plan rengini uygulamamamız, arka plan görüntüsünde lineer-gradient() fonksiyonunu kullanmamızdır. Bu fonksiyon renk gradyanları oluşturmak için tasarlanmış olsa da istenilen yüzdeleri belirterek rengi değiştirebiliriz.

Menü-kenar çubuğu li > a::after ( arka plan görüntüsü: doğrusal-gradient(sağa, şeffaf %50,3, #FFFA3B %50,3; )

Buradaki çizginin yarısı şeffaf, diğer yarısı ise sarı. Arka plan boyutunu %200 yaparak bloğumuzun genişliğini iki katına çıkarıyoruz. Artık şeffaf kısım linkin tüm genişliğini kaplıyor ve sarı kısım sola doğru hareket ederek görünmez oluyor. Fareyle üzerine gelindiğinde arka plan konumunu -%100 olarak değiştiriyoruz. Artık sarı kısım görünür hale geliyor ve şeffaf kısım gizleniyor.

Şeffaf kısım yerine başka bir renk kullanabilirsiniz. Ayrıca degradelerle denemeler yapabilirsiniz.

Ele aldığımız unsurların her biri bir bütün olarak çalışır. Böyle bir menüyü TemplateMonster koleksiyonundaki herhangi bir web sitesi tasarımını kullanarak oluşturabilirsiniz. Gördüğünüz gibi bunu yapmak sandığınızdan daha kolay. Profesyonel ve kullanıcı dostu web siteleri oluşturmada iyi şanslar!