Tạo drop-down menu đẹp bằng Sothink DHTML Menu

Tải Sothink DHTML Menu 9.2 build 90326


Sau khi tải về và cài đặt. Ta tiến hành tạo menu nhé. Bắt đầu nào!

Cửa sổ làm việc:
- Mở chương trình lên, bạn sẽ thấy 4 Palettes làm việc như sau:
+ Palette chính (tạm gọi là Main Palette):


Main Palette có 2 thành phần panel là Menu (bên trái) và Preview (bên phải).
+ Palette Global Settings


+ Palette Popup Menu:


+ Palette Menu Item (bên dưới):


Trong quá trình tạo menu, ta chỉ làm việc với Main Palette, Global Settings và Menu Item Palette.

Tạo menu:
- Tạo một file mới bằng cách File -> New -> Blank menu. Lưu lại worksheet bằng cách bấm Ctrl+S, sau đó lưu vào thành 1 file nào đó, công việc lưu này rất cần thiết cho việc dùng lại hoặc chỉnh sửa menu. Bài ví dụ này sẽ lưu vào thư mục menufolder với tên file là menudata.

- Chọn Template cho menu:
+ Template -> Aplly A New Template
+ Một list tất cả các kiểu dáng menu sẽ hiện ra. Bạn chọn một loại ưu thích bằng cách nhấp chuột vào khung Existing Templates. Ở đây tôi chọn Gradient2. Xong bấm OK.

- Tạo menu:
+ Click chuột vào chữ Menu Item 1 ở Menu Panel trong Main Palette.
+ Xem dưới Menu Item Palette, bạn sẽ thấy chữ Menu Item 1, sửa nó thành Truyen ma. (Chú thích cho việc chữ không dấu: Sothink chưa hỗ trợ tiếng Việt có dấu, cho nên ta cứ viết chữ không dấu. Nhưng bạn đừng lo lắng, tí nữa chúng ta sẽ khắc phục điều này).
+ Trở lại Main Palette, bấm vào chữ Truyen ma. Click phải chọn Append Sub Menu Item.
+ Bấm vào chữ Menu Item 1 vừa mới tạo ra. Trở xuống Menu Item Palette, sửa chữ Menu Item 1 thành Audio. Ở ô trống Link bạn điền vào địa chỉ tương ứng, ví dụ http://myblog.com/truyenma/audio. Ở chỗ Target, thông thường để mặc định là _self.


+ Trở lại Main Palette, bấm vào chữ Truyen ma. Click phải chọn Append Sub Menu Item.
+ Bấm vào chữ Menu Item 1 vừa mới tạo ra. Trở xuống Menu Item Palette, sửa chữ Menu Item 1 thành Text. Ở ô trống Link bạn điền vào địa chỉ tương ứng, ví dụ http://myblog.com/truyenma/text. Ở chữ Tip, gõ vào Xem truyen o dang text (ý nghĩa: Hiện dòng chữ Xem truyen o dang text khi user rà chuột vào Menu Text).


+ Về Main Palette, click vào chữ Top Level Menu ở Menu Panel. Click phải chọn Add Sub Menu Item.
+ Click vào chữ Menu Item 1 vừa tạo ra. Sau đó tạo các menu con tương tự như tạo menu con cho Truyen ma lúc nãy. Ở đây tôi tạo thêm menu nhạc vàng và nhạc trẻ chẳng hạn.

Bấm Ctrl+S lần nữa để lưu trữ dữ liệu.

+ Trở lại với Global Setting Palette, ở chỗ Web Path, bạn gõ vào địa chỉ mà tí nữa các file dữ liệu của menu sẽ được upload lên, ví dụ http://vietwebgude.googlepages.com chẳng hạn. Nếu để trống (mặc định) thì menu chỉ có hiệu lực khi site của bạn cùng địa chỉ với dữ liệu menu.


+ Bấm vào nút Publish ở Main Palette, một popup sẽ hiện ra, bạn chọn View or copy code :


+ Bấm Next. Một đoạn code nho nhỏ sẽ hiện ra, bạn bấm vào nút Copy All. Bạn copy đoạn code này vào giữa 2 thẻ trong Site bạn.

++ Tiếp theo bấm nút Next, lại một đoạn code không nhỏ mới hiện ra, bạn cũng bấm Copy All rồi dán đoạn code này vào giữa 2 thẻ . Đây chính là đoạn code sẽ hiện menu vì vậy bạn chọn vị trí đặt cho thích hợp.


+ Bấm Next, chắc chắn rằng ô I want to copy the resource files now đã được chọn, bấm Next, Bấm Srowse đến folder lúc nãy đã lưu file menudata, ở đây là menufolder. Bấm Next sau đó Finish
+ Công việc cuối cùng của bạn là Upload toàn bộ files có trong thư mục menufolder lên Web Path mà lúc nãy bạn đã chọn ở Global Settings Palette (ở đây là http://vietwebguide.googlepages.com). Tiếp theo hãy chỉnh sửa tất cả các dòng menu text mà lúc nãy ta đánh chữ không dấu, bây giờ chỉnh thành chữ có dấu, không phải chỉnh trong sothink nữa mà là chỉnh ở đoạn code nhận được trong bước ++. Với sự hỗ trợ tìm kiếm của một trình Text Editor bất kì này cũng sẽ giúp bạn dễ dàng làm việc này.


*** Sothink DHTML Menu còn rất nhiều tùy biến khác để bạn có thể làm một menu hoàn toàn theo ý muốn. Bạn hãy tự khám phá thêm nhé, vì thời gian và hiểu biết có hạn tôi không thể chỉ toàn bộ ở đây được. Hy vọng bài viết này sẽ có nhiều bổ ích cho các bạn.
Nguồn: Anh Võ