Difference between revisions of "Extension talk:TreeAndMenu"

Latest revision as of 16:04, 5 February 2018

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

• Main Page
• Special pages
  • Special pages
  • Version
  • Popular pages
• Current work
• My stuff
• Other stuff
  • Baz
  • Baz

The menu works from a small amount of JavaScript but is mainly CSS, below is the CSS rules used for this menu:

/*
* Dynamic menus
*/
.dmenu { width: 180px }

.dmenu, .dmenu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
.dmenu .selflink { font-weight: normal; }

.dmenu li { /* all list items */
position: relative;
float: left;
width: 172px;
padding: 4px;
z-index: 100;
}

.dmenu li,
.dmenu li.even a,
.dmenu li.odd 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 ul { /* second-level lists */
position: absolute;
left: -999em;
z-index: 101;
border: 1px solid #ccc;
}

.dmenu li ul ul { /* third-and-above-level lists */
position: absolute;
left: -999em;
margin: 0 0 0 0;
z-index: 102;
}

.dmenu li.odd .submenu {
width: 12px;
height: 15px;
float: right;
background: url(/common/images/rarr-lt.png) 0 3px no-repeat;
}
.dmenu li.even .submenu {
width: 12px;
height: 15px;
float: right;
background: url(/common/images/rarr-dk.png) 0 3px no-repeat;
}
.dmenu li.odd {
	background: #E9EDF4;
	border: 2px solid #E9EDF4;
}
.dmenu li.even {
	background: #D0D8E8;
	border: 2px solid #D0D8E8;
}

.dmenu li:hover, .dmenu li.sfhover {
	border: 2px solid #385D8A;
}

.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: 182px;
top: -3px;
}

Extending Treeview5

Would an option here to have been to extend the treeview5 extension?

As indicated above, please discuss issues at http://www.mediawiki.org/w/index.php?title=Extension_talk:TreeAndMenu