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

create menu using 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:

database menu

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à:

json data menu

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)

 

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Một trả lời tới to “Thiết kế menu dạng thương mại điện tử với Json Data”