Menubar script

Code listing for mb.js

Hover over each line to read tips.

1. /*
2. * date: 2003-04-28
3. * info: http://inspire.server101.com/js/mb/
4. */
6. var mbW=250;
7. var mbO=[],mbP=[],mbA,mbT,mbTf;
9. function mbSet(m,c) {
10. if (document.getElementById&&document.createElement) {
11. var m=document.getElementById(m);
12. m.className=c;
13. var e,f,i,j;
15. var e=m.firstChild;
16. while (e) {
17. if (e.tagName=='LI') {
18. var div=document.createElement('div');
19. while (e.firstChild) {
20. div.appendChild(e.firstChild);
21. }
22. e.appendChild(div);
23. }
24. e=e.nextSibling;
25. }
27. e=m.getElementsByTagName('a');
28. if (!mbTf) mbTf=new Function('mbHAT();');
29. for (i=0;i<e.length;i++) {
30. e[i].onmouseout=e[i].onblur=mbTf;
31. }
33. m=m.getElementsByTagName('ul');
34. for (i=0;i<m.length;i++) {
35. if (j=m[i].id) {
36. mbO[j]=m[i];
37. e=m[i].parentNode;
38. f=e.parentNode.getAttribute('id');
39. if (mbO[f]) {
40. mbP[j]=f;
41. }
42. f=new Function('mbS(\''+j+'\');');
43. e=e.getElementsByTagName('a');
44. for (c=0;c<e.length;c++) {
45. e[c].onmouseover=e[c].onfocus=f;
46. }
47. mbH(j);
48. }
49. }
50. }}
52. function mbHA() {
53. if (mbA) {
54. while (mbA) mbH(mbA);
55. mbHE('visible');
56. }
57. }
59. function mbHAT() {
60. if (!mbT) mbT=setTimeout('mbHA();', mbW);
61. }
63. function mbTC() {
64. if (mbT) {
65. clearTimeout(mbT);
66. mbT=null;
67. }
68. }
70. function mbS(m) {
71. mbTC();
72. if (mbA) while (mbA&&m!=mbA&&mbP[m]!=mbA) mbH(mbA);
73. else mbHE('hidden');
75. mbSH(m,'visible');
76. mbA=m;
77. }
79. function mbH(m) {
80. if (m==mbA) mbA=mbP[m];
81. mbSH(m,'hidden');
82. mbT=null;
83. }
85. function mbSH(m,v) {
86. mbO[m].parentNode.firstChild.className=v;
87. mbO[m].style.visibility=v;
88. }
90. function mbHE(v) {
91. mbHEV(v,document.getElementsByTagName('select'));
92. }
94. function mbHEV(v,e) {
95. for (var i=0;i<e.length;i++) e[i].style.visibility=v;
96. }

---

function mbSet(m, c)

Transforms <ul>elements into an application styles menu bar with popup sub-menus.

m

String: id of the <ul> to transform into a menu bar.

c

String: class name applied to menu bar.

---

function mbHA()

Hides all open menus on the page. This function is not 'per menubar' specific, as there should never be more than one menubar being accessed at any given moment.

---

function mbHAT()

Calls mbHA() after a timeout of mbW milliseconds.

This is triggered by an onblur or onmouseout event, and cancelled by a subsequent onfocus or onmouseover event. One of the tricks of UI programming ÃÆ’¢Ãƒ¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬ÃƒÆ’‚¦ detecting when the menu has lost focus by tracking the individual components. There are doubtless more elegant solutions, but this serves well.

---

function mbTC()

Clears timeout set by mbHAT().

---

function mbS(m)

Shows a menu / submenu. Also toggles display of HTML elements which interfere with positioned menus.

m

String: id of the <ul> menu element to show.

---

function mbH(m)

Hide a menu / submenu.

m

String: id of the <ul> menu element to hide.

---

function mbSH(m,v)

Toggle between show/hide a menu.

m

String: id of the <ul> menu element to toggle.

v

String: visibility setting, either hidden or visible. Also used as a classname on the parent node's <a ÃÆ’¢Ãƒ¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬ÃƒÆ’‚¦> tag.

---

function mbHE(v)

Some HTML elements conflict with the display of positioned elements. This functions finds all elements by tag name and toggles their visibility.

v

String: visibility setting, either hidden or visible.

---

function mbHEV(v,e)

Some HTML elements conflict with the display of positioned elements. This functions hides these elements whenever the menu is visible. It’s not a great solution, but it prevents them from obscuring menu items. Logically this is a CSS problem, but I have not yet found a CSS solution.

v

String: visibility setting, either hidden or visible. Also used as a classname on the parent node's <a ÃÆ’¢Ãƒ¢ÃƒÂ¢Ã¢â€šÂ¬Ã…¡Ã‚¬ÃƒÆ’‚¦> tag.

e[]

String: array of elements to toggle..

Code in the javascript library is free to use. Enjoy! Feedback welcome.
© Ben Boyle 2003.