DropDown horizontal nav

0
607
Görüntülenme

horizontal subnav

Sürekli görmeye alışık olduğumuz ve herkesin değil de web sitesi sahiplerinin ortalama 95%’inin (benim tahminim)  kullanıdığı açılır örnekleri bilmeyeniniz  yoktur. Mouse başlıkların üzerine geldiğinde aşağıya doğru alt kategilerin açıldığı örneklerdir bunlar. Değişik açılma efektleri kullanılarak yapılmış binlerce örneği var bu bahsettiğim çalışmaların. Bir de mouse linklerin üzerine geldiğinde menü çerçevesinin hemen altında tam boy genişlikte açılan ince şeritli örnekler vardır ve alt kategoriler alt alta değil de yan yana sıralanırlar bu bölümde. Bu seferki paylaştığımız çalışma da aynı bu şekilde çalışıyor.

Aslında sadece resim eklemek her şeyi açıklamaya yeterdi zaten resme baktığınızda da ne olduğunu anlayabiliyorsunuz ama bir web tasarım örneğini paylaşırken ne olduğu hakkında birşeyler saçmalamak zorundayız Google amca yüzünde 🙂 Ben ara sıra böyle yazarım alakalı veya alakasız konulardan. Sonuçta girdiğimiz her kelime resim ve başlık ile eşleşiyor ve arama sonuçlarında iyi bir yer edinebiliyoruz. Yazı ve başlıklarda asıl olması gereken kelimeleri etiket alanında girmeye özen gösteriyorum. Bu d abenim yeni yaptığım bir seo denemesi. İlerleyen zamanlarda eğer iyi bir sonuç elde edebilirsem detaylı bir anlatım yapmayı düşünüyorum bu konuda.

Siz yine de benim yazdıklarımı fazla dikkate  almayın ve bir başlığa tıkladığınız zaman hemen resme bakın eğer tasarım hoşunuza giderse ardından  demo ve indirme butonlarına tıklayın. Bu arada tasarım kelimesine de iyi para geliyor demek geliyor içimden. Bazıları böyle dedim diye bu kelimeye ağırlık vermeye çalışmasın sadece şaka yapıyorum 🙂

Hah bide unutmadan zaten görüyorsunuz ama yine de belirtmek zorundayım. Tasarımımız mavi ve siyah renklerinden oluşuyor linkler de beyaz renklerinde hazırlanmış.

Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

Js adresi : 

 Css : 

JavaScript :

  •  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.