Trả phải biết giới thiệu như thế nào nữa . Chỉ biết mục đích chính của bài viết này là hướng dẫn anh em dùng mã nguồn Bo-blog tạo thanh menu dạng drop down ( sử dụng css và Javascript ) từ danh mục phân loại trên blog một cách tự động. 
Hiện tại có nhiều kiểu menu drop down khác nhau nhưng mình sẽ làm theo kiểu Chrome CSS Drop Down Menu (v2.5) được cung cấp miễn phí trên Dynamic Drive Kiểu menu này hoạt động tốt trên nhiều trình duyệt web khác nhau bao gồm cả IE 6.
Các bạn nên thực hiện trên localhost trước khi đưa lên host để tránh lỗi nhé
Các bước thực hiện
1. Bước 1: Bạn hãy download file bên dưới về máy và giải nén sau đó upload thư mục menu lên thư mục gốc của host
2. Bước 2 : Chỉnh sửa và cài đặt.
– Mở file index.php trong thư mục gốc sau đó tìm đoạn mã sau :
[codes=php]//Section: Top – ở dòng thứ 99
$section_head_components=”<li>”.@implode(“</li>rn<li>”, $section_header).”</li>”;[/codes]Thay thế bằng :
[codes=php]//Section: Top
include_once (“menu/menu.php”);
if (file_exists(‘data/cache_categories.php’)) {
$section_head_components=makemenu();
}
else
$section_head_components=”<div id=’menu’>”.”<li>”.@implode(“</li>rn<li>”, $section_header).”</li>”.”</div>”;[/codes]
– Mở file elements.php ( của giao diện bạn đang sử dụng)
Thêm đoạn mã sau vào trước thẻ </head>
[codes=html]<script type=”text/javascript” src=”menu/menu.js”></script>
<link rel=”stylesheet” type=”text/css” href=”menu/chrometheme/chromestyle.css” />[/codes]Trong thư mục “menu/chrometheme” có sẵn 4 file css tương ứng với 4 mẫu giao diện khác nhau . Nhưng bạn nên chỉnh sửa các thông số trong file chromestyle.css sao cho giao diện của menu drop down phù hợp với giao diện của blog ( để làm được đều này bạn cần phải có kiến thức về css ).
– Tìm tiếp thẻ div bao bọc bên ngoài dòng {section_head_components} . Ở nhiều template khác nhau sẽ có sự khác biệt về tên ID của thẻ div trong ví dụ mà mình minh họa dưới đây là thẻ div mang id menu (<div id=”menu”>)
[codes=html] <div id=”menu”>
<ul>
{section_head_components}
</ul>
</div>[/codes]Thay bằng
[codes=html]{section_head_components}
<script type=”text/javascript”>cssdropdown.startchrome(“chromemenu”)</script>[/codes](Tức là xóa bỏ phần code bên ngoài từ thẻ div tìm được và chỉ giữ lại {section_head_components} và thêm đoạn mã <script type=”text/javascript”>cssdropdown.startchrome(“chromemenu”)</script>)
[b]Sau khi chỉnh sửa xong bạn save lại và upload đè các file này lên host
Chúc các bạn thực hiện thành công . Tạm thời mình thấy không được khỏe lắm nên chỉ viết sơ sơ thế này thôi. Có thắc mắc và góp ý gì vui lòng để lại nhận xét.
