× İletişim Formu Blogger Animasyonlu Açılır Menü Arlina Design 10/01/2017 Etiketler : Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;} .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)}} </style> </head> <body> <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="#">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> </div> <script> 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> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Animasyonlu Açılır Menü" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Animasyonlu Açılır Menü Arlina Design 10/01/2017 Etiketler : Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;} .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)}} </style> </head> <body> <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="#">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> </div> <script> 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> </body> </html>
Yorum Gönder