Profesyonel CSS katlama efektli Dikey Sidebar Menü

Bu eklenti sadece CSS ve bazı betik kodları ile yapılmıştır. Son derece kullanıcı dostu ve blogunuza uyulamanız kolaydır. Bu eklenti bazı yerlerde JavaScript'i kullanılarak yapılmıştır. Ama ben CSS kodlarıyla yaptım. Çünkü script kodlar genel olarak site açılısını yavaşlatan kodlardır. Sitenizde ne kadar az script kodu bulunursa okadar iyidir. CSS katlama efektli dikey sidebar menüsü, buton üzerine gelindiginde içe dogru katlanma efekti ile şık bir görünüm yaratır. Ve blogunuza profesyonel görünüm verir. Ayrıca açılıp kapanma fonksiyonuda var. Etiketlerinizi, sosyal medya linklerinizi yada sabit sayfalarınızı bu menüyle sidebarınızda kullanabilirsiniz.

Menüyü sidebarınıza eklemek için

• Blogger panelinize giriş yapın Yerleşim → Gadget Ekle → HTML/JavaScript yolunu takip edin.
• Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
• Kaydet diyip çıkın.

<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->
<style>
.medekatlamamenu{vertical-align:middle;width:300px;display:inline-block;font-family:arial, sans-serif;transform:translate3d(0,0,0);}
.medekatlamamenu input{position:absolute;left:-9999px;}
.medekatlamamenu #togglemedekatlamamenu:checked ~ ul{max-height:300px;padding-bottom:1em;}
.togglemedekatlamamenu{background:#FC634B;color:#FFF;display:block;text-align:center;cursor:pointer;font-family:arial, sans-serif;padding:.75em;}
.togglemedekatlamamenu:before{content:"\2630";font-size:22px;font-family: initial;vertical-align:middle;}
.medekatlamamenu ul{margin-top:1px;text-align:left;max-height:0;overflow:hidden;padding:0;transition:300ms ease all;list-style:none;line-height:1;}
.medekatlamamenu li{margin-bottom:1px;position:relative;z-index:10;transition:300ms ease all;}
.medekatlamamenu li a{display:block;position:relative;width:100%;font-size: 14px;font-weight: 600;background:silver;text-decoration:none;color:#FFF;box-sizing:border-box;transition:300ms ease all;padding:1em;}
.medekatlamamenu li:hover a{width:99%;margin-left:1%;box-shadow:inset 300px 0 300px -300px rgba(255,255,255,0.6);}
.medekatlamamenu li:before{content:"";position:absolute;width:50%;height:30%;left:1%;bottom:16px;box-shadow:10px 0 0 #000;transition:300ms ease all;transform:rotate(0deg);}
.medekatlamamenu li:hover:before{box-shadow:10px 0 30px #000;transform:rotate(-4deg);bottom:6px;}
.medekatlamamenu li:hover + li{z-index:1;}
</style>
<nav class="medekatlamamenu">
 <input type="checkbox" id="togglemedekatlamamenu" checked />
 <label for="togglemedekatlamamenu" class="togglemedekatlamamenu"></label>
  <ul>
   <li><a href="http://meftunmede.blogspot.com/search/label/Seo">SEO</a></li>
   <li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">Blogger Eklentileri</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
<!-Burdan itibaren yukarıdaki şekilde menünüzü çoğaltabilirsiniz->
  </ul>
</nav>
<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->

■ Kırmızıyla işaretlediğim bölümleri istediğinize göre değiştirmeyi unutmayın. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...