79003192-7495346-7317815-png

Социальное меню в стиле Windows 8

Красивое социальное меню в правой части сайта!


CSS:

Код
/* --- Modern social-bar --- */ 
 #smenu { 
  position:fixed; 
  top:100px; 
  right:-50px; 
  width:48px; 
  height:340px; 
  background:transparent; 
  border-left:1px solid transparent; 
  padding:10px; 
   
  transition-duration:0.5s; 
 } 

 #smenu:hover { 
 position:fixed; 
 right:0; 

 transition-duration:0.5s; 
 } 

 #smenu a { 
  text-decoration:none; 
 } 

 #smenu .icon { 
  width:48px; 
  height:48px; 
  margin-bottom:20px; 
  opacity:0.6; 
  transition-duration:0.5s; 
 } 

 #smenu .icon:hover { 
  opacity:1; 
  transition-duration:0.5s; 
 } 

 #smenu .rss { 
  background:transparent url('http://i.imgur.com/iooRSBb.png'); 
 } 

 #smenu .facebook { 
  background:transparent url('http://i.imgur.com/q24ul0O.png'); 
 } 

 #smenu .twitter { 
  background:transparent url('http://i.imgur.com/Cg4kzQf.png'); 
 } 

 #smenu .google { 
  background:transparent url('http://i.imgur.com/OPYqnhX.png'); 
 } 

 #smenu .email { 
  background:transparent url('http://i.imgur.com/aj3eNAO.png'); 
 } 

 #smenu .youtube { 
  background:transparent url('http://i.imgur.com/hnYvnzp.png'); 
 } 
 /* --- ------------- --- */

И где вы хотите показать меню:

Код
<div id="smenu"> 
  <a href="/forum/rss"><div class="icon rss"></div></a> 
  <a href="FACEBOOK LINK" target="_blank"><div class="icon facebook"></div></a> 
  <a href="GOOGLE+ LINK" target="_blank"><div class="icon google"></div></a> 
  <a href="YOUTUBE LINK" target="_blank"><div class="icon youtube"></div></a> 
  <a href="E-MAIL ADRESS"><div class="icon email" target="_blank"></div></a> 
 </div>

 

Поделиться ссылкой:

Добавить комментарий:

Ваш адрес email не будет опубликован. Обязательные поля помечены *