Upload
charleshall
View
756
Download
0
Embed Size (px)
Citation preview
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'> </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(' »');
});//]]></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