<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
body {font-family:'Roboto Condensed',sans-serif;margin:20px;}
/*<![CDATA[*/
.mobile-btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}.mobile-btn:active:focus,.mobile-btn:focus{outline:0}.mobile-btn:focus,.mobile-btn:hover{color:#333;text-decoration:none;outline:0}.mobile-btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.mobile-btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.mobile-btn-purple{background:#558B2F;border-bottom:2px solid #33691E;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}.mobile-btn-purple:active,.mobile-btn-purple:focus,.mobile-btn-purple:hover{background:#689F38;color:#fff}#mobile_shop{margin-top:30px;background:#fff3e0;padding:15px 15px 5px;border-radius:3px!important;}#mobileshop:target{display:block;margin-top:-80px;height:80px;visibility:hidden}#mobile_shop h4{font-size:16px;font-weight:600;color:#444;margin:0;line-height:1}#mobile_shop p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}#mobile_shop a{margin-bottom:10px;margin-right:10px}
.mobile-btn i{font-size:24px;vertical-align:text-bottom;}
/*]]>*/
</style>
</head>
<body>
<div id='mobile_shop'>
<span id='mobileshop'/>
<h4>Mobil Alış-Veriş Whatsapp ve SMS Butonu</h4>
<p>Açıklama</p>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' href='#'><i class="fa fa-whatsapp"></i> Whatsapp</a>
<a class='mobile-btn mobile-btn-purple mobile-btn-lg' href='#'><i class="fa fa-mobile"></i> SMS</a>
</div>
</body>
</html>
Blogger Mobil etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Mobil etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Mobil Slider Menüler
Blogger CSS Blogger javaScript Blogger jQuery Blogger Menü Blogger Mobil<!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>
Kaydol:
Kayıtlar (Atom)