Drop down vertical nav

By

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  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 :

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading...


Leave a Comment

Your email address will not be published.

You may also like

Trend

Hot News