MygosuMenu - DHTML menu - Javascript
MyGosuMenu is a set of DHTML (javascript) menus that feature a separation into three layers (structure, presentation, and behavior), object oriented code that makes it possible to create many menus on one page, and support for most of the key browsers. It is designed to be friendly to search engines and text browsers.
Download
Plugins
- This little utility will generate a simple tree menu document: DynamicTree-mdb.zip [257 KB] (author: Adam Bunter)
- Tree Menu with icons and iframe: TreeMenu-icons-iframe.zip [7 KB] (author: Guy Thomas)
- Xul Menu with XP look and feel: XulMenu-XP-look-n-feel.zip [10 KB] (author: Michael F. S. Christensen)
- Bar menu with top level link: BarMenu-top-link.zip [4 KB]
Examples
Help
IE 5.0 support
<script type="text/javascript" src="../ie5.js"></script>
Doctype - quirks mode - Internet Explorer
When no doctype is specified, Internet Explorer runs in "quirks" mode. It is for backward compatibility, and many css bugs appear. If you want to avoid them, use a doctype, not necessary xhtml.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE Bug - nested tables
Example not working on IE:
<table><tr><td><table><tr><td>
<table id="menu">....</table>
<script>.. init menu ... </script>
</td></tr></table></td></tr></table>
Example that works on IE:
<table><tr><td><table><tr><td>
<table id="menu">....</table>
</td></tr></table></td></tr></table>
<script>.. init menu ... </script>
Difference: Looks like initializing the menu on IE must be done after closing some tables.
So if you are using nested tables, initialize the menu at the end of the page or use window.onload event:
<script>
window.onload = function() {
.. init menu ..
}
</script>
Drop Menu X
Known CSS problems:Safari: setting margin > 0 for BODY element causes some positioning problems. Sections in the menu will be placed a few pixels away from the default place. The menu still works and is usable. To avoid these problems set "margin: 0;" for BODY element.
IE: removing doctype causes that IE enables Backward Compatibility Mode and some CSS bugs can appear. Then you will need to edit .css file and make some fixes.
IE: IMG tags (arrows) could be removed from html structure and right aligned background could be set in .arrow class, but .. Internet Explorer has a bug - it doesn't cache CSS images. So if you have 20 arrows in menu ie will load them 20 times on each page request ! That can be annoying for users with slow connection, it also increases your bandwidth unnecessarily.
Dynamic Tree
Known problems:
Opera - seems like there is no way to get the original href attribute from <a> elements, they are converted to absolute paths. This can be a problem in TreeBuilder. IE had the same problem, but a dirty hack helped to solve it.
IE 5.0 - plugins don't work in TreeBuilder, Function.call() method is missing in its implementation.
Changelog
*** 1.5.8 ***
- added DynamicTree/tests/foldersAsLinks2.html
*** 1.5.7 ***
- DynamicTree/example3.php added - generating tree using php & mysql
*** 1.5.6 ***
- DropMenuX: fixed positioning submenu bug when window is resized
*** 1.5.5 ***
- DynamicTree fix: bug in ie6, changes in DynamicTree.css
*** 1.5.4 ***
Dynamic Tree:
- added setActive feature, see /tests/enableSetActive.html
- added openAll()
*** 1.5.3 ***
- #1.5 DynamicTree, added an example with folders as links, see /1.5/tests/foldersAsLinks.html
- #1.3 ClickShowHideMenu, added an example that highlights active item, see /1.3/tests/highlightActive.html
*** 1.5.2 ***
- #1.5 DynamicTreeBuilder, a bug that could affect you if you had more than 20 records in a tree when starting editing.
*** 1.5.1 ***
- #1.1 menu works with selectboxes on IE6
- some bug fixes in #1.5 menu
- some updates in readmes
*** 1.5.0 ***
- Added #1.5 menu, DynamicTree & DynamicTreeBuilder
*** 1.4.1 ***
- Added support for IE 5.0 & IE 5.5 in #1.0 / #1.1 / #1.4 menus
- [js] fixed a bug that prevented #1.3 menu working on Konqueror
- [html] fixed a bug with positioning in example 2 of #1.0 and #1.1 menu that appeared
on some versions of IE6 (6.0.2600 on XP, 6.0.3790 on Windows Server 2003)
*** 1.4.0 ***
- Fixed a bug in #1.0 menu that appeared on IE 5.5
- Added new #1.4 menu and 2 examples
*** 1.3.5 ***
- Fixed a bug in menu #1.3 that appeared on newest Mozilla 1.7 & Firefox 0.9
- updated /1.1/DropDownMenuX.txt
*** 1.3.4 ***
- fixed a few bugs in #1.0 menu
- #1.1 menu has been rewritten, now it supports vertical menus, a few bugs has been fixed,
new features added.
*** 1.3.3 ***
- #1.0 menu has been rewritten, a few bugs fixed, new features added, see /1.0/DropDownMenu1.txt for more info
- done some cleaning: file names etc
*** 1.3.2 ***
- Added another example of #1.1 menu
See /1.1/menu2.html