Blogger Animasyonlu Açılır Menü

5/23/2016
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 src='https://googledrive.com/host/0B2RaeOjprqzBSkZjUVlIeGZydHc' tipi='text/javascript'></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.
/* Blogger Eklentileri (http://bloggereklentileri.blogspot.com.tr/) */<div class="container">
<h1 class="title">Açılır Menü</h1>
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Menü <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</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="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</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="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Servisler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</li>
</ul>
<p class="text-center">
<a href="http://bloggereklentileri.blogspot.com" target="_blank">Blogger Eklentileri</a>
</p>
</div>
4. Blogunuzu kontrol edin.
extension Blogger Eklentileri
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.
Blogger Flaş Haber Besleme ID Eklentisi

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok