[Tips] - Menu Responsive Blogspot

Như những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Responsive cho blogspot. Hôm nay mình cũng nói sơ qua Responsive là giao diện mobile cho blogspot khi xem ở những loại màn hình khác nhau nó sẽ co giản hợp lý khá chuyên nghiệp.

Menu Responsive cũng tương tự như thế khi bạn tích hợp menu Responsive này thì khi xem trên desktop nó sẽ giản ra và khi xem mobi nó sẽ co lại trông rất chuyên nghiệp
Demo desktop

Demo mobile

Trông khá chuyên nghiệp đúng ko nào, thế thì mần ngay thôi.

Cách thêm menu Responsive vào blogspot

1. Thêm css

Chèn đoạn css sau trên thẻ </head> trong templates blogspot của bạn

<style> #menu {
background:#464646;
color:#eee;
height:35px;
}
#menu ul,
#menu li {
margin:0;
padding:0;
list-style:none;
}
#menu ul {
height:35px;
}
#menu li {
float:left;
display:inline;
position:relative;
font:bold 13px Arial;
}
#menu li a {
color:#ccc;
}
#menu a {
display:block;
line-height:35px;
padding:0 14px;
text-decoration:none;
color:#333;
}
#menu li:hover > a,
#menu li a:hover {
color:#fff;
}
#menu input {
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:35px;
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:13px;
position:absolute;
left:35px;
}
#menu ul.menus {
height:auto;
overflow:hidden;
width:180px;
background:#fff;
position:absolute;
z-index:99;
display:none;
border:1px solid #ccc;
border-top:none;
color:#333;
}
#menu ul.menus a {
color:#333;
}
#menu ul.menus li {
display:block;
width:100%;
font:12px Arial;
text-transform:none;
}
#menu li:hover ul.menus {
display:block;
}
#menu a.prett,
#menu a.trigger2 {
padding:0 27px 0 14px;
}
#menu li:hover > a.prett,
#menu a.prett:hover {
background:#fff;
color:#333;
}
#menu a.prett::after {
content:"";
width:0;
height:0;
border-width:6px 5px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:15px;
right:9px;
}
#menu ul.menus a:hover {
background:#BABABA;
}
#menu a.trigger2::after {
content:"";
width:0;
height:0;
border-width:5px 6px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:13px;
right:9px;
}
@media screen and (max-width:768px) {
#menu {
position:relative;
}
#menu ul {
background:#838383;
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none;
}
#menu ul.menus {
width:100%;
position:static;
border:none;
}
#menu li {
display:block;
float:none;
width:auto;
text-align:left;
}
#menu li a {
color:#fff;
}
#menu li a:hover {
color:#333;
}
#menu li:hover {
background:#BABABA;
color:#333;
}
#menu li:hover > a.prett,
#menu a.prett:hover {
background:#BABABA;
color:#333;
}
#menu ul.menus a {
background:#BABABA;
}
#menu ul.menus a:hover {
background:#fff;
}
#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;
}
}
</style>

2. Hiển thị menu Responsive

Chèn đoạn code sau vào nơi cần thiển thị menu

<nav id="menu"><input type="checkbox" /> <label>≡Navigation</label> <ul> <li><a href="/">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a class="prett" href="#">Drop Menu</a> <ul class="menus"> <li><a href="#">Drop Menu 1</a></li> <li><a href="#">Drop Menu 2</a></li> <li><a href="#">Drop Menu 3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a class="prett" href="#">Drop Menu 1</a> <ul class="menus"> <li><a href="#">Drop Menu 1</a></li> <li><a href="#">Drop Menu 2</a></li> <li><a href="#">Drop Menu 3</a></li> </ul> </li> <li><a class="trigger2" href="https://www.blogger.com/blogger.g?blogID=2676097042429235325#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;amp;langpair=id%7cen&amp;amp;hl=en'); return false;" rel="nofollow" target="_blank" title="English">Translate</a></li> </ul> </nav>

Xong lưu mẫu của mình lại và kiểm tra thành quả của mình vừa làm được thôi nhé. Chúc các bạn thành công.

Bài Viết Cùng Chủ Đề