Tạo responsive menu cho blogspot

Ở bài trước mình đã có bài viết hướng dẫn làm thế nào để tạo Responsive template cho blogspot và hôm nay mình sẽ hướng dẫn cách tạo Responsive menu.

Để hiểu rõ hơn về Responsive menu bạn hãy xem 2 hình ảnh bên dưới

Menu hiển thị trên máy tính

Menu hiển thị trên thiết bị di động

Trong quá trình thực hiện bạn có thể phóng to thu nhỏ cửa sổ trình duyệt để có thành công hay không

Tắt trình duyệt mobile mặc định của blogger

Tất nhiên nếu ta sử dụng Responsive template thì còn cần gì chức năng trình duyệt mobile mặc định xấu xí của blogspot nữa đúng không? Vậy bạn hãy tắt đi như hình dưới

Thêm Responsive menu vào template

Bước 1: Trong template bạn tìm đoạn code tương tự sau, thường nằm ở phía trên của template

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

 Và thay thế bằng những thẻ meta bên dưới

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Phần màu vàng giúp bạn viết tiếng Việt có dấu trong template không bị mã hóa thành các ký tự loằng ngoằng, cũng giúp bạn có thể sử dụng các ký tự đặc biệt thay vì sử dụng hình ảnh.
Bước 2: Trước thẻ </b:skin> dán đoạn code bên dưới

/*-----Responsive Drop Down Menu ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}

Tùy chỉnh 

• #50B7DC Màu nền của menu
• #FFF
• Màu chữ
  1024px
• Chiều rộng của thanh menu
  #5FC6EB Màu nền khi rê chuột vào
• max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng drop

Bước 3: Thêm code dưới vào vị trí bạn muốn hiển thị menu trong template

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Select&#160;a&#160;page</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
       </ul>
    </nav>

Bước 4: Lưu lại template hoàn tất thủ thuật
Chúc bạn thành công và đừng quên comment, like, share nếu bài viết hữu ích với bạn nha!

Tham khảo BMT