Menu lateral flotante

un menu al lateral izquirdo flotante muy bueno para atajos o para edicion de perfil :D

demo : aki

codigo:

Código:

<div style="height:4px"></div><div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
<div style="position: fixed; top: 200px; left: 3px;font-family: 'Advent Pro', sans-serif;font-variant: small-caps;color:#B3B3B3;">
    <div id="pyridesplegador" style="height:265px; width:50px;cursor: pointer; background-color: #292929;border-top-left-radius: 10px 5px; border-top-right-radius: 55px 150px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 10px 5px; text-align:center;" onClick="$('#pyridesplegable').toggle(1000)"><div style="-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);position: relative;bottom: -175px;font-size:30px;text-align: right;">Menu</div></div><div id="pyridesplegable" style="top:-265px;position: relative; height:265px; width:300px;background-color: #292929;border-top-left-radius: 10px 5px; border-top-right-radius: 55px 150px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 10px 5px; display: none;"><div style="-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);position: relative;bottom: -65px;right:-125px;font-size:30px;text-align: right;">Menu</div><div style="-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);position: relative;bottom: 105px;right:-120px;font-size:18px;text-align: right;cursor:pointer;" onClick="$('#pyridesplegable').toggle(1000)">Cerrar</div><div style="height:230px; width: 1px;background-color:#B3B3B3;position:relative; top: -40px; right:-250px;"></div><div style="width:240px; text-align: center;height: 20px;margin-left: 5px;margin-top: -285px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link1">link1</a></div><br>


    <div style="width:240px; text-align: center;height: 20px;margin-left: 5px;margin-top:-18px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link2">link 2</a></div><br>


    <div style="width:240px; text-align: center;height: 20px;margin-left: 5px;margin-top:-18px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link3">link 3</a></div><br>

    <div style="width:240px; text-align: center;height: 20px;margin-left: 5px;margin-top:-18px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link4">link 4</a></div><br>

    <div style="width:240px; text-align: center;height: 20px;margin-top:-18px;margin-left: 5px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link5">link 5</a></div>

<br>
    <div style="width:240px; text-align: center;height: 20px;margin-left: 5px;margin-top:-18px;padding: 10px 0px 10px 0px;transition: all 1s;-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;border-radius:5px;" onmouseover="this.style.backgroundColor='#6B6B6B'" onmouseout="this.style.backgroundColor='transparent'">

<a style="color:#B3B3B3;" href="url del link6">link 6</a></div>
   
</div>
<span class="corners-bottom"><span></span></span>

son 6 link modificables

espero q les guste :D

Este se ve medio mal u.u