Blogger Animasyonlu Açılır Menü

23.5.16
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.

Blogger Animasyonlu Açılır Menü

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


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.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

5 yorum

avatar
Unknown Yönetici

Merhabalar. Her adımı dikkatle uyguladım. Ancak tıkladığımda açılmıyor. En üste yönlendiriyor ve www.example.com www.example.com/# olarak değişiyor. Sorunun çözümü sizde var mıdır acaba? Yabancı siteleri de dolandım, bu dertten muzdarip çok insan var ancak çözüm önerilerini pek anlayamadım. Sonuçta kod bilgim sınırlı. jquerry kısmına bir düzenleme gerek sanırım. Yardımcı olursanız çok sevinirim.

Cevap

Merhaba, bu eklenti ile ilgili mi sorun yaşıyorsunuz? Şuan tüm kodları kontrol ettim herhangi bir problem görünmüyor.. Eğer hala sorun yaşarsanız lütfen tekrardan bana yazın blog siteniz üzerinden inceleme yaparız.

Cevap

Websitesini açtığım gün yerleştirdiğimi zannettiğim https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' kodunu ekleyince bütün sorunlar halloldu. Şimdi şahane bir şekilde çalışıyor. Yine yeniden etiket duyarlı bir şekilde ayarladığınız için teşekkürler.

Cevap

Hatlar karıştı etiket duyarlı kısmını buraya yazmayacaktım. Neyse, işin özü jquerry/3.1.1 li kod olmadı mı birçok eklenti çalışmıyor.

Cevap

Rica ederim, bizi takip ettiğiniz için ben teşekkür ederim.

Cevap