Prashant's Blog: Using JQuery to dynamically change dnn menu

Dotnetnuke released a new dotnetnuke menu provider some time back, and also released dotnetnuke 5.0 with inbuilt support of JQuery. When I started learning about new things in dotnetnuke 5.0, I wonder how we can use JQuery and new menu provider feature to dynamically change the menu. This leads me to a very basic simple implementation which I will share with all of you here.

So let's start building the sample right away:

Right click on Admin/Skins folder and add a new web control(C#), let's name it SwitchMenu.ascx

Go to code behind view and add this:


protected void Page_Load(object sender, EventArgs e)
{
        DotNetNuke.Framework.jQuery.RequestRegistration();
}

Go to design view and add following:


<a href="javascript:void(0)" id="lnkNavy">Navy</a>  <a href="javascript:void(0)" id="lnkBlue" >Blue</a>  <a href="javascript:void(0)" id="lnkOrange" >Orange</a>
<script language="javascript" type="text/javascript">
 jQuery(document).ready(function() { 
    
     jQuery('#lnkNavy').click(function(e) { 
        
            if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
                jQuery('#menu').removeClass('menu_bg_blue');
                jQuery('#menu').addClass('menu_bg_navy');               
            }   
            else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
                jQuery('#menu').removeClass('menu_bg_orange');
                jQuery('#menu').addClass('menu_bg_navy');             
            }
         });
          jQuery('#lnkBlue').click(function(e) { 
           
            if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
                jQuery('#menu').addClass('menu_bg_blue');
                jQuery('#menu').removeClass('menu_bg_navy');               
            }   
            else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
                jQuery('#menu').addClass('menu_bg_blue');
                jQuery('#menu').removeClass('menu_bg_orange');               
            }
         });
         jQuery('#lnkOrange').click(function(e) { 
           
            if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
                jQuery('#menu').addClass('menu_bg_orange');
                jQuery('#menu').removeClass('menu_bg_navy');               
            }   
            else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
            {
                jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
                jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
                jQuery('#menu').addClass('menu_bg_orange');
                jQuery('#menu').removeClass('menu_bg_navy');               
            }
         });
    });
</script>

Go to your sample skin page and register the new skin object


<%@ Register TagPrefix="PA" TagName="SWITCHMENU" Src="~/Portals/_default/Skins/Planet Aviator_0_1_0/SwitchMenu.ascx" %>

Now, let's add DNN Navigation control to the skin. Add this:


<dnn:NAV runat="server" ID="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false"
            ControlOrientation="Horizontal" CSSControl="dnnBlueMenu">
        </dnn:NAV>

Let's add css for all the dynamic menu now:


.menu_bg_blue {background-color:Blue;}
.menu_bg_navy {background-color:Navy;}
.menu_bg_orange {background-color:orange;}
/*----------------------------------------------------------------------*/
/* menu container css */
.dnnBlueMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
.dnnBlueMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
.dnnBlueMenu_left                  {}
.dnnBlueMenu_right                 {}

/* root menu css */
.dnnBlueMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Blue}

/* general submenu css */
.dnnBlueMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
.dnnBlueMenu .hov, .dnnBlueMenu .bc   {}
.dnnBlueMenu .m .mi                {background-color: Blue;}
.dnnBlueMenu .m .icn               {padding-left: 5px; width: 20px;}
.dnnBlueMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
.dnnBlueMenu .m .sel, .dnnBlueMenu .m .bc {}
.dnnBlueMenu .m .hov               {background-color:gray;}

/* glossy rounded corners */
.dnnBlueMenu .m .first             {height: 30px;}
.dnnBlueMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
.dnnBlueMenu .m .first.hov         {height: 30px;}
.dnnBlueMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/

.dnnBlueMenu .m .first.last        {height: 32px;}
.dnnBlueMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
.dnnBlueMenu .m .first.last.hov    {height: 32px;}
.dnnBlueMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

.dnnBlueMenu .m .last              {height: 26px;}
.dnnBlueMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
.dnnBlueMenu .m .last.hov          {height: 26px;}
.dnnBlueMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/

.m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
/*----------------------------------------------------------------------*/
/* menu container css */
.dnnOrangeMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px;}
.dnnOrangeMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
.dnnOrangeMenu_left                  {}
.dnnOrangeMenu_right                 {}

/* root menu css */
.dnnOrangeMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: Black;background-color:orange}

/* general submenu css */
.dnnOrangeMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
.dnnOrangeMenu .hov, .dnnBlueMenu .bc   {}
.dnnOrangeMenu .m .mi                {color: Black;background-color:orange}
.dnnOrangeMenu .m .icn               {padding-left: 5px; width: 20px;}
.dnnOrangeMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
.dnnOrangeMenu .m .sel, .dnnBlueMenu .m .bc {}
.dnnOrangeMenu .m .hov               {background-color:gray;}

/* glossy rounded corners */
.dnnOrangeMenu .m .first             {height: 30px;}
.dnnOrangeMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
.dnnOrangeMenu .m .first.hov         {height: 30px;}
.dnnOrangeMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/

.dnnOrangeMenu .m .first.last        {height: 32px;}
.dnnOrangeMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
.dnnOrangeMenu .m .first.last.hov    {height: 32px;}
.dnnOrangeMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

.dnnOrangeMenu .m .last              {height: 26px;}
.dnnOrangeMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
.dnnOrangeMenu .m .last.hov          {height: 26px;}
.dnnOrangeMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/

.m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
/*----------------------------------------------------------------------*/
/* menu container css */
.mainMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
.mainMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
.mainMenu_left                  {}
.mainMenu_right                 {}

/* root menu css */
.mainMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Navy}

/* general submenu css */
.mainMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
.mainMenu .hov, .dnnBlueMenu .bc   {}
.mainMenu .m .mi                {background-color: Navy;}
.mainMenu .m .icn               {padding-left: 5px; width: 20px;}
.mainMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
.mainMenu .m .sel, .dnnBlueMenu .m .bc {}
.mainMenu .m .hov               {background-color:gray;}

/* glossy rounded corners */
.mainMenu .m .first             {height: 30px;}
.mainMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
.mainMenu .m .first.hov         {height: 30px;}
.mainMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/

.mainMenu .m .first.last        {height: 32px;}
.mainMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
.mainMenu .m .first.last.hov    {height: 32px;}
.mainMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/

.mainMenu .m .last              {height: 26px;}
.mainMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
.mainMenu .m .last.hov          {height: 26px;}
.mainMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/

.m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */

Okie, that's it, now we are ready for the test. As simple as that...

Further Improvements:

Add some personalization so that we can save this setting for all users seperately.

As I'm new to both JQuery and Dotnetnuke 5.0, I would like to know what more we can improve here

4 comments:

AnonymousWednesday, May 13, 2009 10:48:00 PM
This is a cool article, but I was just wondering if you could add some screen shots. Thanks
Prashant LakhlaniThursday, May 14, 2009 10:12:00 AM
Thanks for the suggession, I'm adding a small nice video.
Jignesh PatelThursday, June 18, 2009 4:02:00 PM
Hello

I need to create vertical menu in left side.I also need to create dynamic.Means if i create a node and also delete a node.I need up to three level vertical menu.
AnonymousWednesday, October 07, 2009 4:41:00 PM
Can we hide the tab on some conditions from menu control

Please add your valuable comments about this post if it helped you. Thanks

Wednesday, May 13, 2009

Using JQuery to dynamically change dnn menu

4 comments:

Popular Posts