hiỆu Ứng smooth menu kết hợp database

Thẻ Technorati: hướng dẫn tạo menu web cấp 2,đa cấp. smoth menu

Kết quả sau khi hoàn thanh bài lab :

 

Mình sẽ đi từ Cơ bản đến nâng cao 1 chút ,trước tiên mình sẽ hướng dẫn cách lảm menu 2 cấp trước
Source Download: http://vu.nhatnghe.vn/smoth.rar
Sau khi download source về các bạn giải nén ra ,bỏ vào C://appserv/www/….(máy bạn phải cài appserv hoặc Wramp,Xamp…),ở đây mình cài Appserv
Tiếp tục tạo site động trỏ vào folder vừa giải nén và import CSDL trong folder down về
Trước tiên thực hiện các step thực hành bạn cần phải hiểu rõ mô hình như sau

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1048x565

Bước 1:
Mở file menu_ngang.html ->Save as thành menu_ngang.php
Xác định vòng cha và con

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 987x324

Bước 2: Tạo kết nối Database
Vào tab application-> chọn thẻ databases-> new connection

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1170x606

Bước 3: Tạo Record set theloai và loạitin
Vào tab->application->chọn thẻ binding-> recordset(tao theloai)

Tạo record set loaitin(bạn phải chú ý phần filter idTL=123456789)->giá trị mặc định

Bước 4: Sauk hi xác định được vòng cha và con ta sẽ tiến hành kéo thả record set vào đúng vị trí mình đả vẽ trên hình

Bước 5: Sau khi kéo thả xong bạn tô chọn vòng cha và tiến hành lặp repeat region

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 918x359

Vào tab SeVer behavior ->Repeat region ->chọn rcord set theloai(All record)

Bước 6: Tiếp tục lặp vòng trong(cấp con)
Tô đen vòng trong và vào tab application->server behavior->developer toolbox->Dynamic List->Advance->Nested repeat region

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1187x481

Chọn như trong hình : Master : theloai
Details: Loaitin
Primary Key: idTL

Test
HOT phần tiếp theo mình sẽ hướng dẩn các bạn cách tạo và lặp menu 3 cấp- 4 cấp
Sau khi hoàn thành bài lap :
LIVE DEMO: http://vu.nhatnghe.vn/smoth/menu_doc.php
Source thì bạn vẫn sử dung source cũ:
Bước 1:
Mở file menu_doc.html ->Save as thành menu_doc.php
Ở đây các bạn cần chú ý đoạn code sau đây

PHP Code:

<ul>
      <!--level 2--><li><a href="#">Sub Item 1.1</a></li><!--level 2-->
  </ul> 


Nghĩa là cứ mổi cặp <ul> sẽ là 1 cấp con ,vậy khi ta muốn có menu 3 hoặc 4 cấp thì chỉ cần them đoạn code này sau thẻ đóng a của đối tưọng cha trứoc nó
Vậy bay giờ mình sẽ them 1 cấp đề làm menu 3 cấp, đoạn code sẽ như sau

Bứoc 2: Tạo recordset theloai và loaitin giống như bứoc 3 bài lap trên nhưng ở đây các bạn tạo them 1 record nữa là tin để lặp cấp thứ 3

Bứoc 3: Kéo các field vào trong đoạn code như sau

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1042x447

Bứoc 4: Xác định v à t ô đen vòng cha bao ở ngoài và lặp repeat region

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 957x475

Bứơc 5: Xác định vòng con bao ở trong và lặp nested repeat region
Tô đen vòng trong và vào tab application->server behavior->developer toolbox->Dynamic List->Advance->Nested repeat region

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 973x492

Chọn như trong hình : Master : theloai
Details: Loaitin
Primary Key: idTL
Bứoc 6:Bạn lại tiếp tuc Xác định đoạn code nằm trong vòng con (tạm gọi là vòng cháu) và lặp nested repeat region
Tô đen vòng trong và vào tab application->server behavior->developer toolbox->Dynamic List->Advance->Nested repeat region

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 949x507

Chọn như trong hình : Master : loaitin
Details: Tin
Primary Key: idLT
Test thu
Với hưóng dẫn của bài lap vừa rồi ,các bạn có thể áp dung cho menu 4 cấp hoặc bao nhiêu cấp cũng đựoc
Chúc các bạn thành công