Hướng dẫn tạo menu dọc cực đẹp cho blogger
Chào các bạn, theo yêu cầu của một bạn đã gửi đến Bác Sĩ Windows muốn tạo menu dọc như của BSW trước đây. Hôm nay mình viết bài viết này để hướng dẫn các bạn cách tạo một menu dọc cực đẹp cho blogger, thích hợp để hiển thị trên mọi thiết bị.
CÁCH THỰC HIỆN
label .bsw{position:absolute;top:125px;left:0;width:30px;height:2px;background:white;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}
label .bsw:after,label .bsw:before{transition:.5s ease-in-out;content:””;position:absolute;display:block;width:100%;height:100%;background:#fff}
label .bsw:before{top:-8px}
label .bsw:after{bottom:-8px}
label input{display:none}
label input:checked + .menu{}
label input:checked + .menu .bsw{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
label input:checked + .menu .bsw:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}
label input:checked + .menu .bsw:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}
label .menu{position:fixed;right:-100px;top:-100px;z-index:100;width:150px;height:150px;background:0;border-radius:0;transition:.5s ease-in-out;box-shadow:none;cursor:pointer}
label ul:hover::-webkit-scrollbar-thumb{background:#ccc}
label ul::-webkit-scrollbar{width:6px}
label ul::-webkit-scrollbar-track,.left_slidemenu_bacsiwindows::-webkit-scrollbar-thumb{background:transparent}
label ul{z-index:999;background:#fff;max-width:100%;width:300px;height:100vh;position:fixed;overflow:auto;top:0;left:-250px;opacity:0;visibility:hidden;-webkit-transition:.5s;margin:0;padding:0;box-shadow:5px 10px 15px 5px rgba(0,0,0,.05)}
label ul li{list-style:none;display:block}
label a{padding:15px 25px;display:block;color:#666;font:400 18px “Roboto”;text-transform:capitalize;text-decoration:none;text-align:left;transition:1s ease-out}
label a:hover,label a:focus{background:#eee;color:#666}
label input:checked + .menu + ul{opacity:1;visibility:visible;left:0}
label ul li img{position:relative;top:8px;margin:0 6px 0 0;width:25px;height:25px;border-radius:100%}
span.btn-close-bsw {display: block; padding: 0 22px; color: #666!important; font: 500 18px Roboto; line-height: 55px; border-bottom: 1px solid #eee;cursor:pointer}
@media all and (max-width:768px){
label .bsw,label .bsw:after, label .bsw:before{background:#fff}
@media all and (max-width:768px){
label .bsw{left:15px}
label .menu {left:0;width:100%;background:#7577a9}
}
Bước 2: Sau đó các bạn tìm đến thẻ <body> và chèn đoạn code sau bên dưới thẻ <body>
<label><input type=’checkbox’/><span class=’menu’><span class=’bsw’></span></span><ul><li><span class=’btn-close-bsw’><i class=’fa fa-times’ style=’margin:0 8px 0 0′></i>CLOSE MENU</span></li><li><a href=’/’ title=’Home page’><i class=’fa fa-home’ style=’margin:0 8px 0 0′></i>Trang chủ</a></li><li><a href=’/search/label/Facebook’ title=”><i class=’fa fa-facebook-official’ style=’margin:0 8px 0 0′></i>Thủ Thuật Facebook</a></li><li><a href=’/search/label/Blogger’ title=”><i class=’fa fa-html5′ style=’margin:0 8px 0 0′></i>Thủ Thuật Blogspot</a></li><li><a href=’/search/label/Windows’ title=”><i class=’fa fa-paint-brush’ style=’margin:0 8px 0 0′></i>Thủ Thuật PhotoShop</a></li><li><a href=’/p/gioi-thieu-blog.html’ title=”><i class=’fa fa-windows’ style=’margin:0 8px 0 0′></i>Thủ Thuật Windows</a></li><li><a href=’/search/label/PSD’ title=”><i class=’fa fa-file-image-o’ style=’margin:0 8px 0 0′></i>PSD PhotoShop</a></li><li><a href=’/search/label/Ebook’ title=”><i class=’fa fa-book’ style=’margin:0 8px 0 0′></i>Ebook</a></li><li><a href=’/search/label/All Shared Code’ title=”><i class=’fa fa-code’ style=’margin:0 8px 0 0′></i>Code</a></li><li><a href=’/rule’ title=”><i class=’fa fa-university’ style=’margin:0 8px 0 0′></i>Quy định</a></li><li><a href=’/p/lien-he.html’ title=”><i class=’fa fa-user-plus’ style=’margin:0 8px 0 0′></i>Liên hệ</a></li></ul></label>