【网页制作】符合web标准的弹出菜单集(div+css+js)

oghuz

  水平方向的PopMenu-弹出菜单（DIV+CSS+JS）

此POPMENU根据alistapart的articles改编，比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox NS都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可，不会因分辨率不同而发生错位的现象。
演示:http://blog.macrolong.com/up/popmenu1.htm
CSS代码

1. li ul {
2. display: none;
3. left: -40px;
4. position: absolute;
5. top: 24px;
6. width: 490px; /*opera需要这个宽度，
7. 可根据导航条的实际宽度作调整*/
8. }
10. li ul li{
11. display: inline;
12. }
14. li ul li a{
15. background: url(h_line.gif) no-repeat 0px 7px;
16. color: #666666;
17. font-weight: normal;
18. padding: 6px;
19. text-align: left;
20. }
22. li ul li a:hover{
23. background: url(h_line.gif) no-repeat 0px 7px;
24. color: #DC4E1B;
25. text-decoration: underline;
26. }
28. li ul,li ul li{
29. border: 0px;
30. }
31. li:hover ul, li.over ul,ul li:hover {
32. display: block;
33. }
35. ul {
36. list-style: none;
37. margin: 0px;
38. padding: 0px;
39. font: normal 11px verdana;
40. }
42. ul li {
43. border: solid 1px #CCCCCC;
44. border-left: 0px;
45. float: left;
46. position: relative;
47. }
49. ul li a {
50. background: #F5F5F5;
51. color: #666666;
52. display: block;
53. font-weight: bold;
54. padding: 5px 10px;
55. text-align: center;
56. text-decoration: none;
57. }
59. ul li a:hover {
60. background: #DC4E1B;
61. color: #FFFFFF;
62. }
64. .left{
65. height: 24px;
66. width: 1px;
67. }

复制代码

html:

1. <ul id="nav">
2.   <li class="left"></li><li><a href="#">Home</a></li>
3. <li><a href="#">About</a><ul> <li><a href="#">Sub menu 21</a>
4. </li><li><a href="#">Sub menu 22</a></li> <li><a href="#">
5. Sub menu 23</a></li><li><a href="#">Sub menu 24</a></li> </ul>
6. </li> <li><a href="#">Products</a><ul><li><a href="#">Sub menu 31
7. </a></li> <li><a href="#">Sub menu 32</a></li> <li><a href="#">
8. Sub menu 33</a></li> <li><a href="#">Sub menu 34</a></li></ul>
9. </li> <li><a href="#">Services</a><li><a href="#">Contact Us
10. </a></li>
11. </ul>

复制代码

js代码

1. startList = function() {
2. if (document.all&&document.getElementById) {
3. navRoot = document.getElementById("nav");
4. for (i=0; i<navRoot.childNodes.length; i++) {
5. node = navRoot.childNodes[i];
6. if (node.nodeName=="LI") {
7. node.onmouseover=function() {
8. this.className+=" over";
9. }
10. node.onmouseout=function() {
11. this.className=this.className.replace(" over", "");
12. }
13. }
14. }
15. }
16. }
17. window.onload=startList;

复制代码

垂直方向
演示:http://blog.macrolong.com/up/popmenu2.htm
css:

1. body {
2. font-family: Arial, Helvetica, sans-serif;
3. font-size: 11px;
4. }
6. #nav, #nav ul {
7. list-style: none;
8. background: #F9F9F9;
9. font-weight: bold;
10. padding: 0px;
11. margin: 0px;
12. border: solid 1px #CCCCCC;
13. border-bottom: 0px;
14. width: 150px;
15. text-align: left;
16. }
18. #nav ul ul{
19. border: solid 1px #CCCCCC;
20. border-bottom: 0px;
21. }
23. #nav a {
24. display: block;
25. width: 150px;
26. w\idth: 140px;
27. color: #333333;
28. text-decoration: none;
29. text-align: center;
30. border-bottom: solid 1px #CCCCCC;
31. text-align: left;
32. padding-left: 10px;
33. }
35. #nav a:hover{
36. color: #336666;
37. }
39. #nav a.selected{
40. background: url(../images/arrow.gif) no-repeat right 50%;
41. }
43. #nav li {
44. line-height: 22px;
45. position: relative;
46. }
48. #nav li ul {
49. position: absolute;
50. left: -999em;
51. width: 150px;
52. font-weight: normal;
53. margin: 0px;
54. padding: 0px;
55. }
57. #nav li li {
58. width: 150px;
59. }
61. #nav li ul a {
62. width: 150px;
63. w\idth: 126px;
64. padding: 0px 12px;
65. line-height: 22px;
66. text-align: left;
67. }
69. #nav li ul ul {
70. margin: 0px 0 0 150px;
71. }
73. #nav li:hover ul ul,#nav li.sfhover ul ul{
74. left: -999em;
75. }
77. #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
78. left: auto;
79. }
81. #nav li:hover ul,#nav li.sfhover ul{
82. left: 150px;
83. top: 0px;
84. }
86. #nav li:hover, #nav li.sfhover {
87. background: #F5E3C0;
88. }
90. * html #nav li {
91. float: left;
92. height: 1%;
93. }
95. * html #nav li a {
96. height: 1%;
97. }

复制代码

js:

2. <script type="text/javascript"><!--//--><![CDATA[//><!--
4. sfHover = function() {
5. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
6. for (var i=0; i<sfEls.length; i++) {
7.   sfEls[i].onmouseover=function() {
8.   this.className+=" sfhover";
9.   }
10.   sfEls[i].onmouseout=function() {
11.   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
12.   }
13.   }
14. }
15. if (window.attachEvent) window.attachEvent("onload", sfHover);
17. //--><!]]></script>

复制代码

html:

1. <ul id="nav">
2. <li><a href="">Home</a></li>
3. <li><a href="/aboutme.html">About Me</a></li>
4. <li><a class="selected" href="/tutorials.html">Tutorials</a>
5. <ul>
6. <li><a href="#">Sub Menu 31</a></li>
7. <li><a class="selected" href="#">Sub Menu 32</a>
8. <ul>
10. <li><a href="#">Sub Menu 321</a></li>
11. <li><a href="#">Sub Menu 322</a></li>
12. <li><a href="#">Sub Menu 323</a></li>
13. <li><a href="#">Sub Menu 324</a></li>
14. </ul>
15. </li>
16. <li><a href="#">Sub Menu 33</a></li>
18. <li><a href="#">Sub Menu 34</a></li>
19. </ul>
20. </li>
21. <li><a class="selected" href="/gallery/gallery.html">Gallery</a>
22. <ul>
23. <li><a href="#">Sub Menu 41</a></li>
24. <li><a class="selected" href="#">Sub Menu 42</a>
25. <ul>
27. <li><a href="#">Sub Menu 421</a></li>
28. <li><a href="#">Sub Menu 422</a></li>
29. <li><a href="#">Sub Menu 423</a></li>
30. <li><a href="#">Sub Menu 424</a></li>
31. </ul>
32. </li>
33. <li><a href="#">Sub Menu 43</a></li>
35. <li><a href="#">Sub Menu 44</a></li>
36. </ul>
37. </li>
38. <li><a href="#">Contact Me</a></li>
39. </ul>

复制代码

esnak

怎么没有仿windows、office的纵向列表子菜单？？

oghuz

  水平方向的PopMenu-弹出菜单（DIV+CSS+JS）

此POPMENU根据alistapart的articles改编，比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox NS都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可，不会因分辨率不同而发生错位的现象。
演示:http://blog.macrolong.com/up/popmenu1.htm
CSS代码

1. li ul {
2. display: none;
3. left: -40px;
4. position: absolute;
5. top: 24px;
6. width: 490px; /*opera需要这个宽度，
7. 可根据导航条的实际宽度作调整*/
8. }
10. li ul li{
11. display: inline;
12. }
14. li ul li a{
15. background: url(h_line.gif) no-repeat 0px 7px;
16. color: #666666;
17. font-weight: normal;
18. padding: 6px;
19. text-align: left;
20. }
22. li ul li a:hover{
23. background: url(h_line.gif) no-repeat 0px 7px;
24. color: #DC4E1B;
25. text-decoration: underline;
26. }
28. li ul,li ul li{
29. border: 0px;
30. }
31. li:hover ul, li.over ul,ul li:hover {
32. display: block;
33. }
35. ul {
36. list-style: none;
37. margin: 0px;
38. padding: 0px;
39. font: normal 11px verdana;
40. }
42. ul li {
43. border: solid 1px #CCCCCC;
44. border-left: 0px;
45. float: left;
46. position: relative;
47. }
49. ul li a {
50. background: #F5F5F5;
51. color: #666666;
52. display: block;
53. font-weight: bold;
54. padding: 5px 10px;
55. text-align: center;
56. text-decoration: none;
57. }
59. ul li a:hover {
60. background: #DC4E1B;
61. color: #FFFFFF;
62. }
64. .left{
65. height: 24px;
66. width: 1px;
67. }

复制代码

html:

1. <ul id="nav">
2.   <li class="left"></li><li><a href="#">Home</a></li>
3. <li><a href="#">About</a><ul> <li><a href="#">Sub menu 21</a>
4. </li><li><a href="#">Sub menu 22</a></li> <li><a href="#">
5. Sub menu 23</a></li><li><a href="#">Sub menu 24</a></li> </ul>
6. </li> <li><a href="#">Products</a><ul><li><a href="#">Sub menu 31
7. </a></li> <li><a href="#">Sub menu 32</a></li> <li><a href="#">
8. Sub menu 33</a></li> <li><a href="#">Sub menu 34</a></li></ul>
9. </li> <li><a href="#">Services</a><li><a href="#">Contact Us
10. </a></li>
11. </ul>

复制代码

js代码

1. startList = function() {
2. if (document.all&&document.getElementById) {
3. navRoot = document.getElementById("nav");
4. for (i=0; i<navRoot.childNodes.length; i++) {
5. node = navRoot.childNodes[i];
6. if (node.nodeName=="LI") {
7. node.onmouseover=function() {
8. this.className+=" over";
9. }
10. node.onmouseout=function() {
11. this.className=this.className.replace(" over", "");
12. }
13. }
14. }
15. }
16. }
17. window.onload=startList;

复制代码

垂直方向
演示:http://blog.macrolong.com/up/popmenu2.htm
css:

1. body {
2. font-family: Arial, Helvetica, sans-serif;
3. font-size: 11px;
4. }
6. #nav, #nav ul {
7. list-style: none;
8. background: #F9F9F9;
9. font-weight: bold;
10. padding: 0px;
11. margin: 0px;
12. border: solid 1px #CCCCCC;
13. border-bottom: 0px;
14. width: 150px;
15. text-align: left;
16. }
18. #nav ul ul{
19. border: solid 1px #CCCCCC;
20. border-bottom: 0px;
21. }
23. #nav a {
24. display: block;
25. width: 150px;
26. w\idth: 140px;
27. color: #333333;
28. text-decoration: none;
29. text-align: center;
30. border-bottom: solid 1px #CCCCCC;
31. text-align: left;
32. padding-left: 10px;
33. }
35. #nav a:hover{
36. color: #336666;
37. }
39. #nav a.selected{
40. background: url(../images/arrow.gif) no-repeat right 50%;
41. }
43. #nav li {
44. line-height: 22px;
45. position: relative;
46. }
48. #nav li ul {
49. position: absolute;
50. left: -999em;
51. width: 150px;
52. font-weight: normal;
53. margin: 0px;
54. padding: 0px;
55. }
57. #nav li li {
58. width: 150px;
59. }
61. #nav li ul a {
62. width: 150px;
63. w\idth: 126px;
64. padding: 0px 12px;
65. line-height: 22px;
66. text-align: left;
67. }
69. #nav li ul ul {
70. margin: 0px 0 0 150px;
71. }
73. #nav li:hover ul ul,#nav li.sfhover ul ul{
74. left: -999em;
75. }
77. #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
78. left: auto;
79. }
81. #nav li:hover ul,#nav li.sfhover ul{
82. left: 150px;
83. top: 0px;
84. }
86. #nav li:hover, #nav li.sfhover {
87. background: #F5E3C0;
88. }
90. * html #nav li {
91. float: left;
92. height: 1%;
93. }
95. * html #nav li a {
96. height: 1%;
97. }

复制代码

js:

2. <script type="text/javascript"><!--//--><![CDATA[//><!--
4. sfHover = function() {
5. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
6. for (var i=0; i<sfEls.length; i++) {
7.   sfEls[i].onmouseover=function() {
8.   this.className+=" sfhover";
9.   }
10.   sfEls[i].onmouseout=function() {
11.   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
12.   }
13.   }
14. }
15. if (window.attachEvent) window.attachEvent("onload", sfHover);
17. //--><!]]></script>

复制代码

html:

1. <ul id="nav">
2. <li><a href="">Home</a></li>
3. <li><a href="/aboutme.html">About Me</a></li>
4. <li><a class="selected" href="/tutorials.html">Tutorials</a>
5. <ul>
6. <li><a href="#">Sub Menu 31</a></li>
7. <li><a class="selected" href="#">Sub Menu 32</a>
8. <ul>
10. <li><a href="#">Sub Menu 321</a></li>
11. <li><a href="#">Sub Menu 322</a></li>
12. <li><a href="#">Sub Menu 323</a></li>
13. <li><a href="#">Sub Menu 324</a></li>
14. </ul>
15. </li>
16. <li><a href="#">Sub Menu 33</a></li>
18. <li><a href="#">Sub Menu 34</a></li>
19. </ul>
20. </li>
21. <li><a class="selected" href="/gallery/gallery.html">Gallery</a>
22. <ul>
23. <li><a href="#">Sub Menu 41</a></li>
24. <li><a class="selected" href="#">Sub Menu 42</a>
25. <ul>
27. <li><a href="#">Sub Menu 421</a></li>
28. <li><a href="#">Sub Menu 422</a></li>
29. <li><a href="#">Sub Menu 423</a></li>
30. <li><a href="#">Sub Menu 424</a></li>
31. </ul>
32. </li>
33. <li><a href="#">Sub Menu 43</a></li>
35. <li><a href="#">Sub Menu 44</a></li>
36. </ul>
37. </li>
38. <li><a href="#">Contact Me</a></li>
39. </ul>

复制代码