Trong ví dụ này tôi sẽ tạo một menu đứng đơn giản bằng cách kết hợp CSS và phương thức/ hiệu ứng slideToggle() của jQuery. Kiểu thiết kế được dựa trên menu của trang codeproject.com.Cơ bản
Menu này được thiết kế bởi nhiều mục, mỗi mục là một cặp thẻ <a> và <ul> xếp cạnh nhau. Trong đó <a> được dùng làm header của mỗi mục và khi bạn click vào header này, phần nội dung của nó sẽ ẩn/hiện tùy theo trạng thái hiện tại.Phần mã javascript rất đơn giản, chỉ cần gọi phương thức slideToggle() cho phần tử <ul> nằm kế tiếp phần tử <a> được click. Ta lấy phần tử này bằng cách dùng phương thức next().
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="menu"> <a href="#">Web Development</a> <ul> <li>Ajax</li> <li>ASP.NET</li> <li>HTML / CSS</li> <li>PHP</li> </ul> <a href="#">Mobile Development</a> <ul> <li>iPhone</li> <li>Android</li> <li>Windows Mobile</li> <li>Palm and WebOS</li> </ul> <a href="#">Multimedia</a> <ul> <li>DirectX</li> <li>GDI+</li> <li>OpenGL</li> </ul></div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| #menu{ font: 14px arial, verdana, sans-serif; width: 12em; background: #fe9900; border-color: #fe9900; border-width: 1px; border-style: solid;}#menu ul{ list-style: none; margin: 0; padding: 0;}#menu li{ display: block; padding: 2px 3px; background: #fff8de; cursor: pointer;}#menu li:hover{ background: #ffcc66;}#menu a { font-weight: bold; display: block; border: 1px solid #fe9900; padding: 2px 3px; background: #ffcc66; text-decoration: none;} |
1
2
3
4
5
| $(document).ready(function(){ $('#menu a').click(function(){ $(this).next().slideToggle(); });}); |
Tự động đóng các mục không sử dụng
Trong codeproject ta có thể thấy các mục menu sẽ được tự động đóng lại và chỉ xổ ra mục được click chọn. Vì vậy cần bổ sung thêm một phương thức mới để làm điều này. Tôi đặt tên phương thức là collapseAll(). Phương thức này nhận vào một tham số callback để thực hiện một công việc nào đó sau khi đã đóng toàn bộ các mục menu:
1
2
3
4
5
6
7
8
9
| function collapseAll(callback){ var elements=$("#menu ul:visible"); if(elements.length) elements.slideToggle("fast",callback); else if(typeof callback == "function") callback();} |
Như vậy, tôi sửa lại các mã javascript ban đầu thành:
1
2
3
4
5
6
7
8
9
| $(document).ready(function(){ collapseAll(); $('#menu a').click(function(){ var self=$(this); collapseAll(function(){ self.next().slideToggle("fast"); }); });}); |
Mã nguồn hoàn chỉnh
Nếu bạn gặp rắc rối khi làm ví dụ này, có thể tham khảo mã nguồn hoàn chỉnh HTML sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <html> <head> <title>A Simple Verical Navigation Menu</title> <style> #menu{ font: 14px arial, verdana, sans-serif; width: 12em; background: #fe9900; border-color: #fe9900; border-width: 1px; border-style: solid; } #menu ul{ list-style: none; margin: 0; padding: 0; } #menu li{ display: block; padding: 2px 3px; background: #fff8de; cursor: pointer; } #menu li:hover{ background: #ffcc66; } #menu a { font-weight: bold; display: block; border: 1px solid #fe9900; padding: 2px 3px; background: #ffcc66; text-decoration: none; } </style> <script type="text/javascript"> $(document).ready(function(){ collapseAll(); $('#menu a').click(function(){ var self=$(this); collapseAll(function(){ self.next().slideToggle("fast"); }); }); }); function collapseAll(callback){ var elements=$("#menu ul:visible"); if(elements.length) elements.slideToggle("fast",callback); else if(typeof callback == "function") callback(); } </script></head> <body><div id="menu"> <a href="#">Web Development</a> <ul> <li>Ajax</li> <li>ASP.NET</li> <li>HTML / CSS</li> <li>PHP</li> </ul> <a href="#">Mobile Development</a> <ul> <li>iPhone</li> <li>Android</li> <li>Windows Mobile</li> <li>Palm and WebOS</li> </ul> <a href="#">Multimedia</a> <ul> <li>DirectX</li> <li>GDI+</li> <li>OpenGL</li> </ul></div> </body></html> |
Không có nhận xét nào:
Đăng nhận xét