Menu rất phong phú về kiểu dáng phong cách mà chúng ta đã từng sử dụng.Với sự bùng nổ về việc lướt web thông qua thiết bị di động thì những menu trước đây không còn phù hợp nữa vì nó không thể hiện thị đầy đủ các thành phần của thanh menu trên thiết bị di động vì màn hình máy tính so với điện thoại là khác nhau về kích cỡ.
Vì vậy cần có những thanh menu đã tích hợp chức năng đáp ứng - Responsive để người dùng có thể điều hướng trang blog khi xem trên thiết bị di động.
Thanh menu này cần thỏa mãn:
- Nó là hoàn toàn Responsive - sẽ tự động điều chỉnh theo kích cỡ màn hình điện thoại di động.
- Nó sẽ xuất hiện chỉ trong các thiết bị di động - nhờ isMobileRequest Tag có điều kiện.
- Thiết kế được hỗ trợ bởi tất cả các trình duyệt chính.
Xem thử:
DEMO
Hướng dẫn tạo drop down menu responsive (đáp ứng) cho blogspot
Bước 1:
Việc đầu tiên bạn cần vào chỉnh sửa mẫu(Bên trực tiếp trên blog) và thay đoạn:
<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>Thành:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Và tại bên Điện thoại di động bạn check vaog dòng thứ 2- Không. Hiển thị mẫu dành cho máy tính trên điện thoại di động.
Và lưu lại.
Bước 2:
Các bạn vào chỉnh sửa mẫu dán đoạn code sau vào trước thẻ ]]></b:skin>
#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:hover > a,#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}
}Bước 3:
Bạn vào phần bố cục và thêm một tiện ích trên header ở vị trí bạn muốn hoặc bạn vào trong mẫu ở vị trí ngay trên thẻ đóng </div> kết thúc phần header thêm đoạn code sau
<nav id='menu'> <input type='checkbox'/> <label>≡<span>MENU</span></label> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Drop Down <font size='1'>▼</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'>▼</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>
Thay tên nhãn và các đường link tương ứng.
Chúc thành công.