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

Trịnh Công Sơn tháng 4 06, 2018Thứ Sáu, 6 tháng 4, 2018

Chia sẻ

Chọn hình thức muốn chia sẻ:

• Copy liên kết
• Facebook
• Google +
• Email

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é!

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ào mừng quay lại!!

• <div id='responsive_menu_v3_bacsiwindows'>
  	<div class='responsive_menu_v3_bacsiwindows'><a href='/'><i class='fa fa-home'></i></a></div>
  	<div class='responsive_menu_v3_bacsiwindows'><a href='/hop-tac'><i class='fa fa-user'></i></a></div>
  	<div class='responsive_menu_v3_bacsiwindows'><a href='/cmt'><i class='fa fa-comment'></i><!--<span class='number-noty'>99+</span>--></a></div>
  	<div class='responsive_menu_v3_bacsiwindows'><a href='javascript:;' onclick='alert(&#39;Chức năng này hiện chưa khả dụng.&#39;);'><i class='fa fa-bell'></i></a></div>
  	<div class='responsive_menu_v3_bacsiwindows'><a href='javascript:;' id='bsw_search' onclick='toggleOverlay()'><i class='fa fa-search'></i></a></div>
  	<div class='responsive_menu_v3_bacsiwindows'><a class='toggle' href='javascript:;' id='bsw_nav_'><i class='fa fa-bars'></i></a></div>
  	</div>
  	<nav class='bacsiwindows_slidemenu_v3' data-bacsiwindows_slidemenu_v3='active' data-bsw_nav_='#bsw_nav_'>
  	<div class='info_bacsiwindows_'>
  	<div class='profile_text_BSW'><a href='/' id='fbuser_nonelogin_bacsiwindows'>Chào mừng quay lại!!</a></div>
  	</div>
  	<ul class='bacsiwindows_slidemenu-onmobile_-menu-v13'>
  	<li><a href='/'><i class='fa fa-home' style='background:#4267b2'></i><span class='nav-item_BSW2'>Trang chủ</span></a></li>
  	<li>
  	<a data-bsw_dropdown_-toggle='active' href='javascript:;'>
  	<span class='nav-item_BSW'><i class='fa fa-tags' style='background:#6acdec'></i> Tất cả chuyên mục</span>
  	<span class='bsw_dropdown_-icon show' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-down' style='background: none; color: #333; padding: 0;'></i></span>
  	<span class='bsw_dropdown_-icon' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-up' style='background: none; color: #333; padding: 0;'></i></span>
  	</a>
  	<ul class='bsw_dropdown_' data-bsw_dropdown_='active'>
  	<li><a href='/blogspot'>Thủ Thuật Blogspot</a></li>
  	<li><a href='/search/label/Facebook'>Thủ Thuật Facebook</a></li>
  	<li><a href='/theme'>Theme Blogspot</a></li>
  	<li><a href='/tan-man'>Tản Mạn / Tâm Sự</a></li>
  	<li><a href='/search/label/Giveaway'>Giveaway</a></li>
  	</ul>
  	</li>
  	<li>
  	<a data-bsw_dropdown_-toggle='active' href='javascript:;'>
  	<span class='nav-item_BSW'><i class='fa fa-code' style='background:#7fa3af'></i> Tools - Công cụ</span>
  	<span class='bsw_dropdown_-icon show' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-down' style='background: none; color: #333; padding: 0;'></i></span>
  	<span class='bsw_dropdown_-icon' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-up' style='background: none; color: #333; padding: 0;'></i></span>
  	</a>
  	<ul class='bsw_dropdown_' data-bsw_dropdown_='active'>
  	<li><a href='/mahoahtml'>Mã hóa HTML</a></li>
  	<li><a href='/nencss'>Nén / Rút gọn CSS</a></li>
  	<li><a href='/upload'>Upload hình ảnh Imgur</a></li>
  	<li><a href='/vietchunguoc'>Viết chữ ngược</a></li>
  	<li><a href='/ps'>Pixlr / Photoshop Online</a></li>
  	<li><a href='/laymamau'>Lấy mã màu từ ảnh</a></li>
  	<li><a href='/testresponsive'>Test responsive website</a></li>
  	<li><a href='/iconfb'>Icon Facebook</a></li>
  	</ul>
  	</li>
  	<li><a href='/about'><i class='fa fa-user' style='background:#8faf5e'></i><span class='nav-item_BSW2'>Về chúng tôi</span></a></li>
  	<li><a href='/contact'><i class='fa fa-envelope' style='background:#b38c50'></i><span class='nav-item_BSW2'>Liên hệ</span></a></li>
  	<li><a href='/hop-tac'><i class='fa fa-handshake' style='background:#7e5eaf'></i><span class='nav-item_BSW2'>Hợp tác nội dung</span></a></li>
  	<li><a href='/rule'><i class='fa fa-exclamation-triangle' style='background:#5eaf7b'></i><span class='nav-item_BSW2'>Nội quy Blog</span></a></li>
  	<li><a href='/upload'><i class='fa fa-image' style='background:#797974'></i><span class='nav-item_BSW2'>Upload hình ảnh</span></a></li>
  	<li><a href='/cmt'><i class='fa fa-comments' style='background:#5b8460'></i><span class='nav-item_BSW2'>Bình luận mới</span></a></li>
  	</ul>
  	<a class='waves-effect waves-light' href='https://bacsiwindowscom.blogspot.com/contact' id='log-out-bacsiwindows-btn' onclick='alert("Sở hữu ngay giao diện cực đẹp này chỉ với 100.000 VNĐ");' target='blank'>Mua Template</a>
  	</nav>

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.

19 bình luận

Chia sẻ