Açılır Drop Down Dikey Navigasyon Menü

   Daha önceleri Blogger için farklı şekillerde ve özelliklerde sizinle paylaştığım Blogger menülerine şimdi bir yenisini daha ekliyoruz.Bu menüde diğerlerinden farklı bir kaç özelliğinin olması kullanıcılara kolaylık sağlanmasıdır.Blogger sitenizin sol kısmında yer alacak olan Açılır(Drop down) Dikey Navigasyon menüsü kenar kısımlarında bulunan simgeleri kolaylıkla değiştirebilirsiniz,ve menü rengini sitenize göre düzenleyerek uygun olmasını sağlayabilirsiniz.

   Menüde 8 adet ayrı kategoride menü bulunmaktadır.Siz bu menüleri çoğaltabilirsiniz veya azaltabilirsiniz.Menüleri çoğaltmanız için CSS kodları içerisinde ki 10'a kadar olan kod bölünden kodları çoğaltarak menü ekleyebilirsiniz.

Şimdi bu anladımların nasıl yapabileceğimizi görelim.

1- Blogger kumanda panelinizden Şablon Düzenle diyerek şablon kodlarımıza ulaşalım.
Ctrl+F tuşları ile head etiketleri arasına ekleyin. etiketini aradın.Bulduğunuz kodunun hemen alt kısmına aşağıda ki kodları ekleyin.

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");<br /> @import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");<br /> * {<br /> margin: 0;<br /> padding: 0;<br /> box-sizing: border-box;<br /> }<br /> <br /> :before, :after {<br /> content: '';<br /> display: block;<br /> position: absolute;<br /> box-sizing: border-box;<br /> }<br /> <br /> html, body {<br /> height: 100%;<br /> }<br /> body {<br /> display: flex;<br /> font: 15px/1 Lato, sans-serif;<br /> color: #777;<br /> }<br /> nav {<br /> width: 200px;<br /> background: #4a6a8a;<br /> }<br /> nav ul span {<br /> display: block;<br /> padding: 15px;<br /> color: rgba(255, 255, 255, 0.5);<br /> text-transform: uppercase;<br /> border-bottom: 1px solid #53779b;<br /> }<br /> nav ul a {<br /> position: relative;<br /> display: block;<br /> padding: 15px 15px 17px 50px;<br /> color: #fff;<br /> border-bottom: 1px solid #53779b;<br /> text-decoration:none;<br /> }<br /> nav ul a:hover, {<br /> background: #53779b;<br /> }<br /> nav ul a:before {<br /> font: normal 16px FontAwesome;<br /> top: 15px;<br /> left: 18px;<br /> }<br /> nav > ul > li:nth-child(2) > a:before {<br /> content: 'f00a';<br /> }<br /> nav > ul > li:nth-child(3) > a:before {<br /> content: 'f015';<br /> }<br /> nav > ul > li:nth-child(4) > a:before {<br /> content: 'f0c3';<br /> }<br /> nav > ul > li:nth-child(5) > a:before {<br /> content: 'f13c';<br /> }<br /> nav > ul > li:nth-child(6) > a:before {<br /> content: 'f108';<br /> }<br /> nav > ul > li:nth-child(7) > a:before {<br /> content: 'f03e';<br /> }<br /> nav > ul > li:nth-child(8) > a:before {<br /> content: 'f121';<br /> }<br /> nav > ul > li:nth-child(10) > a:before {<br /> content: 'f002';<br /> }<br /> <br /> /** sub panel **/<br /> nav ul li ul {<br /> width:250px;<br /> margin-left:-250px;<br /> opacity:0;<br /> margin-top:-50px;<br /> position:absolute;<br /> visibility:hidden;<br /> -webkit-transition:0.3s;<br /> -moz-transition:0.3s;<br /> -ms-transition:0.3s;<br /> -o-transition:0.3s;<br /> transition:0.3s;<br /> }<br /> nav ul li:hover ul {<br /> background-color:#53779b;<br /> margin-left:200px;<br /> margin-top:-48px;<br /> visibility:visible;<br /> opacity:1;<br /> -webkit-transition:0.3s;<br /> -moz-transition:0.3s;<br /> -ms-transition:0.3s;<br /> -o-transition:0.3s;<br /> transition:0.3s;<br /> }<br /> nav ul li ul li {<br /> background-color:#53779b;<br /> list-style:none;<br /> }<br /> nav ul li ul li:hover {<br /> width:250px;<br /> background-color:#53779b;<br /> }<br /> nav ul li ul a {<br /> display: block;<br /> text-align:center;<br /> color: #fff;<br /> padding: 15px 15px 17px 0px;<br /> border-bottom: 1px solid #4a6a8a;<br /> }<br /> nav ul li ul a:hover {<br /> position: relative;<br /> display: block;<br /> background-color:#4a6a8a;<br /> color: #fff;<br /> }
Menüleri artırmanız için şu kodları çoğaltarak yapabilirsiniz.!

}<br /> nav > ul > li:nth-child(2) > a:before {<br /> content: 'f00a';<br /> }<br /> nav > ul > li:nth-child(3) > a:before {<br /> content: 'f015';<br /> }<br /> nav > ul > li:nth-child(4) > a:before {<br /> content: 'f0c3';<br /> }<br /> nav > ul > li:nth-child(5) > a:before {<br /> content: 'f13c';<br /> }<br /> nav > ul > li:nth-child(6) > a:before {<br /> content: 'f108';<br /> }<br /> nav > ul > li:nth-child(7) > a:before {<br /> content: 'f03e';<br /> }<br /> nav > ul > li:nth-child(8) > a:before {<br /> content: 'f121';<br /> }<br /> nav > ul > li:nth-child(10) > a:before {<br /> content: 'f002';<br /> }
2- Daha sonra ki işlem şimdi menülerimize ait kodları HTML body etiketleri arasına ekleyerek şablonu kaydedip çıkıyoruz.

<nav> <br /> <ul> <li><span>Navigation</span></li> <li><a class="active">Kategoriler</a></li> <li><a href="#">Anasayfa</a></li> <li><a href="http://mintik.com/category/jquery/">jQuery</a><br /> <ul> <li><a href="#">Form</a> <br /> <li><a href="#">Animation</a> <br /> <li><a href="#">SlideShow</a> <br /> <li><a href="#">Slider</a> <br /> </ul> </li> <li><a href="#">Css3</a></li> <li><a href="#">Wordpress</a> <br /> <ul> <li><a href="#">Theme</a> <br /> <li><a href="#">Plugin</a> <br /> <li><a href="#">Widget</a> <br /> </ul> </li> <li><a href="#">Photoshop</a></li> <li><a href="#">Tutorial</a></li> <li><span>Other</span></li> <li><a href="#">Search</a></li> </ul> </nav>
Ön İzleme 

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...