MenuBox

Menu Box is the module that allows you to add beautiful CSS-based SEO friendly navigation menu to a DotNetNuke based website easily. Unlike other modules that have predefined set of menu styles and designs, Menu Box works as a platform that helps building various menus that you can customize and design on your own. There are no limitations but your own imagination.

There is a ton of menu types that already exists and free to use. However, it is always been a challenge to use them with DotNetNuke. Integrating a custom menu into DotNetNuke is a painful procedure, especially if a desired template has different from standard DNN Menu HTML structure or if it is based on some JavaScript libraries, such as JQuery, Mootools, Prototype & Script.aculo.us, etc. There are some ways around; e.g. you can build a custom menu module, create a Skin Object, plug-in needed JS library and make sure there are no conflicts with other modules and DNN itself. It is a lot of work and stress, isn't it? That is why we came up with Menu Box.

Our main goal was to create a platform that would easily allow building and using custom menu structures, designs and animation effects. It seems like we got it.

So, how does it work?

Menu Box is a dnn module that works as a container for Menu Templates. Menu Template is a combination of HTML, CSS and JavaScript, just like the regular HTML based menu.

Menu Box could be used and added to the page both as a regular DNN Module as well as a DNN Skin Object. Once you install Menu Box you will get few default Menu Templates out of the box. To enable one of those templates just navigate to module settings and click on "Set as Default" by the template you like. That simple click could change your menu color, style or even orientation.

So, how is it different from other dotnetnuke menu modules that provide the end user with a set of predefined styles? Well, first of all our module is extendable. You can easily create a custom Menu Template and upload it to Menu Box or you can modify one of default templates. Creating templates for Menu Box is the easiest thing ever.

How to create your own theme?

If you are simple user who doesn't want to deal with HTML, CSS and Javascript but still wants to customize the portal menu, than you just need to use an instrument that we have built just for you - the Menu Factory. Menu Factory is a service that allows visual editing of Menu Templates online. You can play with colors, styles, fonts, etc of the Menu Template online without touching the code. Once you are satisfied with resulting style you can compile it in one package and install in Menu Box as a Menu Template.

Using Menu Factory is fun and easy:

1. Choose the Menu Template you would like to modify
2. Modify the style of the template: change the font, colors, border, size, pattern background, etc.
3. Click on "Download". Menu Factory will "pack" a new Menu Template for you.
4. Upload your very own Menu Template to the Menu Box.

If you are web designer and know a bit of CSS, Javascript and HTML, than you should not have any difficulties creating a custom Menu Template from scratch. Menu Template consists of:

1. HTML skeleton
2. Javascrip files
3. CSS files
4. Icon picture for the theme (menu thumbnail)
5. Settings file skin.xml

This structure is not predefined. You can stick to your own one.

1. HTML skeleton is defined with help of two files:
   WrapperTemplate.ascx defines structure of menu container (in other words, wrapper around menu).
   NodeTemplate.ascx defines the menu item structure - the rules how the node will be rendered.
   
2. Javascrip files. Scripts will be included to the theme.
3. CSS files. Stylesheets will be included to the theme.
4. Icon picture for the theme (menu thumbnail), will be shown in Admin Panel of MenuBox.
5. Settings file skin.xml which will connect all described elements. skin.xml contains 4 main elements:
   
   
   • Theme name definition, description, thumbnail picture and other main settings.
   • HTML structure renderer definition
     
     
     
   • Included JS files
     
     
     
   • Included CSS files
     
     
     
   • Optional: CSS theme template and default values for theme. Needed if the theme is going to be included into MenuFactory.

You also might take a look at "How to create your own theme" tutorial where we explain in details how to create a theme from scratch.