Confluence - Improving Space Navigation. London AUG October 2013

  • 242 views
Uploaded on

A presentation describing a solution for a dynamic horizontal menu, suitable for inclusion within Confluence wiki pages and spaces. …

A presentation describing a solution for a dynamic horizontal menu, suitable for inclusion within Confluence wiki pages and spaces.
The solution builds upon the native children macro to create an attractive menu system.
As this slide uses some animations, it is best viewed in downloaded form.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
242
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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