Confluence – Improving
Space Navigation
London AUG – 28.10.2013

Charles Hall
Documentation Manager
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 m...
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 Velocity
Easier editing
Version history maintained
Separation betwe...
Dynamic menu css
/* Colours:
#532F64 - Purple
#98005D - Pink
#7F004D - Cerise
#EDEAEF - Pinky grey
#C0B3C6 - Purply grey
#...
/* MENU LEVEL ONE */
/* Purple background, white text. Highlight in pink */
.custom_menu_container > ul { position: relati...
Dynamic menu jquery
<script type="text/javascript“>
//<![CDATA[
AJS.toInit(function(){
//Remove whitespace in the custom c...
//Hover for 1st level items (show 2nd level directly underneath)
AJS.$('div.custom_menu_container > ul > li').hover(functi...
Results
Including the menu on all pages
Menu page – Moving to the content area

Additional wrapper (hidden)

Note: Controlling the opacity provides a non jerky wa...
Gotchas!
User chooses to hide left side bar
Page layout options

Root page name changes...

Evolution
Adapt to suit mobile...
Thank you.
User macro: http://pastebin.com/untDGa1n
Dynamic menu css: http://pastebin.com/6Yu0Q6e6
Dynamic menu jquery: ht...
Upcoming SlideShare
Loading in...5
×

Confluence - Improving Space Navigation. London AUG October 2013

367

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
367
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Confluence - Improving Space Navigation. London AUG October 2013

  1. 1. Confluence – Improving Space Navigation London AUG – 28.10.2013 Charles Hall Documentation Manager
  2. 2. Does this seem familiar?
  3. 3. Article: The case against vertical navigation
  4. 4. Inspiration
  5. 5. Live Demo
  6. 6. If the live demo went wrong...
  7. 7. Starting Point {children}
  8. 8. Transforming a list into a menu About 162,000,000 results http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/
  9. 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. 10. Using the macro Body of macro: Insert a {children} macro Set your parameters: • Root page • Depth to show (max 3)
  11. 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. 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. 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. 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. 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. 16. Results
  17. 17. Including the menu on all pages
  18. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×