DNN Community Blog

Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact community@dnnsoftware.com.


Navigating the DotNetNuke 6.0 Waters

The History of Menus

NavigateWhen DotNetNuke was first launched back in 2002, website navigation was just beginning to undergo a major shift.  At the time most sites still used a relatively static navigation structure with very little interactivity beyond a few simple hover animations and hyperlinks.  In fact, the original navigation structure for DotNetNuke was only a single level deep.  Over the course of the following 3 years things progressed very rapidly.  Sites began borrowing UI elements from desktop applications in order to provide users with a more familiar look and feel. 

In 2003, DotNetNuke explored a number of navigation options and finally settled on a menu control provided by a developer from a company up in Naperville, Illinois.  Solutions Partner Inc., was home to Jon Henning, an experienced JavaScript and .Net developer who had crafted his own menu control that was completely customizable using JavaScript, CSS and .Net.  The Solpart menu was highly configurable and provided designers with the ability to fully integrate the navigation structure into the overall site design.  If you have ever seen a DotNetNuke 1.x website, you would realize what a major advance this was.

After being invited to the core team Jon continued his work with JavaScript and the menu, ultimately replacing it with the new DNN Menu which relied heavily on the ClientAPI framework that Jon had created for DotNetNuke.  The new menu provided cutting edge functionality like Populate On Demand and drove the development of a core navigation provider framework.  The navigation provider framework made it easy for websites to swap out menu implementations with very little effort.  Once again, Jon’s work kept DotNetNuke at the forefront of web trends, allowing us to have a solid AJAX framework well before the competing solutions like MS AJAX or jQuery.


Over the last couple of years, new web trends have begun to emerge and it is time once again for DotNetNuke to make a change in order to stay current.  In 2009, Sitepoint predicted that Mega Menus would soon take over the web world.  I don’t think it happened as quickly as originally predicted, but ultimately, the mega menu has won the day with more and more websites following this trend.  Mega menus provide significant usability improvements over the standard drop down style menu, so it should come as no surprise that this style of menu is being requested by more and more designers and their customers.

Unfortunately, over the last couple of years Jon Henning has had to devote more and more time to his work with a new client, a little known company called RedBox.  In 2010, DotNetNuke.com was updated to include a new mega-menu based on the Telerik RAD Menu.  We heard lots of great feedback about the menu: mostly from people who wanted to know how they could incorporate mega-menus in their own sites.  The solution we used with RAD Menu was not one that was easily reproducible, so we set out to find a way to provide this feature in the core platform.

We investigated all of our options: modifying the core DNN Menu, building a wrapper around the RAD Menu or finding a way to include a third party menu component inside DotNetNuke, much as we had done with the original Solpart menu.  After a lot of evaluation we had narrowed the list down to 2 finalists whose solutions were both well respected in the DotNetNuke community.  Both of the finalists had great menus.  They were lightweight, highly configurable and provided the ability to create mega-menus out of the box.  Ultimately though, the final winner was chosen because the entire solution was already licensed under an MIT License and they readily agreed to contribute the code to the core.  This means that there is no worry about the license changing at any point in the future, jeopardizing the ability of community members to continue using the menu as they saw fit.

The New Menu

DominionI am happy to announce that starting with DotNetNuke 6.0, DDR Menu will be the new core menu provider in DotNetNuke.  Mark Allan has done a superb job of crafting a very powerful, yet lightweight menu that takes advantage of the core navigation provider.  In fact the solution is so powerful that it takes just a couple of minor configuration changes to an existing DotNetNuke skin to use the new menu.  Whether your skin uses Solpart menu, or DNN Menu, there is a simple upgrade path that allows you to continue using your existing styles.

The real power of DDR Menu is not in its ability to use existing Solpart or DNN Menu styles, it is in the core templating engine that allows you to use almost any menu style that you could want.  In the 1.0 product, Mark had included the ability to use XSLT to transform the raw XML menu data into whatever html structure you wanted.  The only limitation was your understanding of how to bend XSLT to your will and make it spit out the HTML that you desired.  Do you like table based menus, write a template to emit tables.  Do you prefer the clean, semantic html of an unordered list, then that is completely possible as well.  In fact, Mark had already provided templates for a half a dozen popular menu styles including Solpart, DNN Menu, Suckerfish, Artisteerfish, Accordians and even a mega-menu.


With the 2.0 version of the menu, which is the version that will ship with DotNetNuke 6.0, Mark is taking templating to a whole new level.  With this new version, you will be able to use the XSLT based templates, as well as new template processing engines for token based templates and Razor script based templates.  With all of these templating options, there is no style of menu that will be off-limits to DotNetNuke designers.  Any navigation structure that uses HTML, JavaScript and CSS (or any subset thereof), can be built using DDR Menu.  In evaluating DDR Menu, I spent less than a day to understand the menu and write a new template necessary to render the mega menu shown below.  The template is completely re-usable and can be used as is in any DotNetNuke 6.0 website.  The template can also be customized if desired and packaged inside your own skins.


DotNetNuke 6.0 will also be making another change to our menu structure.  Instead of displaying Admin and Host menus in the normal menu structure, we will be using the new mega-menu feature to show the admin and host options in the control panel.  Often site designs can only accommodate a limited number of top level menu elements.  Taking additional space for the admin and host menus reduces the number of menus available to normal site navigation.  The new layout will allow designers to accommodate more designs while ensuring that the Admin and Host menus are always accessible to users in a standard location.


I am really looking forward to many of the new UI changes coming in DotNetNuke 6.0.  The new DDR Menu will play a key role in the new look and feel coming in the next release.  I am especially looking forward to seeing how designers will take advantage of this new feature.  Finally I would like to congratulate Mark.  His work on DDR menu is amazing and I can’t wait to play with the new Razor based templating.


Comment Form

Only registered users may post comments.


September 2014 (11)
August 2014 (25)
July 2014 (17)
June 2014 (10)
May 2014 (6)
April 2014 (9)
March 2014 (3)
February 2014 (4)
January 2014 (8)
December 2013 (5)
November 2013 (2)
October 2013 (9)
September 2013 (10)
August 2013 (8)
July 2013 (4)
June 2013 (8)
May 2013 (13)
April 2013 (2)
March 2013 (7)
February 2013 (7)
January 2013 (10)
December 2012 (6)
November 2012 (20)
October 2012 (12)
September 2012 (27)
August 2012 (29)
July 2012 (22)
June 2012 (17)
May 2012 (23)
April 2012 (24)
March 2012 (27)
February 2012 (21)
January 2012 (12)
December 2011 (18)
November 2011 (20)
October 2011 (27)
September 2011 (17)
August 2011 (18)
July 2011 (45)
June 2011 (22)
May 2011 (23)
April 2011 (19)
March 2011 (36)
February 2011 (19)
January 2011 (22)
December 2010 (29)
November 2010 (37)
October 2010 (32)
September 2010 (43)
August 2010 (46)
July 2010 (37)
June 2010 (46)
May 2010 (29)
April 2010 (38)
March 2010 (27)
February 2010 (33)
January 2010 (34)
December 2009 (13)
November 2009 (20)
October 2009 (29)
September 2009 (18)
August 2009 (29)
July 2009 (19)
June 2009 (18)
May 2009 (23)
April 2009 (16)
March 2009 (13)
February 2009 (20)
January 2009 (25)
December 2008 (25)
November 2008 (29)
October 2008 (34)
September 2008 (33)
August 2008 (36)
July 2008 (31)
June 2008 (25)
May 2008 (26)
April 2008 (33)
March 2008 (31)
February 2008 (24)
January 2008 (18)
December 2007 (27)
November 2007 (51)
October 2007 (24)
September 2007 (32)
August 2007 (24)
July 2007 (20)
June 2007 (28)
May 2007 (27)
April 2007 (24)
March 2007 (47)
February 2007 (21)
January 2007 (41)
December 2006 (21)
November 2006 (16)
October 2006 (24)
September 2006 (36)
August 2006 (30)
July 2006 (31)
June 2006 (37)
May 2006 (13)
April 2006 (13)
March 2006 (18)
February 2006 (20)
January 2006 (13)
December 2005 (6)
November 2005 (15)
October 2005 (15)
September 2005 (16)
August 2005 (7)
April 2005 (1)
March 2004 (4)
February 2004 (6)
January 2004 (1)
November 2003 (4)
October 2003 (22)
September 2003 (22)
August 2003 (15)
July 2003 (14)

Copyright 2014 by DNN Corp | Terms of Use | Privacy | Design by Parker Moore Design