Forum OpenACS Q&A: Re: Correction!
For testing i have added a small addition to xowiki head, which add a menu-renderer in the style i believe you want. One can use this via {{categories -style samplemenu}}.
#
# List-specific renderer based for some menus
#
TreeRenderer create TreeRenderer=samplemenu \
-superclass TreeRenderer=list \
-li_expanded_atts [list "class='menu-open'" "class='menu-closed'"] \
-subtree_wrapper_class "submenu"
TreeRenderer=samplemenu proc include_head_entries {args} {
# add your CSS here...
}
TreeRenderer=samplemenu proc render {tree} {
return "<ul class='menu' id='[$tree id]'>[next]</ul>"
}
Oh, fantastic. Thank you very much indeed. That will make a great general purpose solution for this kind of menu.
I have finished working through the CSS changes required to make this work with {{categories -decoration none}} which I have posted below. I noticed that even with -decoration none the categories tree is still rendered with class="mktree" in the version I am using.
At the moment this assumes and requires a containing <div> with class="foregroundcontainer" which is my main page content container. The only reason this is needed in the CSS is to eliminate the <h3>@category_name@</h3> without destroying the general case of the <h3> tag. If a specific class is added to this <h3> tag the requirement for a containing div would be eliminated.
The root of the category tree <ul> for the menu bar is identified as class="mktree" which seems to be still there even with -decoration none. I don't know if this will be true in later versions.
This also still requires each <ul> block to be wrapped in a <div class"submenu">. This demo carries fonts and colours specific to the site I am working on but these can obviously be altered to taste.
I hope it works this time!
Regards
Richard
/* ################### */
/* Menu system classes */
/* ################### */
/* Set the style for links on the menu bar */
div.foregroundcontainer > ul.mktree a:link {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 10pt;
background-color: transparent}
/* Set style for visited links on the menu bar */
div.foregroundcontainer > ul.mktree a:visited {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 10pt;
background-color: transparent}
/* Vanish the bits of the OpenAcs Category tree that we don't want */
div.foregroundcontainer > img + img + img + img +h3 {display: none}
/* Hide top layer of PowerofAloe Category tree by fiddling with font size */
div.foregroundcontainer > ul.mktree > li {position: absolute;
left: 40px;
font-size: 0pt;
color: #ffffff;
margin: 0px;
list-style: none}
/* Have to immediately more explicitly re set to size required for menu bar */
div.foregroundcontainer > ul.mktree > li > div.submenu {font-family: "Segoe UI", arial, sans-serif;
font-weight: bold;
font-size: 10pt;
overflow: visible}
/* Use to set position of menubar */
ul.mktree {position: absolute;
border: none;
width: 720px;
top: 9em;
left: 0em;
margin: 0em;
padding: 0em;
z-index: 1}
/* Make sure that the first layer is displayed horizontally */
ul.mktree > li > div.submenu > ul:first-child > li {position: relative;
top: 0px;
left: 0px;
display: inline;
padding: 2px 20px 5px 20px;
color: #6d6f71}
/* Adjust gap between seperate <li> entries in submenus, but not between wrapped entries */
ul.mktree > li > div.submenu > ul:first-child > li div.submenu > ul > li {margin: 7px 0px 7px 6px}
/* Add in the horizontal menu item separator bars */
ul.mktree > li > div.submenu > ul:first-child > li + li {border-left: solid 2px;
border-color: #4a9a44}
/* The addition of this <div> is unavoidable because with a horizontal menubar */
/* you have to take the dropdown out of the flow whilst preserving its position */
/* relative to the top level option selected. A <div> block allows for relative */
/* positioning without upsetting the flow of the horizontal elements. */
div.foregroundcontainer > ul.mktree > li > div.submenu div.submenu {display: none;
position: absolute;
width: 100%;
top: 80%;
left: 0%;
margin: 0px;
padding: 0px;
overflow: visible;
background-color: #ffffff;
opacity: 0.90;
filter:alpha(opacity=90);
-moz-border-radius: 12px}
/* All subsequent descendents are block displayed submenus */
div.foregroundcontainer > ul.mktree > li > div.submenu > ul > li > div.submenu ul {display: block;
list-style: none;
position: relative;
width: 70%;
left: 0px;
top: 0px;
padding: 5px 7px 12px 17px;
margin: 0px;
line-height: 0.9em;
text-align: left;
color: #6d6f71;
z-index: 1}
/* The following pushes sub-sub-menus to the right and down slightly*/
ul.mktree > li > div.submenu > ul > li > div.submenu div.submenu {left: 7.1em; top: 4.3em}
/* The following makes the menus appear when the mouse moves over the items */
ul.mktree > li > div.submenu > ul li:hover > div.submenu {display: block}
I have two categories defined: Site-Root and Dropdown Under Site-Root I have content pages 1-4 as top level xowiki pages, and a dropdown menu containing five subordinate pages. The structure is: Site-Root page01 page02 page03 page04 Dropdown paged01 paged02 paged03 paged04 paged05 Site-Root is an invisible category so that I get a horizontal menu. It looks like this: page01 | page02 | page 03 | page04 | Dropdown paged01 paged02 paged03 paged04 paged05 For user interface design reasons I need the layout order to be: page01 | page02 | page 03 | Dropdown | page 04 paged01 paged02 paged03 paged04 paged05 I have racked my brains and tried various ordering numbers in the Section field, but I cannot work out how to do this. The page ordering seems to work perfectly within a category, but is there a way of specifying that a subcategory (and its children) should be listed in between sibling items that are not categories? Richard
After checking out and playing with a HEAD version of xowiki, I thought I should take the opportunity to move my work across on the new version.
I have therefore adjusted my CSS to work with the samplemenu renderer that you so kindly provided, and it works beautifully. Thank you for posting that, it has really helped me to start to understand your code and the whole oo way of doing things.
I will strip out the project specific stylistic elements and will post a short samplemenu.css file (that could, if deemed suitable, be included in the distribution) and some brief documentation.
When I have more time I will work up a LHS vertical menu that works in a similar way. I will use your code as a boilerplate to create a renderer for the two styles - something like { -style horizontalmenu } and { -style vertical menu }.
I am a great believer in CSS, and where it can be used as a substitute for Javascript code I am all for having the choice.
Thank you so very much for all your help.
Regards
Richard
