Chào các bạn, bài viết trước mình đã chia sẻ đến các bạn Flat Mega Menu, tuy nhiên nó không có responsive. Nếu như bạn không thích menu đó thì bài viết này mình sẽ giới thiệu đến các bạn mẫu menu tuyệt đẹp sử dụng CSS và jQuery để tạo thành, có cả responsive nữa. Xem demo trước, nếu thấy ứng ý thì áp dụng ngay vào Blog nhé!!
Xem demo 
Bước 1: Đăng nhập Blogger ➜ Mẫu ➜ Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS dưới đây vào trước thẻ
Bước 2: Chèn đoạn CSS dưới đây vào trước thẻ
]]></b:skin> trong template.nav{display:block;margin:0;background:#374147;border-bottom:4px solid #55579e}Bước 3: Chèn đoạn javascript dưới đây vào trước thẻ
.menu{display:block}
.menu li{display:inline-block;position:relative;z-index:100}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#55579e}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;left:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;left:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:normal;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#55579e;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.homer{background:#55579e}
@media (min-width:768px) and (max-width:979px){.mainWrap{width:768px}.menu ul{top:37px}.menu li a{font-size:12px}a.homer{background:#55579e}}
@media (max-width:767px){.mainWrap{width:auto;padding:50px 20px}
.menu{display:none}
.responsive-menu{display:block;margin:0}
nav{margin:0;background:none}
.menu li{display:block;margin:0}
.menu li a{background:#fff;color:#797979}
.menu li a:hover,.menu li:hover>a{background:#55579e;color:#fff}
.menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
.menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}
</head> trong template.<script type="text/javascript">$(document).ready(function(){ var touch = $('#resp-menu'); var menu = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 767 && menu.is(':hidden')) { menu.removeAttr('style'); } }); });</script>Bước 4: Chèn đoạn code sau đây vào nơi bạn muốn hiển thị menu (sau
<body> chẳng hạn).<nav> <a class="responsive-menu" href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a> <ul class="menu">Bước 5: Lưu template.
<li><a class="homer" href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-home"></i> HOME</a> <ul class="sub-menu">
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 2</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 3</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 4</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-camera"></i> PORTFOLIO</a> <ul class="sub-menu">
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 2</a> <ul>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 2</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 3</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 4</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 3</a> <ul>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 2</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 3</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 4</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-tags"></i> CATEGORIES</a> <ul class="sub-menu">
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 2</a> <ul>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 2</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 3</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 4</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub-Menu 3</a> <ul>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 1</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 2</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 3</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 4</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="https://blogttcn.blogspot.com/2017/01/tao-menu-responsive-voi-hieu-ung-bang-css-va-jquery-tuyet-dep.html" title="Bác Sĩ Windows - Blog Thủ Thuật Công Nghệ"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav>
Arlina Design
