Tạo menu responsive với hiệu ứng bằng CSS và jQuery tuyệt đẹp

#Thủ Thuật #Windows #Blogger #Facebook

Tạo menu responsive với hiệu ứng bằng CSS và jQuery tuyệt đẹp

Share:
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:skin> trong template.
nav{display:block;margin:0;background:#374147;border-bottom:4px solid #55579e}
.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}
Bước 3: Chèn đoạn javascript dưới đây vào trước thẻ </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">
<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>
Bước 5: Lưu template.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.