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.

No comments: