Xem bài viết Menu phong cách social plugin trong wordpress

Menu phong cách social plugin trong wordpress

Sep 15, 2012Html / Css
Để cho các bạn dễ hình dung mình đang làm gì thì đây là hình ảnh plugin trong wordpress.
Menu phong cách social plugin trong wordpress - 2Cwebvn - 01

1. PHẦN HTML

Phần này đơn giản là mình tạo ul với 4 thẻ li bên trong, mỗi thẻ li ứng với mỗi class khác nhau, nhưng chúng sẽ có chung class là btn.

2. PHẦN CSS

Đầu tiên thì ta cần style lại các trình duyệt và định dạng chút xíu cho trang.
/*========= RESET STYLE TRÌNH DUYỆT & ĐỊNH DẠNG TRANG ========*/
*{margin:0px; padding:0px;}
body {
	background: url(bg_2cwebvn.png) repeat;
	margin: 20px 0px 0px;
	padding: 0px; 
}
#content {	margin: auto;width: 360px;}
h1{color: #DB2E66; margin:30px auto;width:450px;}
	
Tiếp theo ta sẽ định dạng cho menu và chi tiết cho từng menu. Phần này chủ yếu liên quan đến position, là làm thay đổi position để hiện đúng phần hình ảnh mà mình muốn.
/*========= ĐỊNH DẠNG MENU ========*/
.menu li {
	float: left;
	display: block;
	list-style-type: none;
}

.menu li a {
	height: 53px; width: 89px;
	text-indent: -9999px;
	display: block;
}
li.btn, li.btn a:hover {
	background-image: url(menu.png);
	background-repeat: no-repeat;
}
li.btn1 { background-position: 0px 10px;}

li.btn2 {	background-position: -85px 10px;}

li.btn3 {	background-position: -170px 10px;}

li.btn4 {	background-position: -255px 10px;}
	
Cuối cùng là hover cho các thẻ a, mình cũng sử dụng thuộc tính position trong css để làm hiển thị vị trí hình ảnh mà mình muốn.
/*========= HOVER MENU ========*/
li.btn1 a:hover {	background-position: 0px 85%;}

li.btn2 a:hover {	background-position: -85px 85%;}

li.btn3 a:hover {	background-position: -170px 85%;}

li.btn4 a:hover {	background-position: -255px 85%;}
	
Và đây là hình ảnh kết quả mà mình đã làm.
Menu phong cách social plugin trong wordpress - 2Cwebvn - 02
Menu phong cách social plugin trong wordpress - 2Cwebvn - 03

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