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

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

21:49
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.
Arlina Design
Nhãn
aaaaaaaaaa
Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Bình Luận

Đăng ký: Đăng Nhận xét (Atom)