Hướng dẫn tạo menu trượt dọc với hiệu ứng tuyệt đẹp cho blogger
Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn cách tạo menu trượt dọc theo trang với hiệu ứng tuyệt đẹp cho blogger.
HƯỚNG DẪN THỰC HIỆN
#snav.en{left:0;text-align:left;width: 6%;}
#snav.en li span{left:-350px}
#snav.en li a:hover span{left:35px}
#snav.ar{right:0;text-align:right}
#snav.ar li span{right:-100px}
#snav.ar li a:hover span{right:35px}
#snav{position:fixed;top:20%;z-index:9999;font-size:18px;font-family:'Open Sans',sans-serif}
#snav ul{list-style:none}
#snav *{margin:0;padding:0;outline:0;transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#snav li a{text-decoration:none;color:#fff;display:block;position:relative}
#snav .fa{vertical-align:middle;font-size:18px;width:35px;height:35px;line-height:35px;text-align:center;position:relative;z-index:4}
#snav li span{font-size:15px;vertical-align:middle;height:35px;line-height:35px;width:auto;white-space:nowrap;overflow:hidden;display:block;padding:0 15px;position:absolute;top:0;visibility:hidden;z-index:3}
#snav li a:hover .fa{transform:rotate(720deg)}
#snav li a:hover span{visibility:visible}
#snav li span{background-color:#555}
#snav li .fa{background-color:#EEE;color:#555}
#snav li a:hover .fa{color:#fff}
#snav li:nth-child(10n+1) span,#snav li:nth-child(10n+1) a:hover .fa{background-color:#8350DD}
#snav li:nth-child(10n+2) span,#snav li:nth-child(10n+2) a:hover .fa{background-color:#4EC5DB}
#snav li:nth-child(10n+3) span,#snav li:nth-child(10n+3) a:hover .fa{background-color:#3DC25D}
#snav li:nth-child(10n+4) span,#snav li:nth-child(10n+4) a:hover .fa{background-color:#99BE24}
#snav li:nth-child(10n+5) span,#snav li:nth-child(10n+5) a:hover .fa{background-color:#38c}
#snav li:nth-child(10n+6) span,#snav li:nth-child(10n+6) a:hover .fa{background-color:#38c}
#snav li:nth-child(10n+7) span,#snav li:nth-child(10n+7) a:hover .fa{background-color:#000}
#snav li:nth-child(10n+8) span,#snav li:nth-child(10n+8) a:hover .fa{background-color:#F1A111}
#snav li:nth-child(10n+9) span,#snav li:nth-child(10n+9) a:hover .fa{background-color:#777}
#snav li:nth-child(10n+10) span,#snav li:nth-child(10n+10) a:hover .fa{background-color:#30555C}
<div class=’en’ id=’snav’>
<ul>
<li><a href=’/’><i class=’fa fa-home’/><span>Trang Chủ</span> </a></li>
<li><a href=’/search/label/Windows?&max-results=12′><i class=’fa fa-tablet’/><span>Thủ Thuật Windows</span>
</a></li>
<li><a href=’/search/label/Blogger?&max-results=12′><i class=’fa fa-html5’/><span>Thủ Thuật Blogger</span></a></li>
<li><a href=’/search/label/Facebook?&max-results=12′><i class=’fa fa-facebook’/><span>Thủ Thuật Facebook</span></a></li>
<li><a href=’/search/label/Template Blogger?&max-results=12′><i class=’fa fa-server’/><span>Template Blogger</span></a></li>
<li><a href=’mailto:[email protected]’><i class=’fa fa-envelope-o’/><span>[email protected]</span></a>
</li>
<li><a href=’tel:+841239738097′><i class=’fa fa-phone’/><span>01698505662</span></a></li>
<li><a href=’https://www.google.com/maps/place/Hai+B%C3%A0+Tr%C6%B0ng,+H%C3%A0+N%E1%BB%99i,+Vi%E1%BB%87t+Nam/@21.0051707,105.8443309,14z/data=!3m1!4b1!4m5!3m4!1s0x3135ac1eb17075a1:0xb1f717592512c549!8m2!3d21.0090571!4d105.8607507′><i class=’fa fa-map-marker’/><span>Hai Bà Trưng, Hà Nội</span></a></li>
</ul>
</div>