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: ,,

Friday, August 19, 2011

Using MindManager to generate a CSS3 based Mega Menu

Over the years I have come to recognise how really important Information Architecture is to the success of Intranet and Internet sites. For quite some time now I have been a big fan of using the Mega Menu approach to navigation. Jakob Nielsen acknowledges that Mega Menus can work well if designed correctly. http://www.useit.com/alertbox/mega-dropdown-menus.html

Many organisations use this type of navigation now. See some examples here: http://designm.ag/inspiration/mega-menus/

One of the biggest challenges is getting people to agree on what the menu should contain and how it should be structured. I love MindManager from Mindjet and use this tool all the time when doing workshops or even just designing things myself. It is a great way for people to visualise how the menu structure should be created and makes it easy to change as we discuss things. However, there is nothing like actually visualising the mega menu in a browser and being able to interact with it. So I have written a macro for MindManager which will take the navigation structure and generate an HTML page which displays it as a Mega Menu.

I have used this tutorial as the basis for the mega menu which does everything with CSS3. No need to use jQuery or anything else at this point.

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

So, I can create a MindMap that looks like this:

image

Run the macro and generate an HTML file which looks like this:

image

So as I am working with the people making the decisions, I can regenerate the menu whenever I need so that we can see how it looks.

When I have it right I can then integrate it into my site and refine the presentation and style to suit.

Wednesday, August 3, 2011

Getting MSMQ configured for K2 on a domain controller

I was installing K2 on a domain controller development environment and the instructions for getting MSMQ configured didn't quite work. K2 kept companing that MSMQ was not configured correctly.

This post explains how to configure MSMQ on a domain controller:

http://technet.microsoft.com/en-us/library/cc749102(WS.10).aspx