Register    Sign in
Authentification
uCoz Scripts » Others » –

Windows 8 style social menu

A beautiful social menu in the right part of your site!
CSS:
Code
/* --- 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');
}
/* --- ------------- --- */


And where you want to showing the menu:

Code
<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>


Source: into.hu






Autor: bigblog  2017-12-16, 14:58:32   Views : 1765   

Tags:


Total comments (2)
avatar
1 vmarci21 • 19:23:52, 2013-11-11
Please linking the corresponding article:
http://into.hu/hirek/134
thanks: vmarci21, into.hu administrator
avatar
2 bigblog • 21:32:00, 2013-11-11
Ohh... Sorry, vmarci21 biggrin

P.S.: I knowing this guy biggrin
avatar