• Thứ Sáu, 15/12/2006 08:35 (GMT+7)

    Cách tạo menu trên trang web bằng ASP hay DHTML

    Câu hỏi :
    Xin hướng dẫn cách tạo menu trên trang web bằng ASP hay DHTML.


    Trả lời :
    Có nhiều cách tạo hệ thống menu dạng phân cấp trong trang web, sau đây chúng tôi trình bày 2 cách cơ bản:
     1. dùng tag <menu> và <li> : menu được tạo ra theo cách này sẽ hiển thị theo chiều dọc. Sau đây là nội dung trang web demo hiển thị menu có 3 thành phần: 2 option và 1 menu con, menu con chứa 3 thành phần đều là option:
     <html>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <head>
     <script language=vbscript>
     'thủ tục xử lý nhấn chuột vào option 1
     Sub OnOption1()
     Alert("Bạn vừa nhấn option 1")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.1
     Sub OnOption2_1()
     Alert("Bạn vừa nhấn option 2.1")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.2
     Sub OnOption2_2()
     Alert("Bạn vừa nhấn option 2.2")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.3
     Sub OnOption2_3()
     Alert("Bạn vừa nhấn option 2.3")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 3
     Sub OnOption3()
     Alert("Bạn vừa nhấn option 3")
     End Sub
     </script>
     </head>
     <body>
     <menu>
     <li onclick=OnOption1()>Option 1
     <li>Menu 2
     <menu>
     <li onclick=OnOption2_1()>Option 2.1
     <li onclick=OnOption2_2()>Option 2.2
     <li onclick=OnOption2_3()>Option 2.3
     </menu>
     <li onclick=OnOption3()>Option 3
     </menu>
     </body>
     </html>
     2. dùng tag <table>, <tr>, <th> và <td>: menu được tạo ra theo cách này sẽ hiển thị theo chiều ngang hay dọc tùy theo yêu cầu. Sau đây là nội dung trang web demo hiển thị menu có 3 thành phần: 2 option và 1 menu con, menu con chứa 3 thành phần đều là option:
     <html>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <head>
     <script language=vbscript>
     'thủ tục xử lý nhấn chuột vào option 1
     Sub OnOption1()
     Alert("Bạn vừa nhấn option 1")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.1
     Sub OnOption2_1()
     Document.all.Menu2.Style.display="none"
     Alert("Bạn vừa nhấn option 2.1")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.2
     Sub OnOption2_2()
     Document.all.Menu2.Style.display="none"
     Alert("Bạn vừa nhấn option 2.2")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 2.3
     Sub OnOption2_3()
     Document.all.Menu2.Style.display="none"
     Alert("Bạn vừa nhấn option 2.3")
     End Sub
     'thủ tục xử lý nhấn chuột vào option 3
     Sub OnOption3()
     Alert("Bạn vừa nhấn option 3")
     End Sub
     'thủ tục xử lý nhấn chuột vào Menu 2
     Sub OnMenu2()
     'hiện thị menu pop-up tương ứng
     Document.all.Menu2.Style.display=""
     End Sub
     </script>
     </head>
     
     <body>
     <table>
     <tr><th onclick=OnOption1()>Option 1</th><th onclick=OnMenu2()>Menu 2</th><th onclick=OnOption3()>Option 3</th></tr>
     </table>
     <span id=Menu2 style="display=none;position=absolute;top=40;left=75;z-index=1">
     <table border=1>
     <tr><td onclick=OnOption2_1()>Option 2.1</td></tr>
     <tr><td onclick=OnOption2_2()>Option 2.2</td></tr>
     <tr><td onclick=OnOption2_3()>Option 2.3</td></tr>
     </table>
     </span>
     </body>
     </html>
     Hai trang web demo trên đây chỉ chứa các phần tử và thuộc tính tối thiểu để demo việc tạo menu trong trang web, bạn có thể tăng cường thêm các thuộc tính và thủ tục xử lý sự kiện cho từng thành phần trong menu để hiển thị đẹp, sống động hơn. 
     
    Chuyên mục: Lập trình