DarkNavigation

0
245
views

Dark-Navigation

Marco Biedermann tarafından sitenizde sosyal ağ adreslerinizi yayınlayabilmeniz için hazırlanmış bir Css3 navigasyon menü örneği. Menü örneğinde ilk başta  sadece  içinde  user ikonu bulunan  kırmızı  bölüm bulunuyor. Mouse ile menü üzerine  geldiğinizde sağ tarafta  hafif saydam bir menü listesi açılıyor  ve  mouse ile üzerinde gezdiğiniz  ikonların başlıkları resimdede gördüğünüz  gibi  tooltip benzeri bir pencere içinde açılıyorlar.

Sosyal ağ ikonları Font Awesome kullanılarak menüye entegre  edildiği  için diğer sosyal ağ adresleri için yeni resim dosyaları  oluşturmanıza  gerek yoktur. Tek yapmanız  gereken yeni sınıflar ekleyerek sosyal ağ ikonlarını kaydetmeniz  gerekiyor. Örnek olarak facebook için span class=”icon-facebook” olarak ayarlanmış.  icon-facebook Font Awesomede facebook ikonu ile eşleştiğinden burada facebook ikonu görünecektir. Diğer ikonlara  buradan ulaşabilirsiniz.

 

Kullanım

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

IE9 için Html5 Shiv :

 

Font Awesome adresi : 

 Css : 

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

Html : 

 

CEVAP VER

Please enter your comment!
Please enter your name here