<style>#menu-oculto{position:fixed;top:20px;right:-180px;background:#f8f8f8;float:right;width:180px;height:100%;font:normal
20px Oswald;display:block;padding:0;z-index:9999;-moz-transition: all
1s;-webkit-transition: all 1s;-o-transition: all 1s;}
#menu-oculto:hover
{border-left:2px solid #6b6b6b;right:0px;-moz-transition: all
1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.imagen:before{content:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCnfYjwq8_AZ-RVlx4EAVhaXec-qPFOjawxqNidQBe-egbSOqSToRBQ9aNDr_rq4I2M4h6P74w0wX6HODrguxXtZ62zKVjRfvirU6SldhUydnlfuwOyIIgM76ckpwQriL04qVDCMS0T4/w40-h120-no/MENU.gif);position:absolute;top:0;left:-40px;}
#menu-oculto
a{color:#333;text-decoration:none;display:block;padding:5px;}
#menu-oculto
a:hover{color:#fff;border-right:5px solid #000;background:#5f5f5f;}
#menu-oculto
li{list-style:none;line-height:40px;border-bottom:2px dotted #000}
#menu-oculto.active
{right:0;}
#botones{width:150px;}
.bface{float:left;margin-left:12px}.btwitter{float:left;}</style>
<link
href='https://simple-cursor.googlecode.com/svn/trunk/awesome.css'
rel='stylesheet'/>
<div
id="menu-oculto">
<ul><li><a
href="#" title="TEXTO"><i
class="icon-home"></i>Inicio</a></li>
<li><a
href="#" title="TEXTO"><i
class="icon-envelope"></i>Cosas</a></li>
<li><a
href="#" title="TEXTO"><i
class="icon-user"></i>Otras temas</a></li>
<li><a
href="#" title="TEXTO"><i
class="icon-th"></i>Noticias</a></li>
<li><a
href="#" title="indice"><i
class="icon-forward"></i>Todo sobre</a></li>
<a
class="imagen" href="#"
title="abrir/cerrar"></a></ul></div>
Podéis cambiar la palabra TEXTO, que es lo que se vera al poner el cursos encima de cada pestaña, el nombre de la pestaña Inicio, Cosas etc., y en "#" sustituir # por la url que queráis que os direccione cada pestaña sin quitar las comillas, podéis cambiar colores tamaños y el lado donde queréis que aparezca derecho o izquierdo, podéis añadir mas enlaces delante de la ultima línea de código, si queréis en el mismo enlace poner Facebook y demás tendréis que quitar el ultimo </div> y añadir el siguiente código.
<script
type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-layout="landscape" data-href="https://plus.google.com/nombremiperfil/"></div>
<div id='botones'><div class='bface'>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnombre-de-página-facebook&width=100&layout=button&action=like&show_faces=false&share=false&height=35&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;" allowtransparency="true"></iframe>
</div><div class='btwitter'>
<a href="https://twitter.com/nombre-de-twitter" class="twitter-follow-button" data-show-count="false" data-lang="es">Seguir@nombre-de- twitter</a><br/><script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter .com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div></div>
sustituir lo que apare en rojo por vuestros nombres de los distintos perfiles.<div class="g-person" data-layout="landscape" data-href="https://plus.google.com/nombremiperfil/"></div>
<div id='botones'><div class='bface'>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnombre-de-página-facebook&width=100&layout=button&action=like&show_faces=false&share=false&height=35&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;" allowtransparency="true"></iframe>
</div><div class='btwitter'>
<a href="https://twitter.com/nombre-de-twitter" class="twitter-follow-button" data-show-count="false" data-lang="es">Seguir@nombre-de
</div></div></div>