Drop down vertical nav
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 :
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700"); @import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css"); * { margin: 0; padding: 0; box-sizing: border-box; } :before, :after { content: ''; display: block; position: absolute; box-sizing: border-box; } html, body { height: 100%; } body { display: flex; font: 15px/1 Lato, sans-serif; color: #777; } nav { width: 200px; background: #4a6a8a; } nav ul span { display: block; padding: 15px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; border-bottom: 1px solid #53779b; } nav ul a { position: relative; display: block; padding: 15px 15px 17px 50px; color: #fff; border-bottom: 1px solid #53779b; text-decoration:none; } nav ul a:hover, { background: #53779b; } nav ul a:before { font: normal 16px FontAwesome; top: 15px; left: 18px; } nav > ul > li:nth-child(2) > a:before { content: 'f00a'; } nav > ul > li:nth-child(3) > a:before { content: 'f015'; } nav > ul > li:nth-child(4) > a:before { content: 'f0c3'; } nav > ul > li:nth-child(5) > a:before { content: 'f13c'; } nav > ul > li:nth-child(6) > a:before { content: 'f108'; } nav > ul > li:nth-child(7) > a:before { content: 'f03e'; } nav > ul > li:nth-child(8) > a:before { content: 'f121'; } nav > ul > li:nth-child(10) > a:before { content: 'f002'; } /** sub panel **/ nav ul li ul { width:250px; margin-left:-250px; opacity:0; margin-top:-50px; position:absolute; visibility:hidden; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; } nav ul li:hover ul { background-color:#53779b; margin-left:200px; margin-top:-48px; visibility:visible; opacity:1; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; } nav ul li ul li { background-color:#53779b; list-style:none; } nav ul li ul li:hover { width:250px; background-color:#53779b; } nav ul li ul a { display: block; text-align:center; color: #fff; padding: 15px 15px 17px 0px; border-bottom: 1px solid #4a6a8a; } nav ul li ul a:hover { position: relative; display: block; background-color:#4a6a8a; color: #fff; }
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<nav> <ul> <li><span>Navigation</span></li> <li><a class="active">Kategoriler</a></li> <li><a href="http://mintik.com">Anasayfa</a></li> <li><a href="http://mintik.com/category/jquery/">jQuery</a> <ul> <li><a href="#">Form</a> <li><a href="#">Animation</a> <li><a href="#">SlideShow</a> <li><a href="#">Slider</a> </ul> </li> <li><a href="http://mintik.com/category/css/">Css3</a></li> <li><a href="http://mintik.com/category/wordpress/">Wordpress</a> <ul> <li><a href="http://mintik.com/category/theme/">Theme</a> <li><a href="http://mintik.com/category/wordpress-eklentiler/">Plugin</a> <li><a href="http://mintik.com/category/wordpress-widget/">Widget</a> </ul> </li> <li><a href="http://mintik.com/category/photoshop-tutorials/">Photoshop</a></li> <li><a href="http://mintik.com/?p=14981">Tutorial</a></li> <li><span>Other</span></li> <li><a href="#">Search</a></li> </ul> </nav>