Drop down vertical nav

0
1231
views

drop

Daha önceleri  bir kaç tane  Font Awesome ile hazırlanmış menü örneği paylaşmıştım sizlerle. Font Awesome sitesinden ikonları  şu kodda <i class=”font awesome icon kodu”></i>  olduğu gibi  eklemek baya  kolaydı. Font Awesome ikonlarını bir de kodlar içine ekleme yöntemi var tabi. Yanlız  i /i sınıflarına eklemekle çalışmıyor  bu font kodları. Oluşturduğunuz bir sınıf yada  id bölümüne  content: "f000";  şeklinde  girerek Font Awesome ikonlarını  kullanabilirsiniz.  Font  Awesome kodlarının html için hazırlanmış olanlarının  hepsi için  birer Css kod da bulunuyor. Şuradaki adresten Font Awesome kodlarının content içine eklenebilir listesinin tamamına ulaşabilirsiniz.

Örnek olarak ben birkaç tane  ikon ekledim ama herkesin site içeriği  bu menü örneğindeki gibi  değil. Bu yüzden kendi  site içeriğinize  ugyun ikonları  seçip eklemeniz gerekiyor. Menü ikonları nav > ul > li:nth-child(2) > a:before şeklinde  sınıflandırılmış. Bu şekilde  numaralandırma 10 rakamına kadar gidiyor bu menü örneğinde.  Toplamda  8 adet kategori linki ekleyebilirsiniz. Eğer  daha fazla  kategori eklemek isterseniz aynı şekilde 11, 12 vs. diye uzatmanız  gerekiyor.

 

Kullanım

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

Css :

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

Html :

Aranan kelimeler:

  • dikey açılan menü kodu
  • dikey açılır menü
  • dikey drop menu
  • hazır dikey açılır menü kodları
1 oy (2 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikDownload buton tasarımları
Sonraki İçerikVantage
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here