Example: Displaying a menu proxy as a list

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.

Example: Displaying a menu proxy as a list

Postby Dave Lee on Thu Jan 21, 2016 1:39 am

Thought I'd share this - I got this question in my inbox, about how I created the sitemap on this page: desktophelp.sage.co.uk/sage200/sage200standard/Content/Sitemap.htm
Nita Beck wrote:I'm trying to implement a sitemap similar to yours at Sage. I have managed to get the full listing, but all the links are coming out left-justified, with no nesting, so the hierarchy isn't apparent. I've fiddled with the CSS and I've been inspecting the elements in the output, but I'm a bit stumped. Would you be willing to share your CSS for how you styled the sitemap?


If you want to use the menu skin, and just want items to be indented; then in the menu skin editor go to Styles > Menu Item > 1/2/3/4 Level > Block and use Padding (or Margin, etc.).

The sitemap I created uses a menu proxy, but is displayed as a normal list rather than using the menu skin.
* The menu proxy is set to display the whole menu (so context sensitive is off, Levels to show is set to (all)).
* I add a small script which removes the styling from the menu proxy skin (by removing the "menu" class), so it uses my normal list styles. I do this because I didn't want any styles from the menu skin, and also because you can only set the menu skin to style items to 4 levels (so it won't indent from the 5th level onwards).

HTML for sitemap page:

Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="9" MadCap:lastHeight="302" MadCap:lastWidth="888" class="">
   <head>

   </head>
   <body>
      <h1>Sitemap</h1>
      <MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: False;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
      <p>
         <script type="text/javascript">/*<![CDATA[*/$(document).ready(function(){
            $(".menu").removeClass("menu");
         });/*]]>*/</script>
      </p>
   </body>
</html>
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Example: Displaying a menu proxy as a list

Postby Nita Beck on Thu Jan 21, 2016 5:46 am

Thanks, Dave. You're a peach. I *think* I get it, so will try this out the moment I get in the office (which'll be as soon as I swill down some coffee!).

(A short while later...)

PERFECTO! Once again, I bow to your superior brain power! Dave, you are a treasure here on the forums and to the Flare community at large. I'm going to share your technique -- with full attribution, my friend -- with my local group at our meeting in a couple of days.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3290
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 1 guest