Fixed SocialMenu

By

sosyal
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 :

 



Leave a Comment

Your email address will not be published.

You may also like

Trend