Web sayfanızın sağ tarafına ekleyebileceğiniz kaydırma çubuğu ile beraber aşağı yukarı inip çıkan bir menü örneği. Menü örneği aslında sosyal ağ siteleri için hazırlanmış olsada kendinizce biraz değişiklik yaparak güzel bir menü örneği haline getirebilirsiniz. Mouse ile üzerine geldiğiniz buton sol tarafa doğru slayt birşekilde açılıyor. Bir menü olarak kullanabilmeniz için tek yapmanız gereken menülere uyarlanmış ikonlar oluşturmak ve gerekli url adreslerini başlıklarıyla beraber girmek.
Kullanım
Head etiketleri arasına eklenmesi gereken bölüm.
Css :
body {
background: url(img/bg.png) repeat scroll 0% 0% black;
color: #E6E6E6;
font: 13px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;
}
/* social button */
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.rt-social-buttons a, .loginbtn {background: none repeat scroll 0 0 rgb(34, 34, 34);background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.rt-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 10px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.rt-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 rgb(150, 0, 0);border:1px solid rgb(70, 0, 0);
right: 119px;}
.rt-social-buttons a#rt-buzz-btn span {background-image: url(img/socialsprite.png);background-position:-2px -68px;}
.rt-social-buttons a#rt-twitter-btn span {background-image: url(img/socialsprite.png);background-position:-2px -24px;}
.rt-social-buttons a#rt-facebook-btn span {background-image: url(img/socialsprite.png);background-position:-2px -46px;}
.rt-social-buttons a#rt-rss-btn span {background-image: url(img/socialsprite.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(img/socialsprite.png);background-position:-2px 0px;}
@keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-moz-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-webkit-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
a:link, a:visited {
color: #E6E6E6;
text-align: center;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="staticbar"> <div class="login"> <div id="rt-login-button"> <a class="loginbtn buttontext" href="https://www.mintik.com/?p=12002" rel="nofollow" target="_blank" title="Login"> <span class="desc">Login</span></a> </div> <div class="clear"></div> </div> <div class="rt-social-buttons"> <a href="https://twitter.com/Blog_Mintik" id="rt-twitter-btn" rel="nofollow" title="Twitter Blog_Mintik"> <span>Twitter</span></a> <a href="https://facebook.com/mintiik" id="rt-facebook-btn" rel="nofollow" title="Facebook Mintik"> <span> Facebook</span></a> <a href="https://plus.google.com/u/0/b/105961267020169631117/105961267020169631117/posts" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus Mintik"> <span>Google Plus</span></a> <a href="https://feeds.feedburner.com/mintik" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Mintik"> <span>Subscribe to RSS Feed</span></a> </div> </div>