Tạo Responsive Mega Menu cho Blogger, Blogspot chỉ từ CSS, không sử dụng Javascript

Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo Responsive Mega Menu cho blog của mình. Đây là dạng mega menu đơn giản, có chế độ Responsive, hiển thị tốt trên nhiều thiết bị và hoàn toàn không sử dụng Javascript, nhờ vậy mà tiện ích này không ảnh hưởng nhiều tới tốc độ load trang của bạn. menu này được mình chia sẻ trên blog cũ của TigerVNA vào năm 2015.

Tạo Responsive Mega Menu cho Blogger từ CSS

Các bước thực hiện

Bước 1: Thêm đoạn code sau lên trên thẻ đóng ]]></b:skin>

 #nav{padding:15px 0 0;height:46px}
#menu{float:left;width:472px}
#menu a{display:block}
#menu a:hover{text-decoration:none}
#menu .title{position:relative;z-index:100;padding:5px 10px;font-size:14px;line-height:20px}
#menu li{float:left}
#menu li:hover .title,#menu li .nav{background:#2a2a2a}
#menu li:hover .title{color:#ddd}
#menu li:hover .nav{left:auto}
#menu li .nav{position:absolute;z-index:101;left:-999em}
#menu li .nav a{color:#ddd;  font-size: 12px;}
#menu li .nav a:hover{color:#066}
#menu li .nav h3{margin:5px 10px;color:#666;font-size: 15px;}
#menu li .nav li{width:100%}
#menu li .nav li.links{width:100%!important}
#menu li .nav .border-top{border-top:1px solid #444}
#menu li .nav .border-right{border-right:1px solid #444}
#menu li .nav .border-left{border-left:1px solid #444}
#menu .horizontal{padding:5px 0}
#menu .horizontal a{margin:5px}
#menu .horizontal ul{padding:0 5px}
#menu .vertical{padding:0 10px}
#menu .vertical a{margin:5px 0}
#menu .vertical ul{float:left;padding:5px 0;width:100%}
#menu .cloumn{width:150px}
#menu .cloumn3{width:370px}
.cloumn3 li {float: left;width: 33%!important;}
li {text-align: -webkit-match-parent;}
ul {list-style-type: none;}
.left {float: left;}
.right{float:right}
.fullwidth {min-width: 930px;height: 100%;}
@media screen and (max-width:930px){
.fullwidth{min-width:0}
#search,#FollowByEmail1,#BlogArchive1,#PageList1,#info,.separate,#rc .name{display:none}
}
@media screen and (max-width:658px){
#menu,#menu .cloumn,#menu .cloumn3{width:auto}
#header-wrapper,#copyright-wrapper{padding:0 20px}}

Bước 2: Thêm đoạn code sau vào vị trí bạn muốn đặt thanh Menu

 <div id='menu'>
<ul>
<li onmouseover=''>
<h2 class='title'>Chuyên mục <small>&#9660;</small></h2>
<div class='nav horizontal'>
<div class='left cloumn'>
<h3>Computer</h3>
<ul>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
</ul>
</div>
<div class='left cloumn3 border-left border-right'>
<h3>Thủ Thuật Blogger</h3>
<ul>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li><a href='/search/label/SubMenu'>Sub Menu</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
<div class='left cloumn'>
<h3>Sub Menu</h3>
<ul>
<li><a href='/'>Sub Menu</a></li>
</ul>
</div>
</div>
</li>
<li onmouseover=''>
<h2 class='title'>Thông tin <small>&#9660;</small></h2>
<div class='nav vertical cloumn'>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
</li>
</ul>
</div>