× İletişim Formu Blogger Mobil Slider Menüler TRT Çocuk Çizgi Filmleri 5/30/2017 Etiketler : Blogger CSS Blogger javaScript Blogger jQuery Blogger Menü Blogger Mobil TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-size:100%;font-family:'Fira Sans Condensed',sans-serif;position:relative;left:0;overflow-x:hidden;margin:0 auto 0 auto} .push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease} .btn{border:none;background:#3498db;color:#fff;font-size:16px;padding:15px 0;display:block;width:100%;margin:10px 0;text-align:center;text-decoration:none} .btn:hover,.btn:active{background-color:#2980b9} .backBtn{background-color:#2980b9;font-size:16px;text-align:right} .backBtn:hover{color:#000} .menu-right .backBtn{text-align:left} .menu-top .backBtn,.menu-bottom .backBtn{text-align:left} h2{text-align:center;font-size:18px;font-weight:normal;margin:15px 0} .menu{border-right:1px solid #2980b9;background:#3498db;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;top:0;z-index:10;width:250px;height:100%} .menu a{display:block;color:#fff;padding:16px;border-top:1px solid #2980b9;text-decoration:none;position:relative;z-index:11} .menu a:last-child{border-bottom:1px solid #2980b9} .menu a:hover,.menu a:active{background-color:#2980b9} .menu-left{left:-250px} .menu-left.left-open{left:0} .menu-right{right:-250px} .menu-right.right-open{right:0} .menu-top{width:100%;top:-100%} .menu-top.top-open{top:0} .menu-bottom{width:100%;top:100%} .menu-bottom.bottom-open{top:0} .push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease} .push-left{left:-250px} .push-left.pushleft-open{left:0} .push-toleft{left:250px} .push-right{right:-250px} .push-right .backBtn{text-align:left} .push-right.pushright-open{right:0} .push-toright{left:-250px} </style> </head> <body> <nav class="menu menu-left"> <a href="#" class="backBtn">→</a> <a href="#">Sol menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-right"> <a href="#" class="backBtn">←</a> <a href="#">Sağ menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-top"> <a href="#" class="backBtn">←</a> <a href="#">Top menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-bottom"> <a href="#">Alt menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> <a href="#" class="backBtn">←</a> </nav> <nav class="menu push push-left"> <a href="#" class="backBtn">→</a> <a href="#">Push Left Menu</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu push push-right"> <a href="#" class="backBtn">←</a> <a href="#">Push Left Menu</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <div class="container"> <h2>Slayt Menüler</h2> <a href="#" id="showLeft" class="btn">Sol slayt menü</a> <a href="#" id="showRight" class="btn">Sağ slayt menü</a> <a href="#" id="showTop" class="btn">Top slayt menü</a> <a href="#" id="showBottom" class="btn">Alt slayt menü</a> <h2>Çekmeli Menüler</h2> <a href="#" id="showLeftPush" class="btn">Sola çekmeli menü</a> <a href="#" id="showRightPush" class="btn">Sağa çekmeli menü</a> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script> $('#showLeft').click(function() { $('.menu-left').toggleClass('left-open'); }); $('#showRight').click(function() { $('.menu-right').toggleClass('right-open'); }); $('#showTop').click(function() { $('.menu-top').toggleClass('top-open'); }); $('#showBottom').click(function() { $('.menu-bottom').toggleClass('bottom-open'); }); $('.backBtn').click(function() { $('.menu').removeClass('top-open bottom-open right-open left-open pushleft-open pushright-open'); $('body').removeClass('push-toleft push-toright'); }); $('body').addClass('push'); $('#showLeftPush').click(function () { $('body').toggleClass('push-toleft'); $('.push-left').toggleClass('pushleft-open'); }); $('#showRightPush').click(function () { $('body').toggleClass('push-toright'); $('.push-right').toggleClass('pushright-open'); }); </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Mobil Slider Menüler" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Mobil Slider Menüler TRT Çocuk Çizgi Filmleri 5/30/2017 Etiketler : Blogger CSS Blogger javaScript Blogger jQuery Blogger Menü Blogger Mobil TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-size:100%;font-family:'Fira Sans Condensed',sans-serif;position:relative;left:0;overflow-x:hidden;margin:0 auto 0 auto} .push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease} .btn{border:none;background:#3498db;color:#fff;font-size:16px;padding:15px 0;display:block;width:100%;margin:10px 0;text-align:center;text-decoration:none} .btn:hover,.btn:active{background-color:#2980b9} .backBtn{background-color:#2980b9;font-size:16px;text-align:right} .backBtn:hover{color:#000} .menu-right .backBtn{text-align:left} .menu-top .backBtn,.menu-bottom .backBtn{text-align:left} h2{text-align:center;font-size:18px;font-weight:normal;margin:15px 0} .menu{border-right:1px solid #2980b9;background:#3498db;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;top:0;z-index:10;width:250px;height:100%} .menu a{display:block;color:#fff;padding:16px;border-top:1px solid #2980b9;text-decoration:none;position:relative;z-index:11} .menu a:last-child{border-bottom:1px solid #2980b9} .menu a:hover,.menu a:active{background-color:#2980b9} .menu-left{left:-250px} .menu-left.left-open{left:0} .menu-right{right:-250px} .menu-right.right-open{right:0} .menu-top{width:100%;top:-100%} .menu-top.top-open{top:0} .menu-bottom{width:100%;top:100%} .menu-bottom.bottom-open{top:0} .push{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease} .push-left{left:-250px} .push-left.pushleft-open{left:0} .push-toleft{left:250px} .push-right{right:-250px} .push-right .backBtn{text-align:left} .push-right.pushright-open{right:0} .push-toright{left:-250px} </style> </head> <body> <nav class="menu menu-left"> <a href="#" class="backBtn">→</a> <a href="#">Sol menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-right"> <a href="#" class="backBtn">←</a> <a href="#">Sağ menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-top"> <a href="#" class="backBtn">←</a> <a href="#">Top menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu menu-bottom"> <a href="#">Alt menü</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> <a href="#" class="backBtn">←</a> </nav> <nav class="menu push push-left"> <a href="#" class="backBtn">→</a> <a href="#">Push Left Menu</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <nav class="menu push push-right"> <a href="#" class="backBtn">←</a> <a href="#">Push Left Menu</a> <a href="#">Hakkında</a> <a href="#">Ürünler</a> <a href="#">Servisler</a> <a href="#">Ziyaretçiler</a> <a href="#">İletişim</a> </nav> <div class="container"> <h2>Slayt Menüler</h2> <a href="#" id="showLeft" class="btn">Sol slayt menü</a> <a href="#" id="showRight" class="btn">Sağ slayt menü</a> <a href="#" id="showTop" class="btn">Top slayt menü</a> <a href="#" id="showBottom" class="btn">Alt slayt menü</a> <h2>Çekmeli Menüler</h2> <a href="#" id="showLeftPush" class="btn">Sola çekmeli menü</a> <a href="#" id="showRightPush" class="btn">Sağa çekmeli menü</a> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script> $('#showLeft').click(function() { $('.menu-left').toggleClass('left-open'); }); $('#showRight').click(function() { $('.menu-right').toggleClass('right-open'); }); $('#showTop').click(function() { $('.menu-top').toggleClass('top-open'); }); $('#showBottom').click(function() { $('.menu-bottom').toggleClass('bottom-open'); }); $('.backBtn').click(function() { $('.menu').removeClass('top-open bottom-open right-open left-open pushleft-open pushright-open'); $('body').removeClass('push-toleft push-toright'); }); $('body').addClass('push'); $('#showLeftPush').click(function () { $('body').toggleClass('push-toleft'); $('.push-left').toggleClass('pushleft-open'); }); $('#showRightPush').click(function () { $('body').toggleClass('push-toright'); $('.push-right').toggleClass('pushright-open'); }); </script> </body> </html>
Yorum Gönder