Responsive Mega Menu Pro từ CSS cho Blogger

Tạo Responsive Mega Menu Pro cho Blogger từ CSS, đây là một dạng Mega Menu được vnblogger.com chia sẻ, thanh menu này khá đặc biệt do đơn giản, có chế độ Responsive, hiển thị tốt, không hề phức tạp, phù hợp với những trang tạp chí hoặc thủ thuật. Hơn nữa, nó không ảnh hưởng nhiều tới tốc độ tải trang.

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/Phần%20mềm'>Phần mềm</a></li>
<li><a href='/search/label/Windows'>Windows</a></li>
</ul>
</div>
<div class='left cloumn3 border-left border-right'>
<h3>Thủ Thuật Blogger</h3>
<ul>
<li><a href='/search/label/Blogger%20Cơ%20Bản'>Blogger Cơ Bản</a></li>
<li><a href='/search/label/Thiết%20kế%20Blogger'>Thiết kế Blogger</a></li>
<li><a href='/search/label/Lập%20trình%20Blogger'>Lập trình Blogger</a></li>
<li><a href='/search/label/SEO%20Blogger'>SEO Blogger</a></li>
<li><a href='/search/label/Widget%20Blogger'>Widget Blogger</a></li>
<li><a href='/search/label/Blogger%20Templates'>Blogger Templates</a></li>
<li><a href='/search/label/Tiện%20ích%20Blogger'>Tiện ích Blogger</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
<div class='left cloumn'>
<h3>Photoshop</h3>
<ul>
<li><a href='/'>Hiệu Ứng Chữ</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='/p/sitemap-web.html'>Sitemap</a></li>
<li><a href='/p/archive.html'>Archive</a></li>
<li><a href='/p/gui-bai-viet.html'>Gửi bài</a></li>
<li><a href='/p/recent-comment.html'>Nhận xét mới</a></li>
<li class='links'><a class='right button small' href='/'>Xem tất cả</a></li>
</ul>
</div>
</li>
</ul>
</div>

Lời kết
Thật đơn giản để bạn trang bị cho blog của mình một thanh menu tuyệt vời. Tuy nhiên nó vẫn chưa hoàn hảo, bạn có thể tùy biến giúp cho thanh menu trở nên đẹp mắt hơn.