Tạo menu tựa giống Facebook ở bottom responsive cho blogspot

Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo một menu tựa giống menu Facebook ở bottom hoàn toàn bằng css cực nhẹ và đẹp nhé!


Hình ảnh có liên quan

CÁCH THỰC HIỆN

Thêm toàn bộ CSS này vào trước thẻ ]]></b:skin> trong mẫu
.mobile-theme-bsw{float:right;vertical-align:inherit;margin:5px!important;background:#eee;padding:5px 10px;border-radius:100px;color:#888}#log-out-bacsiwindows-btn{z-index:-1;position:absolute;bottom:70px;background:#fff;width:100%;text-align:center;padding:10px;box-sizing:border-box;font-size:15px;color:#d25252!important;font-weight:500;border:1px solid #ddd;border-left:0;border-right:0}.fbuser_info_BSW{font-weight:500}.right_btn_{position:absolute;right:0;font-size:24px;color:#fff!important;padding:10px}.left_btn_{position:absolute;left:0;font-size:24px;color:#fff!important;padding:10px 18px}.bsw_bsw_wrapper{margin:6px auto 15px}#top_wrapmenu_bacsiwindows_v13{height:50px;background:#4267b2;position:relative}#top_wrapmenu_bacsiwindows_v13_s{width:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}#search_bacsiwindows_v13{}.search_bacsiwindows_v13{background:rgba(0,0,0,.2);width:100%;text-align:center;height:27px;line-height:27px;font-size:14px;color:#555}.search_bacsiwindows_v13::placeholder{color:#ccc!important}#bttop,.go_group_BSW a,.comment_t,#bsw_loading_,.post_comment,.ghim,.pinned_post{display:none!important}.bacsiwindows_slidemenu_v3{visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;background:#eee;box-shadow:0 0 30px rgba(0,0,0,.1);display:block;font-size:16px;font-weight:400;height:100%;left:0;position:fixed;overflow:auto;transform:translate(10%,0);transition:all .35s ease-in-out;width:100%;z-index:20;opacity:0;top:0}.bacsiwindows_slidemenu_v3.show{visibility:visible;transform:none;opacity:1}.info_bacsiwindows_{padding:0;margin:0 0 30px;height:50px;position:relative;border-bottom:1px solid #eee;background:white}.info_bacsiwindows_ img{border-radius:50%;height:auto;width:35px;position:absolute;top:50%;left:0;transform:translate(65%,-50%)}.profile_text_BSW{z-index:1;position:absolute;bottom:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}.profile_text_BSW a{display:block;line-height:1.5;font-size:16px}.bacsiwindows_slidemenu-onmobile_-menu-v13{list-style:none;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 li{display:block;position:relative;background:white}.bacsiwindows_slidemenu-onmobile_-menu-v13 a{font:400 14px Roboto;background:transparent;color:#444;display:block;line-height:24px;padding:10px 20px;text-decoration:none}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:after{content:'';background:#f5f5f5;height:1px;width:84%;position:absolute;bottom:0;right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 a i{background:#444;width:16px;height:16px;line-height:16px;text-align:center;color:#fff;border-radius:100px;padding:7px}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:hover{background-color:#eee}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active{color:#333333}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active .bsw_dropdown_-icon{color:#333333}.nav-item_BSW{padding:0}.nav-item_BSW i{margin:0 10px 0 0}.nav-item_BSW2{padding:0 0 0 15px}.bsw_dropdown_{display:none;list-style:none;margin:0;padding:0}.bsw_dropdown_ a{color:#666;padding-left:62px}.bsw_dropdown_ a:hover{background:#ddd}.bsw_dropdown_-icon{color:#757575;height:16px;right:16px;position:absolute;text-align:center;top:16px;width:16px;transition:.5s;opacity:0;transform:rotate(180deg)}.bsw_dropdown_-icon.show{opacity:1;transform:none}.bacsiwindows_slidemenu_v3::-webkit-scrollbar-track,.bacsiwindows_slidemenu_v3::-webkit-scrollbar-thumb,.bacsiwindows_slidemenu_v3::-webkit-scrollbar{width:0}#responsive_menu_v3_bacsiwindows{z-index:21;position:fixed;bottom:0;left:0;width:100%;background:#fff;text-align:center;box-shadow:0 0 30px rgba(0,0,0,.2)}.responsive_menu_v3_bacsiwindows a{display:inline-block;width:15.5%;text-align:center;margin:0;padding:15px 0;box-sizing:border-box;color:#888;font-size:16px}.responsive_menu_v3_bacsiwindows a:hover{color:#4267b2}.responsive_menu_v3_bacsiwindows{display:inline;position:relative}div#overlay{display:none;z-index:3;background:#fff;position:fixed;width:100%;height:100%;left:0;top:0;text-align:center}div#jQsearchBSWv3{display:none;position:fixed;z-index:4;margin:auto;width:100%;background:#FFF;color:#000}.form-search .jsSearchBSWv3{background:#eee;border:0;padding:10px 20px;color:#444;font:400 15px Roboto;position:fixed;left:15px;top:15px;box-sizing:border-box;border-radius:100px;margin:0;width:93%}.form-search input:focus{outline:0}#close{position:fixed;right:8px;top:12px;border-radius:50%;padding:15px 20px;cursor:pointer;color:#999}.trending-search-bsw .content{position:fixed;top:60px;padding:10px;background:#fff;box-sizing:border-box;width:100%;text-align:left;height:80vh;overflow:auto}.trending-search-bsw .content a{display:block;font:400 15px Roboto;color:#888;margin:0 0 10px;padding:0 10px 10px}.number-noty{font-size:10px;position:absolute;background:#da5858;padding:2px 4px;border-radius:4px;top:-5px;color:#fff}#top_wrapmenu_bacsiwindows_v13,#top-menu-bacsiwindows,#top-wrap-bsw-menu{display:none}#res_menu_bsw{background:#fff;border-bottom:1px solid #ccc;position:relative}.logo_text{padding:10px}.logo_text img{width:40px;height:40px;border-radius:50%;vertical-align:middle}.logo_text a{vertical-align:middle;font:500 18px Roboto;text-transform:uppercase;color:#555;margin:0 0 0 10px}
Thêm toàn bộ code này vào trước thẻ đóng </body>




Chỉ đơn giản vậy thôi bạn đã có ngay 1 menu cực ngàu đúng không nào!.
Chúc bạn thành công.

Không có nhận xét nào