✰ Side Menu ✰

.BoxMenu{ color:black; background-color:#000000; background-image: url('http://ekladata.com/kFexQBEkGev2qQP_kHCBtQ0tyNw.jpg'); box-shadow: 1px 2px 25px #000; overflow:hidden; width:104px;height:76px; position:fixed; left:-76px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; border-radius:0px 8px 8px 0px;} .contenu { border:3px ridge grey; height:70px; width:70px;} .contenu img {width:70px; height:70px;} .txt{ text-shadow: 1px 1px 2px black; border:3px ridge grey; font-size:15px; color:#bccced; text-align:center; position:relative; left:52px; top:-52px; width:70px; height:22px; border-radius:0px 0px 8px 8px; transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -moz-transform: rotate(270deg); } .BoxMenu:hover {left:0px;}

<div class="BoxMenu" style="top: 100px;"> <div class="contenu"><a href="https://www.facebook.com/buns.watson/?viewas="> <img src="http://ekladata.com/SdtKNTLL-6O2GjMV-R6hQ_I5pMg@128x128.png" alt="Menu Principal" width="128" height="128" /> </a></div> <div class="txt">Facebook</div> </div> <div class="BoxMenu" style="top: 176px;"> <div class="contenu"><a href="https://www.youtube.com/@bunswatson4381/playlists"><img src="http://ekladata.com/uGnB1AoGv0DwtPJYyKtkWOBlpv0@128x128.png" alt="Menu Principal" width="128" height="128" /></a></div> <div class="txt">Youtube</div> </div> <div class="BoxMenu" style="top: 252px;"> <div class="contenu"><a href="https://www.pinterest.com/cyberneutron/"> <img src="http://ekladata.com/qLu61oP4K3eITJfxm87S7vBHZmA@128x128.png" alt="Menu Principal" width="128" height="128" /> </a></div> <div class="txt">Pinterest</div> </div> <div class="BoxMenu" style="top: 358px;"> <div class="contenu"><a href="http://watson-penelope.eklablog.net/"><span style="color: #bccced;">Odyssey</span></a> <a href="https://www.eklablog.com/profile/31108492"><span style="color: #bccced;">Profil</span></a></div> <div class="txt">Webside</div> </div>