Blogger Animasyonlu Açılır Menü

Animasyonlu açılır menü nasıl oluşturulur? Blogger sitelerinizde oluşturmak istediğiniz animasyonlu açılır menü için gerekli HTML, CSS ve Javascript kodları aşağıdadır.

Blogunuzun tasarımına ve renk uyumlarını ayarlamak için aşağıdaki CSS kodlarını düzenleyebilirsiniz.

Blog animasyonlu açılır menü nasıl oluşturulur?

1- Blogger hesabınaza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle tıklayın CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

.container{width:100%;margin:0 auto}
.container > ul{list-style:none;padding:0;margin:0 0 20px 0}
.dropdown a{text-decoration:none}
.dropdown [data-toggle="dropdown"]{position:relative;display:block;color:white;background:#2980B9;-moz-box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;-webkit-box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;box-shadow:0 1px 0 #409ad5 inset,0 -1px 0 #20638f inset;text-shadow:0 -1px 0 rgba(0,0,0,0.3);padding:10px}
.dropdown [data-toggle="dropdown"]:hover{background:#2c89c6}
.dropdown .icon-arrow{position:absolute;display:block;font-size:0.7em;color:#fff;top:14px;right:10px}
.dropdown .icon-arrow.open{-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-moz-transition:-moz-transform 0.6s;-o-transition:-o-transform 0.6s;-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s}
.dropdown .icon-arrow.close{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transition:-moz-transform 0.6s;-o-transition:-o-transform 0.6s;-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s}
.dropdown .icon-arrow:before{content:'\25BC'}
.dropdown .dropdown-menu{max-height:0;overflow:hidden;list-style:none;padding:0;margin:0}
.dropdown .dropdown-menu li{padding:0}
.dropdown .dropdown-menu li a{display:block;color:#6e6e6e;background:#EEE;-moz-box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;-webkit-box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;box-shadow:0 1px 0 white inset,0 -1px 0 #d4d4d4 inset;text-shadow:0 -1px 0 rgba(255,255,255,0.3);padding:10px 10px}
.dropdown .dropdown-menu li a:hover{background:#f6f6f6}
.dropdown .show,.dropdown .hide{-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;transform-origin:50% 0%}
.dropdown .show{display:block;max-height:9999px;-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1);animation:showAnimation 0.5s ease-in-out;-moz-animation:showAnimation 0.5s ease-in-out;-webkit-animation:showAnimation 0.5s ease-in-out;-moz-transition:max-height 1s ease-in-out;-o-transition:max-height 1s ease-in-out;-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out}
.dropdown .hide{max-height:0;-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0);animation:hideAnimation 0.4s ease-out;-moz-animation:hideAnimation 0.4s ease-out;-webkit-animation:hideAnimation 0.4s ease-out;-moz-transition:max-height 0.6s ease-out;-o-transition:max-height 0.6s ease-out;-webkit-transition:max-height 0.6s ease-out;transition:max-height 0.6s ease-out}
@keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@-moz-keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@-webkit-keyframes showAnimation{0%{-moz-transform:scaleY(0.1);-ms-transform:scaleY(0.1);-webkit-transform:scaleY(0.1);transform:scaleY(0.1)}
40%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.04);-ms-transform:scaleY(1.04);-webkit-transform:scaleY(1.04);transform:scaleY(1.04)}
100%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}}
@keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}
@-moz-keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}
@-webkit-keyframes hideAnimation{0%{-moz-transform:scaleY(1);-ms-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1)}
60%{-moz-transform:scaleY(0.98);-ms-transform:scaleY(0.98);-webkit-transform:scaleY(0.98);transform:scaleY(0.98)}
80%{-moz-transform:scaleY(1.02);-ms-transform:scaleY(1.02);-webkit-transform:scaleY(1.02);transform:scaleY(1.02)}
100%{-moz-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0)}}

2- Aşağıdaki animasyonlu açılır menü javascript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script type='text/javascript'>
//<![CDATA[
var dropdown=document.querySelectorAll(".dropdown");var dropdownArray=Array.prototype.slice.call(dropdown,0);dropdownArray.forEach(function(e){var t=e.querySelector('a[data-toggle="dropdown"]'),n=e.querySelector(".dropdown-menu"),r=t.querySelector("i.icon-arrow");t.onclick=function(e){if(!n.hasClass("show")){n.classList.add("show");n.classList.remove("hide");r.classList.add("open");r.classList.remove("close");e.preventDefault()}else{n.classList.remove("show");n.classList.add("hide");r.classList.remove("open");r.classList.add("close");e.preventDefault()}}});Element.prototype.hasClass=function(e){return this.className&&(new RegExp("(^|\\s)"+e+"(\\s|$)")).test(this.className)}
//]]>
</script>

3- Aşağıdaki animasyonlu açılır menü HTML kodunu blog kumanda panelinden Yerleşim > Gedget Ekle > HTML/JavaScript Ekle tıklayın, HTML kodu ekleyin ve kaydedin.

<div class="container">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-1 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-2 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü-3 <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
 <li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
<li><a href="#">Alt Menü</a></li>
</ul>
</li>
</ul>
</div>

4- Kaydedin ve blogunuzu kontrol edin.

Bknz: Blogger Flaş Haber Besleme ID Eklentisi

Ön İzleme

Blogger Animasyonlu Açılır Menü hakkında daha fazla bilgi için iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.