Tạo menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho Blogger/Blogspot

Duc Tran

tháng 12 29, 2017

Chào các bạn, hôm nay mình sẽ viết bài hướng dẫn các bạn Tạo 1 menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho blogger nhé.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên phía trên

#navigation{width:100%;max-width:1024px;height:30px;text-transform:uppercase;font-size:100%;background:#359131;color:#000}
#navigation ul.menus{background:#359131;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navigation a{display:block;line-height:30px;padding:0 10px 0;text-decoration:none;color:#fff;font-weight:600;font-size:12px;border-right: 1px solid #3eaa3a; transition: .4s}
#navigation ul,#navigation li{margin:0 auto;padding:0;list-style:none}
#navigation ul{height:30px;width:100%;max-width:1024px}
#navigation li{float:left;display:inline;position:relative}
#navigation input{display:none;margin:0;padding:0;width:100%;height:30px;opacity:0;cursor:pointer}
#navigation label{display:none;width:35px;height:31px;line-height:31px;text-align:center}
#navigation label span{font-size:16px;position:absolute;left:35px}
#navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none;border-bottom:1px dashed #31AFDB}
#navigation ul.menus a{color:#FFF;line-height:35px}
#navigation li ul{background:#0F5341;margin:0;width:180px;height:auto;position:absolute;top:30px;left:0;z-index:10;display:none;border-bottom:3px solid #16a085}
#navigation li a:hover{background:#3eaa3a}
#navigation li li{display:block;float:none}
#navigation li ul ul{left:100%;top:0}
#navigation li li > a{font-size:12px;display:block;padding:0 10px;margin:0;line-height:24px;text-decoration:none;color:#fff;border-bottom:1px dotted #777}
@media screen and (max-width:960px) {
#search-box{display:block!important}
.search,#hide-mb{display: none;}
}
@media screen and (max-width:800px) {
#navigation{position:relative}
#navigation ul{background:#359131;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navigation ul.menus{width:100%;position:static;padding-left:20px}
#navigation li{display:block;float:none;width:auto}
#navigation input,#navigation label{position:absolute;top:0;left:0;display:block}
#navigation input{z-index:4}
#navigation input:checked + label{color:#fff}
#navigation input:checked ~ ul{display:block;width:100%}
#navigation li:hover > ul{width:100%}
}

Bước 2: Bạn dán HTML menu vào nơi muốn hiển thị, thường là ở phần header blog !

<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label><i class='fa fa-bars' style='font-size:16px;color:#fff'></i></label>
<ul>
<li><a href='/'><i class='fa fa-home'></i> Trang chủ</a></li>
<li><a href='/search/label/Facebook?&max-results=10'><i aria-hidden='true' class='fa fa-facebook'></i> Thủ thuật Facebook</a></li>
<li><a href='/search/label/Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-code'></i> Thủ thuật Blogger</a></li>
<li><a href='/search/label/Blogger%20fix?&max-results=10'><i aria-hidden='true' class='fa fa-wrench'></i> Blogger fix</a></li>
<li><a href='/search/label/Template%20Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-star'></i> Template Blogger</a></li>
<!-- Search -->
<div class='search' id='data-search'> <a class='search-btn' href='#search'> <i class='fa fa-search'/> <i class='fa fa-times'/> </a> <div class='unstyled-list search-menu'> <div id='search-box-pc'> <form action='/search' id='search-form-pc' method='get' target='_top'> <input id='search-text-pc' name='q' placeholder='Bạn muốn tìm gì...' type='text'/> </form> </div> </div> </div>
<script type='text/javascript'>
(function(){window.Menu=function(){function a(a){this.nav=a,this.menubtn=$(".search-btn",this.nav),this.menubtn.on("click",function(a){return function(b){return a.nav.toggleClass("active"),!1}}(this))}return a.init=function(){return $("#data-search").each(function(b,c){return new a($(c))})},a}(),$(function(){if($("#data-search").length)return Menu.init()})}).call(this);
</script>
</ul>
</nav>

Ưu điểm của menu này: Nhẹ, không dùng js nên không ảnh hưởng đến việc load,...
Chúc bạn thành công!