This document describes a macro that transforms a child page list into a dynamic menu using CSS and jQuery. It includes the code for the macro, CSS, and jQuery used to create dropdown menus and hover effects. The macro allows including the menu on all pages by wrapping the content in a hidden div to move it to the main content area. Considerations for using the macro like page layout options and root page changes are also discussed.

1. Confluence – Improving
Space Navigation
London AUG – 28.10.2013
Charles Hall
Documentation Manager

2. Does this seem familiar?

3. Article: The case against vertical navigation

4. Inspiration

5. Live Demo

6. If the live demo went wrong...

7. Starting Point
{children}

8. Transforming a list into a menu
About 162,000,000 results
http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/

9. The macro
## Macro name: dynamic-menu
## Macro title: Dynamic Menu
## Description: This macro will transform a specially marked child page list (generated by the children macro)
into a dynamic menu.
## Categories: Navigation
## Macro has a body: Y
## Macro Body processing: Rendered
##
## @noparams
Include pages
<p><ac:macro ac:name="include"><ac:default-parameter>wiki:dynamic menu css</ac:defaultparameter></ac:macro></p>
<p><ac:macro ac:name="include"><ac:default-parameter>wiki:dynamic menu jquery</ac:defaultparameter></ac:macro></p>
<div class='custom_menu_container ui-corner-all'>
$body
</div>
<div id='shadow_menu'>&nbsp;</div>
Container

10. Using the macro
Body of macro:
Insert a {children} macro
Set your parameters:
• Root page
• Depth to show (max 3)

11. Why the dependencies?
All the tech is client-side, no Velocity
Easier editing
Version history maintained
Separation between CSS & jQuery
User macro wrapper allows easy
addition from the macro browser

12. Dynamic menu css
/* Colours:
#532F64 - Purple
#98005D - Pink
#7F004D - Cerise
#EDEAEF - Pinky grey
#C0B3C6 - Purply grey
#C0C0C0 - Dark grey
*/
.custom_menu_container {
background: #532F64;
min-height: 30px;
padding: 5px 10px 0px 10px;
margin-bottom: 10px;
position: absolute;
}
.custom_menu_container ul {
display: block;
list-style: none inside;
z-index: 1;
}

13. /* MENU LEVEL ONE */
/* Purple background, white text. Highlight in pink */
.custom_menu_container > ul { position: relative; }
.custom_menu_container > ul > li { font-weight: 500; float: left; zoom: 1; background: #532F64; }
.custom_menu_container > ul > li > a:hover { color: #7F004D; }
.custom_menu_container > ul > li > a:active { color: #7F004D; }
.custom_menu_container > ul > li > a { display: block; padding: 4px 8px; border-right: 1px solid #ffffff; }
.custom_menu_container > ul > li:last-child > a { border-right: none; } /* Doesn't work in IE */
.custom_menu_container > ul > li.hover, .custom_menu_container > ul > li:hover { background: #7F004D; position: relative; }
.custom_menu_container > ul > li.hover > a, .custom_menu_container > ul > li:hover > a { color: #ffffff; }
/* MENU LEVEL TWO */
/* Light pink background, purple text. Highlight with darker pink background, purple text */
.custom_menu_container > ul > li > ul {width: 250px; display: none; position: absolute; top: 100%; left: 0;}
.custom_menu_container > ul > li > ul > li { background: #EDEAEF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; borderbottom: 1px solid #ccc; float: none; padding-right: 5px; font-size:90%; }
.custom_menu_container > ul > li > ul > li:last-child { border-bottom: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > a { display: inline-block; padding: 4px 8px; border-right: none; width: 100%; color: #532F64; fontweight: 400; } /* IE 6 and 7 Needs Inline Block */
.custom_menu_container > ul > li > ul > li.hover, .custom_menu_container > ul > li > ul > li:hover { background: #ffffff; position: relative; }
.custom_menu_container > ul > li > div > ul > li.hover > a, .custom_menu_container > ul > li > ul > li:hover > a { color: #532F64; }
/* MENU LEVEL THREE */
/* Light pink background, purple text. Highlight in darker pink background, bright pink text */
.custom_menu_container > ul > li > ul > li > ul {display: none; position: absolute; top: 0; left: 100%; }
.custom_menu_container > ul > li > ul > li > ul > li { background: #EDEAEF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #ccc; float: none; padding-right: 8px; font-size:80%; }
.custom_menu_container > ul > li > ul > li > ul > li:first-child { border-top: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > ul > li:last-child { border-bottom: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > ul > li > a { display: inline-block; padding: 4px 8px; border-right: none; width: 100%; color: #98005D;
font-weight: 400; } /* IE 6 and 7 Needs Inline Block */
.custom_menu_container > ul > li > ul > li > ul > li.hover, .custom_menu_container > ul > li > ul > li > ul > li:hover { background: #C0B3C6;
position: relative; }
.custom_menu_container > ul > li > ul > li > ul > li.hover > a, .custom_menu_container > ul > li > ul > li > ul > li:hover > a { color: #98005D; }
/* ADDITIONAL LEVELS */
/* Hidden */
.custom_menu_container > ul > li > ul > li > ul > li > ul { display:none; }

14. Dynamic menu jquery
<script type="text/javascript“>
//<![CDATA[
AJS.toInit(function(){
//Remove whitespace in the custom container
AJS.$('div.custom_menu_container p:empty').remove();
//In a page with layout options which include a header, force header to accommodate height of menu
menuHeight = AJS.$('div.custom_menu_container').outerHeight(true) + 5;
AJS.$('div#shadow_menu').css({'min-height':menuHeight+'px'});
//Override Confluence list styling (needs to be actioned once page has loaded)
AJS.$('div.custom_menu_container ul').css({'list-style-type':'none','padding':'0'});
AJS.$('div.custom_menu_container a').css({'text-decoration':'none'});
AJS.$('div.custom_menu_container > ul > li > a').css({'color':'#ffffff'});
AJS.$('div.custom_menu_container > ul > li > ul > li:hover > a').css({'color':'#60ff87'});
//Add rounded corners to 2nd & 3rd level menu items
AJS.$('div.custom_menu_container > ul > li li:first-child').addClass('ui-corner-tl ui-corner-tr');
AJS.$('div.custom_menu_container > ul > li li:last-child').addClass('ui-corner-bl ui-corner-br');

15. //Hover for 1st level items (show 2nd level directly underneath)
AJS.$('div.custom_menu_container > ul > li').hover(function(){
AJS.$('ul:first', this).css({'display':'block'});
// show the first sub-menu in this item
AJS.$('ul:first > li > ul', this).css({'display':'none'});
// hide any lower levels in the sub-menu
}, function(){
AJS.$('ul:first', this).css({'display':'none'});
// not hovering any more, so hide the first sub-menu if there
was one
});
//Hover for 2nd level items (show 3rd level to the right)
AJS.$('div.custom_menu_container > ul > li > ul > li').hover(function(){
AJS.$('ul:first', this).css({'display':'block','position':'absolute','top':'0','left':'100%','width':'100%'});
}, function(){
AJS.$('ul:first', this).css({'display':'none'});
});
//Add the >> symbol to show users any 3rd level menu options
AJS.$('div.custom_menu_container > ul > li > ul > li:has(ul)').find('a:first').append('&nbsp;&raquo;');
});
//]]>
</script>

16. Results

17. Including the menu on all pages

18. Menu page – Moving to the content area
Additional wrapper (hidden)
Note: Controlling the opacity provides a non jerky way of re-positioning the menu to the main content area.

19. Gotchas!
User chooses to hide left side bar
Page layout options
Root page name changes...
Evolution
Adapt to suit mobile devices (no hover)

20. Thank you.
User macro: http://pastebin.com/untDGa1n
Dynamic menu css: http://pastebin.com/6Yu0Q6e6
Dynamic menu jquery: http://pastebin.com/yeHCnP6B
We are recruiting: Content Development Specialist
Visit http://www.openbet.com/careers/vacancies