JQuery ve CSS3 kullanan basit ve etkili bir menü. JQuery: çerez açılır penceresiyle açılan menü Açılır menü, css jquery ile bağlantılıdır

Bu istatistik daha basit titreşim menüsü Daha fazla yardım için jQuery'yi kullanın. Demo dosyasına bakmak için bir dakikanızı ayırın. JQuery ve CSS'nin temellerini en azından biraz bildiğinizi varsayıyoruz. Bu menüyü oluşturmanın temel yönleri şu CSS parametreleridir: konum, üst, sol, z-index.

Bu parametreler, imleç üzerine getirildiğinde menümüzün tam olarak istendiği gibi görünmesini ve diğer tüm öğelerin doğru şekilde seçilmesini sağlamak için kullanılabilir. İmleç üzerine gelindiğinde menünün görüntüleneceği ve imleç uzaklaştırıldığında bunun bilineceği şekilde de ayarlayabiliriz. Bu fikirleri uygulamak için jQuery işlevlerini kullanacağız: mouseenter ve mouseleave. Ortaya çıkan menüyü oluşturmak için ihtiyacımız olan tek şey bu!

Nihai sonucun demo dosyası ve indirilmeye gönderilmesi

HTML Kodu

Menü HTML kodunu tanıyın:

Gördüğünüz gibi burada menü öğelerini uygulamaya yönelik bazı sırasız listelerimiz var. Açılan menüye, açılır menünün sınıfı atanır ve açılan menünün kendisi de bir alt slayt olarak sınıflandırılır. Sınıf adları, hangi menünün görüntülenmesi gerektiğini belirtmek için jQuery tarafından değiştirilecektir.

CSS kodu

CSS kodunu inceleyin:

/* Açılır Menü Başlatma CSS'si */
ul
{
liste stili: yok;
dolgu:0 piksel;
kenar boşluğu:0 piksel
}

ulli
{
ekran: satır içi;
kayan nokta:sol;
}

ulli a
{
renk:#ffffff;
arka plan:#990E00;
sağ kenar boşluğu:5px;
yazı tipi ağırlığı:kalın;
yazı tipi boyutu:12 piksel;
yazı tipi ailesi:verdana;
metin dekorasyonu: yok;
Ekran bloğu;
genişlik:100 piksel;
yükseklik:25 piksel;
satır yüksekliği:25 piksel;
metin hizalama:ortalama;
-webkit-sınır-yarıçapı: 5 piksel;
-moz-sınır-yarıçapı: 5px;
kenarlık: 1 piksel düz #560E00;
}

ul li a: üzerine gelin
{
renk: #cccccc;
arka plan:#560E00;
yazı tipi ağırlığı:kalın;
metin dekorasyonu: yok;
Ekran bloğu;
genişlik:100 piksel;
metin hizalama:ortalama;
-webkit-sınır-yarıçapı: 5 piksel;
-moz-sınır-yarıçapı: 5px;
kenarlık: 1 piksel düz #000000;
}

ul li.alt bağlantılar a
{
renk:#000000;
arka plan:#f6f6f6;
kenarlık-alt:1 piksel katı #cccccc;
yazı tipi ağırlığı:normal;
metin dekorasyonu: yok;
Ekran bloğu;
genişlik:100 piksel;
metin hizalama:ortalama;
kenar boşluğu üst:2 piksel;
}

ul li.alt bağlantılar a:hover
{
renk:#000000;
arka plan:#FFEFC6;
yazı tipi ağırlığı:normal;
metin dekorasyonu: yok;
Ekran bloğu;
genişlik:100 piksel;
metin hizalama:ortalama;
}

ul li.alt bağlantılar
{
görüntü yok;
}

/* Açılır Menü Sonu için CSS */

CSS kodunun çoğu menü formatlaması için düzenlenmiştir (ekleyebilirsiniz) dış görünüm En iyi karar için menü), ancak burada da bazı önemli noktalar var:

1 - Yardım listesi stili için daha fazla sekmeye bakın: yok;

2 – Listelerin blok öğelerden oluştuğunu ve her zaman dikey sırada görüntülendiğini biliyoruz. Yatay olarak oluşturabilmek için küçük elemanlar parametresini ayarlayıp aşağıdaki kodu kullanarak sol tarafa hizalıyoruz:

Ekran: satır içi;
kayan nokta:sol;

3 – Hazırlıklar küçük unsurlarla yapıldı. Ek display:block kullanarak bunları blok öğeleri halinde yeniden işliyoruz (bu yöntemle artık onlar için genişlik değerleri ayarlayabiliriz).

4 - Yardım için menünün tamamına bakalım:

Ul li.alt bağlantılar
{
görüntü yok;
}

jQuery

Bir sürü gereksiz koda ihtiyaç duyulmadan önce, açılır menülerin kaba kuvvet JavaScript kodu kullanılarak uygulanmasının üzerinden uzun zaman geçti. Bugün tek ihtiyacımız olan jQuery:

$(işlev())(

Alt menü.css((
konum:"mutlak",

zIndex:1000
});

Submenu.stop().slideDown(300);

$(this).slideUp(300);
});
});
});

Bu çok basit bir şey. Bunun nasıl çalıştığını açıklayalım. Öncelikle jQuery kontrolcüsündeki kodumuza bir göz atalım:

$(işlev())(
...
});

Kodumuz, fare imleci menü sınıfının atandığı bir öğenin ($(".dropdown") üzerine geldiğinde (mouseenter işlevi) etkinleştirilir. Vipadka'mızın menüsünde bu var:

$(işlev())(
$(".dropdown").mouseenter(function())(
........
});
});

Fare imleci gönderme noktasına atlamadan önce ilk açık menüde ne sakladığımıza (hide()) bakalım:

$(".sublinks").stop(false, true).hide();

Fare imleci menüdeki farklı öğeler arasında hareket ettiğinde ortaya çıkan yalnızca bir menüyü görüntülememize olanak tanıyan düğmenin işlevine dikkat ediyoruz. Bu fonksiyon bizi hızlandırmadığı için fare imlecini menüden geri hareket ettirene kadar açılan dış görünüm menüsü açılmayacaktır. Birkaç astar oluşturursanız bu benzersiz olacaktır. Ardından menüyü açın ve değişiklik yapın:

Var alt menüsü = $(this).parent().next();

HTML kodunda ne olacak:

Fare imleci açılır sınıfa sahip bir mesajın üzerine getirilirse, parent() yardımına geri dönerek “li”ye geçeriz ve ardından next() yardımından sonra gerekli menüye yönlendiriliriz ve “li” zaten alt konum sınıfında (alt bağlantılar) olacaktır. Böylece jQuery, imleç şarkının üzerine geldiğinde açılan menüyü bulmamızı kolaylaştırıyor.

Alt menü.css((
konum:"mutlak",
üst: $(this).offset().top + $(this).height() + "px",
sol: $(this).offset().left + "px",
zIndex:1000
});

Kod çok önemlidir çünkü açılan menünün tam olarak talimatların altında görünmesini garanti eder. Konum mutlak olarak ayarlanırsa öğeyi sayfamızın herhangi bir alanına konumlandırabiliriz. Daha sonra, $(this).offset().top (imlecin üzerinde durduğu geçerli menü öğesine gider) kullanarak imlecin üzerine gelindiği yazının en üst konumunu ayarladık ve yeni bir yükseklik değeri ekledik, böylece menü tam olarak aşağıda görüntüleniyor. Elimden geleni yapacağım. Bu sol parametreyle benzer şekilde çalışır. Daha sonra menümüzün diğer öğelerin üstünde görüntülenmesini sağlamak için z-index'i kullanıyoruz.

Submenu.stop().slideDown(300);
Elbette yardım için fadeIn, animasyon gibi diğer animasyon seçeneklerini kullanabilirsiniz. güç stilleri Ve benzeri.

Artık açılan menüyü görüntüleme konseptine alışmanız ve bunu çözmeniz gerekiyor. Aşağıdaki kod parçacığına ihtiyacımız olacak:

Submenu.mouseleave(function())(
$(this).slideUp(300);
});

Açılan menüyü yakalamak için SlideDown kelimesinin zıt anlamlısı olan SlideUp'ı kullanıyoruz. Belirli bir menü oluşturmak için oluşturduğumuz alt menü için teşekkür ederiz.

Böylece aynı seviyede bir artış elde ettik. jQuery menüsü.

Danimarka'da saat jQuery Gezinme menüsü, üzerinde mesaj bulunan metin bloklarından daha fazlasıdır. JQuery ve CSS3'ün yardımıyla harika görünen bir gezinme menüsü oluşturabileceğinizi öğrendim.

JQuery'nin yeteneklerini kullanarak navigasyon menüsünü dinamik bir menü üzerinde yeniden tasarlayabiliriz. CSS3 kullanmadan dinamik gezinme oluşturmak istiyorsanız JQuery, menüyü daha da işlevsel hale getirir.

Dinamik işlevlerin yanı sıra tasarım da önemli bir rol oynamaktadır. Sitenizi ziyaret ettiğimizde ilk önce bizi cesaretlendirenleri görmek isterim.

Menü sunulamayacaksa paralı askerlere karşılıklı ilişki kurma fırsatı verecektir. Garni tasarım Menü, sitenizin parlaklığını artıracak ve katkıda bulunanlar arasındaki etkileşimin en iyi kanıtını sağlayacaktır.

Bugün size 30 canavarı tanıtıyorum jQuery uygulamaları navigasyon menüsü.

1. Saldırgan

Pushy uyarlanabilirdir, gezinme menüsü tuvaline bağlı değildir, bunun yerine CSS geçişlerinin yeniden tasarımına sahiptir. İşte bu kadar mucizevi bir şekilde çalışıyor mobil cihazlar. Demoyu izlemek çok kolay ve kesinlikle keyif alacaksınız.

Demo | aklını çelmek

2. Daracık

Kaydırılan güzel gezinme listeleri oluşturmak için başka bir jQuery yönetici menüsü. Önemi, çıktı dosyalarının minimum boyutudur.

Demo | aklını çelmek

3. jQuery Açılır Menüsü

Bu, birçok kullanışlı fonksiyona sahip basit, uyarlanabilir bir menüdür. Menü simgesine tıkladığınızda menü penceresi öğelerin simgeleriyle birleşir. Demoyu izleyin.

Demo | aklını çelmek

4. Kaydırma çubukları

Slidebars, program stillerini tuvale bağlı kalmadan hızlı ve kolay bir şekilde uygulamaya yönelik bir jQuery çerçevesidir. Kaydırma çubukları aynı zamanda yön değişikliklerini ve boyut değişikliklerini de kabul eder.

Demo | aklını çelmek

5. jQuery Kare Menüsü

JQuery menüsü, JQuery ve CSS3 kullanılarak bir sitede kare animasyonlu menünün nasıl görüntüleneceği. Bir göz atın ve demoya hayret edin.

Demo | aklını çelmek

6. Perspektif Sayfa Görünümünde Gezinme

Bu jQuery gezinme menüsü, sayfayı 3 boyutlu bir menüye dönüştürür. Fikir bir tasarım yaratmaktır mobil eklenti burada bir menü simgesine tıkladığınızda kenar çubuğu yerine menü tıklanır ve menü ön plana çıkar.

Demo | aklını çelmek

7. SlickNav

Pek çok seviye ve seçeneğe sahip duyarlı bir mobil jQuery menüsü oluşturmaya veya yalnızca ayarlama yapmaya yönelik bir eklenti. Sumisnyy farklı tarayıcılar, Ek bir klavye kullanarak gezinebilirsiniz.

Demo | aklını çelmek

8. Menü

Alt öğeler içeren bir tuvale bağlanan ve bağlanmayan programlar için jQuery menüsü. Çok sayıda seçenek, eklenti ve uzantı var, hatta menüyü özelleştirebilirsiniz.

Demo | aklını çelmek

9. Sidr

Menüler oluşturmak ve uyarlanabilir işlevleri kolayca eklemek için jQuery eklentisi. Sidr'ın yardımıyla sitenizin farklı öğelerinin yanı sıra uyarlanabilir menüler de oluşturabilirsiniz.

Demo | aklını çelmek

10. ince Menü

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

Demo | aklını çelmek

11.YatayNav

ayarlamanıza olanak tanıyan jQuery gezinme menüsü yatay menü konteynerin tüm genişliği boyunca. Bu eklentiden yardım almak gerçekten çok kolay. Ayrıca IE7 desteğini uygulamak da mümkündür.

Demo | aklını çelmek

12.FlexNav

Bu, destekli bir yönetici içerik menüsü oluşturmak için hızlı medya sorgusu ve JavaScript'in mobil öncelikli uygulamasıdır dokunmatik ekranlar ek klavye için fareyle üzerine gelme efektleri ve gezinme.

Demo | aklını çelmek

13. jQuery Menüsü-Amaç

Fare imleci bir menü öğesinin üzerine geldiğinde altyazıları başlatan jQuery menüsü. Amazon'daki gibi görünen uyarlanabilir menüler oluşturmak için idealdir.

Demo | aklını çelmek

14. Akıllı Menüler

Menüleri görüntülemenin basit ve sezgisel bir yolunu sağlayan bir jQuery menü eklentisi. Uyarlanabilir menüler oluşturur. Tüm cihazlarda çalışır!

Demo | aklını çelmek

15. Değiştirici

Shifter, kaydırma düğmesine bastığınızda sağ tarafta görünen bir slayt menüsü oluşturmaya yönelik basit, mobil öncelikli bir jQuery eklentisidir. Özelleştirme için yalnızca bir maxWidth seçeneği vardır. Mobil cihazlar için ayrı bina/yönlendirme yapılandırmanıza olanak tanır.

Demo | aklını çelmek

16.Hamburger

Hamburger, şık bir slayt menüsü oluşturmaya yönelik bir jQuery eklentisidir Android uygulaması Ekranın sağ kenarında katlanabilir bir menünün bulunduğu. Menü açıldığında tam boyuta eylem panelinin yanı sıra içerik alanıyla da örtüşüyor.

Demo | aklını çelmek

17. Odaklanma

Focusss - sitenin ana bölümlerine katkıda bulunanların saygısını kazanmak ve daha az not oluşturmak için kullanabileceğiniz harika yayma işlevleriyle kenar çubuğundaki tuvale bağlı olmayan bir menü oluşturmanıza olanak tanıyan jQuery gezinme menüsü ihtiyaç Brownieler ayrıldı.

Demo | aklını çelmek

18. Çekmece

Drawer, ekranın yan tarafından basıldığında hareket eden duyarlı, animasyonlu bir menü oluşturmaya yönelik bir jQuery eklentisidir. Benzer işlevler Android eklentilerinde de bulunabilir.

Demo | aklını çelmek

19. Dutman'a

Datmenu - premium jQuery uyarlanabilir menü H farklı işlevler CSS3 animasyonları. Bu eklentinin en iyi yanı yeteneğidir mükemmellik ek js seçenekleri için.

Demo | aklını çelmek

20.jPanelMenü

jPanelMenu, CSS3 animasyon geçiş işlevleriyle panel gezinme menüleri oluşturmanıza olanak tanıyan güzel ve modern bir jQuery menüsüdür. jPanelMenu stili tahminleri mobil versiyonlar Facebook ve Google. Eklenti çeşitli mobil uygulamalar için kullanılabilir.

Demo | aklını çelmek

21. Yan Menüyü Uçurun

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

Demo | aklını çelmek

22. PageScroll jQuery Menü Eklentisi

PageScroll, özelleştirilebilen, herhangi bir web sitesinde ve diğer sayfalarda kullanılması önerilen mobil bir jQuery menüsüdür.

Demo | aklını çelmek

23.DD Simge Menüsü

DD Icon Menu, oluşturmanıza olanak tanıyan bir jQuery eklentisidir. dikey menü Menü öğelerinin üzerine geldiğinizde ekranın kenarında bulunan simgelerin ışığı yanar.

Demo | aklını çelmek

24. JQuery Mobil Tarih Gezintisi

Seçilen aralıktaki tarihler arasında gezinmenizi sağlayan jQuery menüsü ( hafta, ay ve gün). AJAX aramaları yoluyla bilgi istemek için idealdir.

Demo | aklını çelmek

25. Navobile

Kolayca mobil menüler oluşturmanıza olanak tanıyan jQuery navigasyon menüsü eklentisi. Mobil cihazlarda menü konumlarını ayarlamak için Vikoryst CSS geçişleri.

Bu derste size, sitede gezinmeyi daha da kolaylaştırmak için açılan farklı bir menünün nasıl oluşturulacağını göstereceğiz. Böyle bir menü, modern web tasarımında popüler bir trend. Bu tür menü birçok web sitesinde kullanılmaktadır. Bu yardımla proje sayfalarındaki kaosu aşabilir, daha fazla okuma alabilir ve katkıda bulunanların ana içeriğe olan saygısına dikkat edebilirsiniz.

Bu, herhangi bir ek faktör olmadan minimalizme ulaşmanın harika bir yoludur. Bugün bu menüyü bağımsız olarak oluşturabiliyoruz.

Gezinme menüsünü oluşturmak için öncelikle ayarları tanıyalım:

Başlamak için Normalize.css'yi yüklemeniz ve promosyon için tarayıcı stillerini yapılandırmanız, menünün tüm tarayıcılarda aynı görünmesi için yeniden yapılandırmanı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ı yeniden düzenlemek için jQuery kullanıyoruz ve kullanıcının tüm jQuery kodunu script.js'ye taşıyoruz. Gerisi web projesinin ana tablosudur.

Hamburger simgesi

Hamburger simgesi sitede gezinmenin hayati bir özelliğidir. Genellikle FontAwesome gibi farklı bir simge yazı tipi kullanılarak oluşturulur, ancak bu eğitimde biraz animasyon ekleyeceğiz ve ardından onu sıfırdan oluşturacağız. Hamburger simgemiz, yatay çizgiler olarak görünen üç div içeren bir span etiketine sahiptir.

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; -alt ( kenarlık: 4 piksel düz #555; kenarlık üst : yok; top: 22px; ) .button-open .menu-bar-top ( transform:rotate(45deg) Translate(8px, 8px); geçiş: .5s; ) .button-open .menu-bar-middle ( transform : tercüme et(230px); tercüme et(8px, -7px); geçiş: .5s;

Simgenin sabit bir konumu vardır ancak sayfa kaydırıldığında değişmez. Aynı zamanda 15'lik bir z-indeksine sahiptir, bu da onun diğer unsurların üstünde olacağı anlamına gelir. Her biri farklı tarzlara bölünmüş üç çubuktan oluşur. Öyleyse dış görünüm çubuğunu class.menu-bar'a taşıyalım. Diğer stiller sınıf içinde taşınır. Açacağımız span etiketine bir sınıf daha eklediğimizde sihir oluşuyor. Ek jQuery yardımı için bunu ekleyeceğiz:

$(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 yerleştirmek için $toggleButton'u değiştireceğiz. Bunları JavaScript'e ihtiyaç duymadan kaydediyoruz. Daha sonra, sonunda tıklamaları dinleyen bir olay dinleyicisi oluşturuyoruz. Görünen o ki, bir kullanıcı son hamburgere tıkladığında, olay dinleyicisi açma düğmesini açıp kapatan toggleClass() fonksiyonunu çalıştırıyor.

Button-open sınıfı eklenirse, bunu elemanların görüntülenme şeklini değiştirmek için kullanabiliriz. Üst ve alt kenarların 45 derece sarılması ve orta kenarın sağa doğru çökmesi için CSS3 tercüme() ve döndürme() işlevlerini kullanıyoruz. Animasyon ekseni ayarlanabilir:

Aşağı açılan gezinme menüsü

Şimdi eğer bir hamburger ikonunuz varsa bir hamburger ikonu oluşturalım ve üzerine tıkladığınızda çıkan özel bir menü oluşturalım. Menü düzeni şöyle görünür:

Şimdi bu menünün dış görünüm stili üzerinde durmayalım, bunun yerine birkaç tanesine odaklanalım. önemli anlar. Önümüzde bu div ve class.menu-wrap. Onun tarzına hayret edin:

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;

Konumlar sabittir, dolayısıyla sayfayı kaydırdığınızda menü her zaman tek bir konumda kaybolur. %100 yükseklik, menünün yan taraftaki dikey alanın tamamını kaplamasına olanak tanır. Lütfen sol kenar boşluğu alanının, menünün genişliğine eşit olan aynı sayıya ayarlandığını unutmayın. Bu, menünün pencereden tanıdık geldiği anlamına gelir. Tekrar görünür hale getirmek için jQuery ile başka bir toggler 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ı sarmak için $menuWrap adında başka bir değişiklik ekliyoruz. Vikorist, daha önce oluşturduğumuz kitabın aynısı. Tam bu sefer iki sınıf karıştırıldı: biri düğme için, diğeri menü kabuğu için. class.menu-show'un sol kenar boşluğunun değeri 0'a ayarlanmıştır, bu da gölge efekti verir.

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

Alt menü ve mesaj

Liste öğelerinden birinde bir alt menü olan class.menu-item-has-children'in bulunduğunu not edebilirsiniz. Ayrıca mesajların altına sidebar-menu-arrow sınıfını içeren bir span etiketi yerleştirilir.

span::sözde öğeden sonra gelir ve FontAwesome okunu yerleştirir. Alt menü sahne arkasında gizlidir ve yalnızca oka bastığınızda görünür olacaktır. Bu eksen jQuery kullanılarak oluşturulabilir:

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

Oka tıkladığımızda span'dan hemen sonra bir sonraki öğeyi hedef alan (açılır listemizde alt menü bulunmaktadır) fonksiyona tıklayıp onu görünür hale getiren fonksiyona tıklıyoruz. Kullandığımız fonksiyon SlideToggle'dır. Ortaya çıkan ve bilen bir vızıltı unsuru var. Uygulamamızın işlevinin bir parametresi vardır: animasyonun ciddiyeti.

Uygulamadaki menü öğelerinin fareyle üzerine gelme efekti vardır. Vіn, vikoristannyam::after sözde elementi ile yaratılmıştır. 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; > a:hover::after ( arka plan konumu: -100 %0;)

::sözde elemandan sonra blok seviye elemanını kaplama yamasının altına tam genişlik ve 0,15em yükseklikte yerleştirin. Bir koltuğa benziyor. Tuhaflık, sadece arka plan rengini çizgiye ayarlamamamız, aynı zamanda lineer-gradient() işlevini kullanmamız gerçeğinde yatmaktadır. arka plan görüntüsü. Bu fonksiyon renk geçişleri oluşturmaya yönelikse gerekli renkleri 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ı açık, diğer yarısı ise zhovt. Arka planın boyutunu %200 olarak ayarladıktan sonra bloğun genişliğini iki katına çıkarıyoruz. Artık görünüm kısmı görüntünün tüm genişliğini kaplıyor ve ikinci kısım sola doğru hareket ederek görünmez oluyor. -%100'e gelindiğinde arka plan rengini değiştiriyoruz. Artık sarı kısım görünür durumdadır ve görüntü gizlenmiştir.

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

İncelediğimiz unsurlardan oluşan cilt bir bütün olarak çalışır. TemplateMonster koleksiyonuyla herhangi bir web sitesi tasarımına yardımcı olmak için bunun gibi bir menü oluşturabilirsiniz. Bildiğiniz gibi çalışmak daha kolaydır ama kendinizi tanıyabilirsiniz. Profesyonel ve yararlı web sitelerinizde iyi şanslar!

Çoğu zaman şablonlarda düşen gezinme öğelerini fark edebilirsiniz. Rozrobniki vikoristleri Danimarka tipi ana öğeyle tematik olarak ilgili olan ek randevuları görüntülemek için menüler. Tıklayabileceğiniz bazı paneller veya bu gezinme ilkesini uygulayan çeşitli akordeon tarzı menüler bulabilirsiniz.

Bu dersimizde basit bir menü kullanacağız. wikiristannyam jQuery. Bulanık efektler oluşturmak için ek animasyon yöntemleri kullanmanız gerekecektir. JavaScript kodunun yanı sıra CSS3 geçişlerinin etkileri de araştırılıyor. Sonuç olarak, sitede gezinmek için bir şablon belirir.

HTML

Artık temel HTML5 şablonunu hatırlayalım. Gerekli eski versiyon jQuery, Google API'sinden türetilmiştir. Ayrıca bir stil dosyası da ekleyebiliriz stiller.css aşağıda temsil edilecektir:

Şimdi sayfanın üst kısmındaki sırasız listeyi temel alan yapıya bakalım. Listenin tamamı HTML5'tedir