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="http://www.daipho.com/gioi-thieu/">Giới thiệu</a></li>
		<li><a href="http://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

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin
website chuẩn google, chèn từ khóa vào trang web,