How to Build menu4web

You can review source code of a working example at

1. Include a reference to m4w.js library:

<script src="m4w.js"></script>*

2. Assign menu style:

<script> m4w.sT="position: relative; alwaysvisible: true; font-size: 9pt; etd-padding: 3px; etd-padding-left: 11px; etd-padding-right: 11px;"; </script>

3. Create menu div, menu item and element:

<script>; // menu id
m4w.m(, "", "", m4w.sT); // menu div
m4w.i(, 1, "link.html", 110, "", ""); // menu item
m4w.e(, 1, "Home", "background: #4C86B0; color: #FFFFFF;"); // menu element

Menu will probably have multiple items and each item may have several elements. Call m4w.i and m4w.e methods to create required items and elements.

4. Draw menu

<script> m4w.draw(); </script>

5. Repeat steps 2, 3, 4 for each sub menu you are creating:


m4w.sD="pos-left: 2px; font-size: 9pt; etd-background: #F2F0D2; etd-padding: 2px;";
m4w.sDB="border: 1px solid #777777;";; / / sub menu id
m4w.m(, m4w.sDB, "", m4w.sD); / / sub menu div
m4w.i(, 1, "link.html", "", "", ""); / / sub menu item
m4w.e(, 1, "Downloads", "color: #000000;"); / / sub menu element



6. Beatify your code by rewriting repeating statements as methods and properties of m4w object.

Last edited Jan 1, 2013 at 2:18 PM by sn41, version 15


No comments yet.