Confluence – ImprovingSpace Navigation

Charles HallDocumentation Manager

London AUG – 28.10.2013

Does this seem familiar?

Article: The case against vertical navigation

Inspiration

Live Demo

If the live demo went wrong...

Starting Point

{children}

Transforming a list into a menu

About 162,000,000 results

http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/

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

<p><ac:macro ac:name="include"><ac:default-parameter>wiki:dynamic menu css</ac:default-parameter></ac:macro></p>

<p><ac:macro ac:name="include"><ac:default-parameter>wiki:dynamic menu jquery</ac:default-parameter></ac:macro></p>

<div class='custom_menu_container ui-corner-all'>$body</div><div id='shadow_menu'>&nbsp;</div>

Include pages

Container

Using the macro

Body of macro: Insert a {children} macro

Set your parameters:• Root page• Depth to show (max 3)

Why the dependencies?

All the tech is client-side, no VelocityEasier editingVersion history maintainedSeparation between CSS & jQuery

User macro wrapper allows easy addition from the macro browser

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;}

/* 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; border-

bottom: 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; font-

weight: 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; }

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');

//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>

Results

Including the menu on all pages

Menu page – Moving to the content area

Note: Controlling the opacity provides a non jerky way of re-positioning the menu to the main content area.

Additional wrapper (hidden)

Gotchas!

User chooses to hide left side bar

Page layout options

Root page name changes...

Evolution

Adapt to suit mobile devices (no hover)

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