Mono Support menupart in custom navigation.ascx 

Viewed 73939 time(s), 14 post(s), 8/26/2011 12:49:23 AM - by VanDemon
8/26/2011 12:49:23 AM
141 Reputation 20 Total posts

ok so I've created my template, everything works perfect.

how do i create a place holder to drop the menu web part into my navigation.ascx file?

what should the navigation.ascx code look like?

1
8/26/2011 4:00:30 AM
141 Reputation 20 Total posts

ok to fix this instead of copying the code to my navigation.ascx i just copied and registered the MonoXMenu.ascx page instead and it works fine. except....

it's not in place and i can't find the css or styling options for it.

the manual refers to a location /MonoX/Templates/RadControls/Menu which doesn't exist?

2
8/26/2011 7:56:02 AM
3016 Reputation 428 Total posts

Hi VanDemon,

Can you please post a screenshot of that page? Did you create a page template? If you want to use built in MonoX web parts you should add web part zones to your page. You can get more information about web part zones in user manuals at 7.1 Anatomy of MonoX page.

Regards.

3
8/26/2011 8:19:31 AM
7207 Reputation 956 Total posts

Hi,
As for your first question, you need to insert a PortalWebPartZone or PortalWebPartZoneTableless (which will be the recommended implementation in all future versions) into your page.

<portal:PortalWebPartZoneTableless ID="leftWebPartZone" runat="server" Width="100%" ChromeTemplateFile="Standard.htm">
     <ZoneTemplate>
         ...your controls...
 

This control acts as a container for all Web parts that needs to have interactive personalization capabilities. Additionally, there will be a lot of improvements in this area in the next minor upgrade, including the improved drag and drop support for all browsers and better performance of Web part catalog that now includes more than 70 parts out of the box.
As for the menu part templating, the information contained in the manual is deprecated - this part is based on the Telerik RadEditor control, and they changed the templating mechanism in the newer versions. More information can be found here. Esentially, you will perform the templaing directly in the Web part ASCX instead of the separate template file (it is a very good idea to first inherit from the MonoX base menu part and than perform the customization, instead of working directly on the MonoX part which may be changed in the upgrade process).
You may also want to check MonoXMenuSimple.ascx, that is now used more frequently, as it uses a hierarchical repeater to produce a standard HTML menu based on <ul><li> elements and can also be customized in place.

4
8/26/2011 1:28:34 PM
1871 Reputation 252 Total posts

you can also hard code it and register the tag name..

something like this....

<%@ Register TagPrefix="MonoX" TagName="AddModule" Src="/MonoX/ModuleGallery/AdModule.ascx" %>

then you can pretty much use it anywhere in html like this..

<MonoX:AddModule runat="server" ID="monoAdRotator" UseSpanElementsInMenuItems="true" SelectedItemCssClass="selected" CacheDuration="600" />

5
8/29/2011 2:30:15 AM
141 Reputation 20 Total posts

I switched to MonoXMenuSimple.... seems easier except for a minor problem i'm having...

when i hover over the main menu item - the sub menu displays ok

http://imageshack.us/photo/my-images/508/screenshothover.png/

but when i hover over sub-menu the main-menu hover disappears.

http://imageshack.us/photo/my-images/836/screenshothover2.png/

(the upload module kept crashing)

6
8/29/2011 11:17:54 AM
15993 Reputation 2214 Total posts

Hi,

  because there are no CSS (not in version 2 or 3) parent selector implementation available it was a relatively complex to implement this functionality and in the end it requires the Javascript code. MonoX menu has this issue fixed in the MonoX version 4.5 and above. To fix the issue without the upgrade please follow the instructions below.

1. You need to add the code below to the MonoXMenuSimple.ascx

$(document).ready(function() {
    InitMonoXMenuSelectors();
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function(s, e) {
        InitMonoXMenuSelectors();
        });
    }
});
 
jQuery.MonoXMenu_GetParent = function(parent, level) {
    var resultParent = $(parent);
    var i = 0;
    while (i < level) {
        resultParent = resultParent.parent();
        i++;
    }
    return resultParent;
}
 
jQuery.MonoXMenu_SelectParent = function(parent) {
    $.MonoXMenu_GetParent(parent, 3).addClass('selected');
}
 
jQuery.MonoXMenu_DeselectParent = function(parent) {
    $.MonoXMenu_GetParent(parent, 3).removeClass('selected');
}
 
function InitMonoXMenuSelectors() {
    $(".navigation .level0 li a").hover(function() { $.MonoXMenu_SelectParent(this); }, function() { $.MonoXMenu_DeselectParent(this); });
    $(".navigation .level1 li a").hover(function() { $.MonoXMenu_SelectParent(this); $.MonoXMenu_SelectParent($.MonoXMenu_GetParent(this, 2)); }, function() { $.MonoXMenu_DeselectParent(this); $.MonoXMenu_DeselectParent($.MonoXMenu_GetParent(this, 2)); });
}

2. You need to add a few more lines to your Default.css file in the App_Theme you are using 

Find the line
.navigation .level0 li a:hover
And add replace it with the following
.navigation .level0 li.selected a,
.navigation .level0 li a:hover

Find the line
.navigation .level0 li a span:hover
And replace it with the following
.navigation .level0 li.selected a span,
.navigation .level0 li a span:hover

That should be it, please let us know if this solution works for you ?

BTW: We have tested the upload on our site and it is working as expected, can you please open a separate issue related to upload if it still isn't working for you ?

Regards

7
8/30/2011 3:09:11 AM
141 Reputation 20 Total posts

the main menu hover is working ok but the sub-sub-menu is having problems.

when i hover over the sub-menu the entire ul of sub-sub's apply the hover rather than individually when hovered....

http://imageshack.us/photo/my-images/4/screenshothover.png/

additionally, when i hover over a sub-sub - the entire next level are activated also....

(here i am hovering over calculators button )

http://imageshack.us/photo/my-images/14/screenshothover2.png/

8
8/30/2011 9:55:12 AM
15993 Reputation 2214 Total posts

Hi,

  let me start from the 3rd level menu items, to properly display them you need to add the following css to your theme:

.navigation .level2
{
    display:none;
    margin-top: -1px;
}
.navigation ul.level1 li:hover .level2
{
    display:block;
}

We need to rewrite the rest of the code we provided you with so now it looks like this:

CSS changes
.navigation .level0 li a.selected,
.navigation .level0 li a:hover
{      
    background: url(img/nav-sub-level.png) no-repeat top left !important;
    padding: 0px !important;
    margin: 0px 10px 0px 0px !important;
}
 
.navigation .level0 li a.selected span,
.navigation .level0 li a:hover span
{      
    background: url(img/nav-sub-level.png) no-repeat top right !important;
    margin: 0 -10px 0 10px !important;
    padding: 4px 0px 0px 0px !important;
    height: 22px !important;   
    width:180px;
}

jQuery changes
/* MonoX Simple Menu - Parent Selector implementation
NOTE: This javascript code is strongly tied to MonoXMenuSimple.ascx menu template */
 
$(document).ready(function() {
    InitMonoXMenuSelectors();
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function(s, e) {
        InitMonoXMenuSelectors();
        });
    }
});
 
jQuery.MonoXMenu_GetParent = function(parent, level) {
    var resultParent = $(parent);
    var i = 0;
    while (i < level) {
        resultParent = resultParent.parent();
        i++;
    }
    return resultParent;
}
 
jQuery.MonoXMenu_SelectTopLevel = function(parent) {
    $.MonoXMenu_GetParent(parent, 3).addClass('selected');
}
 
jQuery.MonoXMenu_DeselectTopLevel = function(parent) {
    $.MonoXMenu_GetParent(parent, 3).removeClass('selected');
}
 
jQuery.MonoXMenu_SelectOtherLevel = function(parent) {
    $($.MonoXMenu_GetParent(parent, 3).find('a')[0]).addClass('selected');
}
 
jQuery.MonoXMenu_DeselectOtherLevel = function(parent) {
    $($.MonoXMenu_GetParent(parent, 3).find('a')[0]).removeClass('selected');
}
 
function InitMonoXMenuSelectors() {
    $(".navigation .level0 li a").hover(function() { $.MonoXMenu_SelectTopLevel(this); }, function() { $.MonoXMenu_DeselectTopLevel(this); });
    $(".navigation .level1 li a").hover(
    function() {
        $.MonoXMenu_SelectTopLevel($.MonoXMenu_GetParent(this, 2));
        $.MonoXMenu_SelectOtherLevel(this);
    },
    function() {
        $.MonoXMenu_DeselectTopLevel($.MonoXMenu_GetParent(this, 2));
        $.MonoXMenu_DeselectOtherLevel(this);
    });
    $(".navigation .level2 li a").hover(
    function() {
        $.MonoXMenu_SelectTopLevel($.MonoXMenu_GetParent(this, 4));
        $.MonoXMenu_SelectOtherLevel($.MonoXMenu_GetParent(this, 2));
        $.MonoXMenu_SelectOtherLevel(this);
    },
    function() {
        $.MonoXMenu_DeselectTopLevel($.MonoXMenu_GetParent(this, 4));
        $.MonoXMenu_DeselectOtherLevel($.MonoXMenu_GetParent(this, 2));
        $.MonoXMenu_DeselectOtherLevel(this);
    });
}
 
//Note: Add the below code only if you are including this script to a page with the ScriptInclude
//DO NOT REMOVE - Note: Call the notifyScriptLoaded method in all file-based scripts (.js files) to indicate to the ScriptManager object that a referenced script has finished loading. - http://msdn.microsoft.com/en-us/library/bb310952(VS.90).aspx
try { if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded(); } catch (ex) { }

Please try the code above and get back to us.

Regards

9
8/30/2011 11:02:20 PM
141 Reputation 20 Total posts

resolved..... it's awesome. thanks!

http://imageshack.us/photo/my-images/220/screenshothover.png/

btw... the problem with upload is just my silverlight crashing.


thanks again.

10
1 2
This is a demo site for MonoX. Please visit Mono Software for more info.