Sunday, August 21, 2011

How I built the CSS Mega Menu #MindManager Macro

I previously posted on how I am using MindManager to generate a CSS3 based Mega Menu.

Trying to find information on creating macros in MindManager seems to be a little difficult, so I am going to explain how I did it. It is not really very complex, but if you want to try it yourself, this will set you on the path.

I am using MindManager 9 from Mindjet. If you don’t have it already, you can download the trial from here.

The first thing to do when you open MindManager is to go to File Options and turn on the Developer ribbon tab.

image

From the Developer tab in the ribbon, we can then open the Macro Editor

image

MindManager uses SAX Basic for its macros, so if you are a C# developer like me, you’ll have to dust off your basic programming skills.

Let’s review what we want this macro to do. I want a mind map with three levels (plus the central topic) to it which will represent all of the navigation items in my Mega Menu.

[image%255B2%255D.png]

Our goal is to generate an HTML page which looks like this.

[image%255B5%255D.png]

So first, lets look at what the HTML code needs to look like. We need to include the mega menu style sheet menu.css. I got this from here:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="Text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" Type="Text/css" media="screen" />
<Title>Mega Drop Down Menu</Title>
</head>



I create a <li> and <div> tags to encapsulate the level 1 topics and encapsulate each third level item in an unordered list. Here is a part of the markup:


<body>
<ul id="menu">
<li><a href="#" class="drop">One</a>
<div class="dropdown_5columns">
<div class="col_1">
<h3>One One</h3>
<ul>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">Two</a>
<div class="dropdown_5columns">
<div class="col_1">
<h3>Two One</h3>
<ul>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
</ul>
</div>
<div class="col_1">
<h3>Two Two</h3>
<ul>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
</ul>
</div>
</div>
</li>



I am going to hard code the location of my output folder, I am sure you could parameterise this on the map, but I am being lazy here. The location is going to be c:\projects\Ozippy\ and the output file is going to be MegaMenu.html.


I am not going to explain all of the Basic syntax, so if you aren’t familiar with it, you’ll need to refer to the SAX Basic documentation.


The main method is going to setup the output file and name it the same as the central topic in the map. Note that we use this syntax to get the Central Topic:

'Get the central topic of the current map as the starting point.
Set rootTopic=ActiveDocument.CentralTopic



image


I have two methods which write the header and footer of the HTML file.


image


image


Now I iterate through the level two and level three topics writing out the HTML as I go.


Note that I get all of the subtopics using this syntax:

For Each levelTwoTopic In levelOneTopic.SubTopics



image


And that is it. Run your macro and generate your mega menu html file. As long as you have your menu.css in the same folder as the HTML file, you should be able to launch it and see the results.


I should note that the CSS3 style sheet allows you to format the menu in many ways. I have just selected the simple five column option. If that doesn’t suit you can just adapt it accordingly.


 



del.icio.us Tags: ,,

2 comments:

Andrew Wilcox said...

Here is how to convert it to an Add In.

Jerry said...

thanks for the post