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("http://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("http://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>