Xem bài viết Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3

Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3

Sep 10, 2012Jquery / Javascript
Bài viết hôm nay cũng đơn giản thôi nhưng rất hiệu quả và có ích cho bạn đấy, giờ mình cùng xem qua nhé.

1. HTML

Phần HTML mình chỉ đơn giản là tạo 1 thẻ div lớn bao quanh bên ngoài với id="wrapper", bên trong chứa thẻ ul với mỗi li là 1 tab, bạn có thể tạo bao nhiêu tab cũng được. Nhưng bên trong mỗi li đó phải chứa mỗi thẻ a và 1 sub-menu ul nữa nhé.

2. CSS

Phần Css mình sẽ đi qua chi tiết hơn cho các bạn dễ hiểu.
Phần đầu tiên trong css là mình phải thiết lập style lại cho các trình duyệt và thêm một chút màu mè trang trí cho phần nội dung.
	/*============= RESET STYLE ===========*/
	.accordion_menu,.accordion_menu ul,
	.accordion_menu li,.accordion_menu a,
	.accordion_menu span {
		margin: 0;padding: 0;
		border: none;outline: none;
	}
	.accordion_menu li {list-style: none;}

	/*============= NỘI DUNG ===========*/
	body{
		background:url(../images/bg_2cwebvn.png) repeat;
		width:560px;margin:0 auto; color: #87022e;
	}
	#wrapper{width:500px;margin:0px auto;}
	h2{margin-top:50px;}
Phần tiếp theo mình sẽ dùng một số thuộc tính css3 như background và shadow để định dạng cho menu chính.
	/*============= MENU ===========*/
	.accordion_menu li > a {
		display: block; position: relative;
		min-width: 110px; height: 32px;
		padding: 0 10px 0 10px; 
		text-decoration: none;
		font: bold 12px/32px Arial, sans-serif;
		background: #ca1c55; color: #87022e;
		background: -moz-linear-gradient(top,  #f35a8c 0%, #ca1c55 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f35a8c), color-stop(100%,#ca1c55));
		background: -webkit-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: -o-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: -ms-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	}

	.accordion_menu > li:hover > a,
	.accordion_menu > li:target > a,
	.accordion_menu > li > a.active {
		text-shadow: 1px 1px 1px rgba(255,255,255, .2);
		
		background: #ca1c55; color: #fdfdfd;
		background: -moz-linear-gradient(top,  #f35a8c 0%, #ca1c55 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f35a8c), color-stop(100%,#ca1c55));
		background: -webkit-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: -o-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: -ms-linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);
		background: linear-gradient(top,  #f35a8c 0%,#ca1c55 100%);	
		-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	}
Phần này mình sẽ định dạng cho sub-menu như sau:
	/*============= SUB MENU ===========*/
	.sub-menu li a {
		padding-left:40px;
		background: #e5e5e5;color: #797979;
		border-bottom: 1px solid #c9c9c9;
		text-shadow: 1px 1px 0px rgba(255,255,255, .2);
		-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
		box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	}
	.sub-menu li:hover a { background: #efefef; }
	.sub-menu li:last-child a { border: none; }
	.sub-menu em {
		position: absolute;	top: 0;	left: 0;
		margin-left: 14px; color: #a6a6a6;
		font: normal 10px/32px Arial, sans-serif;
	}
	.accordion_menu li > .sub-menu { display: none;}
	.accordion_menu li:target > .sub-menu { display: block;}

3. JQUERY

Phần jQuery này cũng khá đơn giản, mình dùng các hàm quen thuộc mà jQuery hộ trợ như: addClass, removeClass, slideUp, slideDown..v.v Mình cũng đề phòng cho các bạn nên cũng đã có chú thích hết cho các bạn rồi đó :)
	
	$(document).ready(function() {
		// Tạo các biến chứa các giá trị cần thiết
		var acc_head = $('.accordion_menu > li > a'),
			acc_body = $('.accordion_menu li > .sub-menu');

		// Mở menu tab đầu tiên khi load trang web
		acc_head.first().addClass('active').next().slideDown('normal');

		// Tạo sự kiện click cho các thẻ a trong tab
		acc_head.on('click', function(event) {

			// Không cho link đến thẻ a trong tab
			event.preventDefault();
			
			// Hiển thị và ẩn tab khi ta click
			if ($(this).attr('class') != 'active'){
				acc_body.slideUp('normal');
				$(this).next().stop(true,true).slideToggle('normal');
				acc_head.removeClass('active');
				$(this).addClass('active');
			}
		});
	});
	
Và điều cuối cùng các bạn nhớ phải thêm thư viện jquery vào nhé :)
	<script type="text/javascript" src="http://2cweb.vn/templates/public/web2c/images/jquery.min.js"></script>
Và đây là một số hình ảnh thành quả mà mình đã làm đây.
Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn - 01
Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn - 02
Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn - 03
Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn - 04
NOTE : Mỗi bài viết này mình đều có chú thích rõ ràng hết cho các bạn, viết rất chi tiết, hy vọng sẽ giúp ích cho các bạn trên con đường lập trình mình đã chọn.!

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments