|
This talk page pertains specifically to the development of this extension. For more general discussion about bugs and usage etc, please refer to the mediawiki.org talk page at MW:Extension talk:TreeAndMenu
|
|
This extension is basically a new version of TreeView5 which adds a #menu parser function. The resulting structure when using #tree is the same as TreeView5 except that the CSS class of the surrounding div element is still dtree.
The structure resulting from #menu is basically a normal HTML list except that it's top-level UL element exhibits the dmenu class (and an id attribute as well the same as with #tree). The main reason for extending TreeView5 to achieve what is little more than a normal bullet list is so that it can still take advantage of TreeView's ability to handle recursion properly when necessary. The resulting "plain vanilla" list can be combined with CSS rules to achieve a wide variety of effects. The Son of Suckerfish JavaScript code has been added by the extension so that dropdown menu's can be easily achieved with CSS rules.
The LIs in the "plain vanilla" menu HTML exhibit odd and even class attributes, and the content of the LIs starts with a div element of class submenu if the item contains any child items.
Example
The menu works from a small amount of JavaScript but is mainly CSS, below is the CSS rules used for this menu:
|
|
<css>
/*
* Dynamic menus
*/
.dmenu, .dmenu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width: 184px;
}
.dmenu li { /* all list items */
position : relative;
float : left;
width: 172px;
padding: 4px;
}
.dmenu li, .dmenu li a, .dmenu li li, .dmenu li li a, .dmenu li li li, .dmenu li li li a {
color : black;
}
.dmenu li li { margin: 0; }
.dmenu li.even {
background: #D0D8E8;
border: 2px solid #D0D8E8;
}
.dmenu li.odd {
background: #E9EDF4;
border: 2px solid #E9EDF4;
}
.dmenu li ul { /* second-level lists */
position : absolute;
left: -999em;
border: 2px solid #385D8A;
z-index: 100;
}
.dmenu li ul ul { /* third-and-above-level lists */
left: -999em;
margin: -2px 0 0 2px;
z-index: 101;
}
.dmenu li li:hover {
color : white;
background-color : black;
}
.dmenu li:hover {
border: 2px solid #385D8A;
}
.dmenu li li:hover, .dmenu li li li:hover, .dmenu li li:hover li:hover {
border: 2px solid black;
color: white;
}
.dmenu li.odd .submenu {
width: 172px;
height: 15px;
position: absolute;
background: url(/common/images/rarr-lt.png) 160px no-repeat;
}
.dmenu li.even .submenu {
width: 172px;
height: 15px;
position: absolute;
background: url(/common/images/rarr-dk.png) 160px no-repeat;
}
.dmenu li li:hover .submenu { display:none; }
.dmenu li li:hover a, .dmenu li li li:hover a, .dmenu li li:hover li:hover a {
color : white;
}
.dmenu li li:hover li, .dmenu li li li:hover li {
color: black;
}
.dmenu li li:hover li a, .dmenu li li li:hover li a {
color : black;
}
.dmenu li:hover ul ul,
.dmenu li:hover ul ul ul,
.dmenu li.sfhover ul ul,
.dmenu li.sfhover ul ul ul {
left: -999em;
}
.dmenu li:hover ul,
.dmenu li li:hover ul,
.dmenu li li li:hover ul,
.dmenu li.sfhover ul,
.dmenu li li.sfhover ul,
.dmenu li li li.sfhover ul { /* lists nested under hovered list items */
left: 183px;
top: -2px;
}
</css>
|
|
