Thiết kế menu dạng thương mại điện tử với Json Data

Bạn đã từng thấy rất nhiều trang thương mại điện tử làm kiểu menu rất đẹp và chuyên nghiệp, và bạn tự hỏi làm nó như thế nào? Vậy thì bài viết sau sẽ hướng dẫn bạn làm một dạng menu như thế với Json Data

I. Database

Một database mẫu được thiết kế như dưới đây, bạn cũng có thể thay đổi cho phù hợp với project của bạn,

[PHP]
CREATE TABLE categories
(
cat_id int(11) NOT NULL AUTO_INCREMENT,
name varchar(150) ,
parent int(11) ,
media varchar(100),
PRIMARY KEY (cat_id)
);
[/PHP]
Và mẫu dữ liệu như sau:

II. Catagories.php

File catagories.php bao gồm những đoạn code load dữ liệu từ MySql ra, sau đó thực hiện encode cho Json

[PHP]
array());

while ($row = mysql_fetch_array($sql))
{
$cat_id = $row[‘cat_id’];
$ssql = mysql_query(“select cat_id,name,media from categories where parent=’$cat_id'”);

// single category node
$category = array(); // temp array
$category[“cat_id”] = $row[“cat_id”];
$category[“name”] = $row[“name”];
$category[“media”] = $row[“media”];
$category[“sub_categories”] = array(); // subcategories again an array

while ($srow = mysql_fetch_array($ssql))
{
$subcat = array(); // temp array
$subcat[“cat_id”] = $srow[‘cat_id’];
$subcat[“name”] = $srow[‘name’];
// pushing sub category into subcategories node
array_push($category[“sub_categories”], $subcat);
}

// pushing sinlge category into parent
array_push($categories[“Categories”], $category);
}
echo ((isset($_GET[‘callback’])) ? $_GET[‘callback’] : “”) . ‘(‘ . json_encode($categories) . ‘)’;
?>
[/PHP]

Và kết quả là:

III. Javascript & HTML

Việc bây giờ là bạn sử dụng Javascript để lấy dữ liệu từ Json ra bằng thủ tục $.getJson và bind nó vào thẻ ul có id nào đó. Còn menu con sẽ được bind vào thẻ ul có id riêng.

[PHP]


[/PHP]

$(“.category”).live(‘mouseover’,function(event){}– category là hảm xử lý sự kiện khi user hover chuột qua từng menu cha, sử dụng element.attr(“id”) để gọi giá trị của menu. Sau đó là đoạn mã HTML đơn giản như sau:

[PHP]
//HTML Code

[/PHP]
Ngoài ra cũng cần lưu ý đó là phương thức kết nối tới database và file css cho menu nữa chứ nhỉ.

db.php

[PHP]
[/PHP]

style.css

[PHP]
#menu_box
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:400px;width:200px;
background-color:#fff;
margin-left:20px;
float:left;
position:relative;
z-index:300
}
#menu_slider
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:370px;background-color:#fff;margin-left:220px;
position:absolute;
width:250px;
position:relative;
z-index:200;
display:none;
padding:15px
}
.hideul{display:none}
[/PHP]

Vậy là thành quả của chúng ta đã xong, bạn có thể view demo hoặc download mã nguồn về nếu như không làm được. Chúc bạn thành công

Download Code View Demo

(9 lession)