Làm Thanh Menu ẩn Hiện Với JQuery Và CSS3 Animation

Một menu sinh động sẽ thu hút sự chú ý của khách hàng nhiều hơn. Đoạn code mẫu siêu gọn và cực kỳ đơn giản sau kết hợp giữa jQuery và CSS3 Animation để tạo menu ẩn hiện linh hoạt.

Đoạn code HTML thanh menu

Bạn có thể thay dấu # thành đường link cụ thể và Menu 1, Menu 2 trong tag A thành tên cụ thể.

<div id="dp_menu" class="dp_menu"> <button><span>MENU</span></button> <ul class="main-menu" style="display:none"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> </li> <li><a href="#">Menu 3</a></li> <li><a href="https://www.daipho.com/gioi-thieu/">Giới thiệu</a></li> <li><a href="https://www.daipho.com/lien-he/">Liên hệ</a></li> </ul> </div>

Thêm thư viện cần thiết của Google vào trang web

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Play&amp;display=swap" rel="stylesheet">

Code menu mẫu 1

Nhúng đoạn CSS sau vào trang:

body {font-family: 'Play', sans-serif;} body:after{ display: table;position:absolute; right:0; bottom:0} #dp_menu {padding:12px; position: relative} #dp_menu button {display:table; border:none; padding: 0; cursor: pointer; border-radius: 7px; overflow: hidden;} #dp_menu button span{display:block; padding: 12px; float: left;width: 128px; background: #0086C5;color: #FFF;} #dp_menu button:before {content: "\2261"; display: table; width: 24px; padding: 12px; font-weight: bold; background: #B60101;color: #FFF; float:right} #dp_menu:before, #dp_menu:after, #dp_menu ul:before, #dp_menu ul:after {content:" "; clear:both; display:block; width:0; height:0} #dp_menu ul, #dp_menu li {margin:0; padding:0; list-style:none} #dp_menu ul {position: absolute; width: 200px; background: #CCC;} #dp_menu li {display:block; padding: 12px; border-top:1px solid #f6f6f6; border-bottom:1px solid #999; text-align:center} html body:after {content:"\0064\0061\0069\0070\0068\006F\002E\0063\006F\006D";} #dp_menu.show button {border-radius: 7px 7px 0 0;} #dp_menu.show button:before {content: "\0058"; } #dp_menu .sub-menu {display:none}

Nhúng đoạn jQuery sau vào trang:

$(document).ready(function(){ $("button").click(function(){ $("#dp_menu > ul").toggle(500); $("#dp_menu").toggleClass("show"); }); });

Xem thử:

Code menu mẫu 2

Nhúng đoạn CSS sau vào trang:

body {font-family: 'Play', sans-serif;} body:after{ display: table;position:absolute; right:0; bottom:0} #dp_menu {padding:12px; position: relative} #dp_menu button {display:table; border:none; padding: 0; cursor: pointer; border-radius: 7px; overflow: hidden;} #dp_menu button span{display:block; padding: 12px; float: left;width: 128px; background: #0086C5;color: #FFF;} #dp_menu button:before {content: "\2261"; display: table; width: 24px; padding: 12px; font-weight: bold; background: #B60101;color: #FFF; float:right} #dp_menu:before, #dp_menu:after, #dp_menu ul:before, #dp_menu ul:after {content:" "; clear:both; display:block; width:0; height:0} #dp_menu ul, #dp_menu li {margin:0; padding:0; list-style:none} #dp_menu ul {width: 200px; background: #CCC; -webkit-animation: daipho_off 0.25s both; animation: daipho_off 0.25s both;} #dp_menu li {display:block; padding: 12px; border-top:1px solid #f6f6f6; border-bottom:1px solid #999; text-align:center} #dp_menu.dp_show button {border-radius: 7px 7px 0 0;} #dp_menu.dp_show button:before {content: "\0058"; } #dp_menu .sub-menu {display:none} #dp_menu.dp_show ul{ display:block; -webkit-animation: daipho_on 0.5s both; animation: daipho_on 0.5s both;} html body:after {content:"\0064\0061\0069\0070\0068\006F\002E\0063\006F\006D";} @keyframes daipho_off { 0% {opacity: 1; display:block} 100% { opacity: 0; display:none; -webkit-transform: translateY(50px); transform: translateY(50px); }} @-webkit-keyframes daipho_off { 0% {opacity: 1; display:block} 100% { opacity: 0; display:none; -webkit-transform: translateY(50px); transform: translateY(50px); }} @-webkit-keyframes daipho_on { 0% {-webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0;} 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;}} @keyframes daipho_on { 0% {-webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0;} 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;}}

Nhúng đoạn jQuery sau vào trang:

$(document).ready(function(){ $("button").click(function(){ $("#dp_menu").toggleClass("dp_show"); }); });

Xem thử:

Một vài hiệu ứng khác

Xem thêm

• jQuery ẩn hiện phần tử HTML
• CSS
• Hàm trong Javascript

629