MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

menupart in custom navigation.ascx  (Mono Support )

Viewed 43402 time(s), 14 post(s) 8/26/2011 12:49:23 AMby VanDemon

Related topics

VanDemon

VanDemon

8/26/2011 12:49:23 AM
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?
This content has not been rated yet. 
141 Reputation 20 Total posts
VanDemon

VanDemon

8/26/2011 4:00:30 AM
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?
This content has not been rated yet. 
141 Reputation 20 Total posts
imarusic

imarusic

8/26/2011 7:56:02 AM
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.
This content has not been rated yet. 
3016 Reputation 428 Total posts
denis

denis

8/26/2011 8:19:31 AM
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.
This content has not been rated yet. 
7207 Reputation 956 Total posts
shawndg

shawndg

8/26/2011 1:28:34 PM
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" />

This content has not been rated yet. 
1871 Reputation 252 Total posts
VanDemon

VanDemon

8/29/2011 2:30:15 AM
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)
This content has not been rated yet. 
141 Reputation 20 Total posts
khorvat

khorvat

8/29/2011 11:17:54 AM
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
This content has not been rated yet. 
15993 Reputation 2214 Total posts
VanDemon

VanDemon

8/30/2011 3:09:11 AM
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/
This content has not been rated yet. 
141 Reputation 20 Total posts
khorvat

khorvat

8/30/2011 9:55:12 AM
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
Rated 5.00, 1 vote(s). 
15993 Reputation 2214 Total posts
VanDemon

VanDemon

8/30/2011 11:02:20 PM
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.
This content has not been rated yet. 
141 Reputation 20 Total posts
1 2