Beatiful horizontal navigation with :active selector

0
900
Görüntülenme

Navigation bar
Eğer  dikkat etmişseniz  mutlaka karşılaşmışsınızdır. Bazı websitelerinde kategori linkine tıklayıp kategori sayfası açıldığında tıklamış  olduğunuz kategori linkinin arka plan rengi diğer linklere göre farklı renkte olur. Aynı hover dediğimiz mouse üzerine geldiğinde renk değiştiren butonlar gibi. Bunun  için .örnekDiv:hover özelliğini kullanırız. Tıklandığında linkin renginin değişmesini istiyorsak eğer hover yerine .örnekDiv:active  özelliğini kullanmamız gerek. Buradaki Css3 üst menü örneğimiz de aynı mantıkla hazırlanmış. Renginin değişik olmasını istediğiniz linkin içine class=”active” eklediğiniz zaman linkin arkaplanı yazı şekli efektleri Cssde activeye verdiğiniz değerler ile eşleşir ve active eklediğiniz link diğer linklerden farklı görünür.  Başka birşeyde yazabilirsiniz bunun yerine. Ama tıklandığında renginin değişik görünmesini istiyorsanız .örnekDiv:active olarak kullanmanız gerek.

Demo sayfasının  boyutu  çok küçük olduğu  için sayfalar  arası  geçiş  ajax  tab

görünümündedir bu sizi aldatmasın. Ajax tab değildir. Büyük boyutlu  sayfalarda  daha  iyi farkedebilirsiniz  ama şimdiki  demomuzda sayfalar arası geçiş biraz hızlı oluyor.

Kullanım

  • Head etiketleri arasıa eklemeniz gereken bölüm.

Css  stil  dosyasının  url adresi : 

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

Html : 

 Class=”active” Kullanımı

Html  içerisindeki  kodlara  dikkat ederseniz clas=”active” yazısını  görebilirsiniz. Active  tıklanmış olan linkin  seçili  halde  durmasını  sağlıyor.  Burada önemli olan  menüyü  eklediğiniz  sayfaların tamamında  sayfa linkinin yanına class=”active”  özelliğini eklemeniz  gerekmekte.

  • Anasayfa menü html kodu : 

  • 2. sayfa menü kodu :

Sanırım bu iki örnek  herşeyi  anlatıyor.

 

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 2,50 out of 5)
Loading...
Önceki İçerikRotatting social icons
Sonraki İçerikFlashyMenu
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

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