Forums

Registration

Click here to register. Registration is required if you want to post to the forums.

If you register, we can also contact you with news on new module versions, and upgrades to new modules as we make them available. 

Use of your registration information is subject to our privacy policy.

Inventua Forums

Subject: Side Menu indetation with 'Show current Child
Prev Next
You are not authorized to post a reply.

Author Messages
rob nisbet
Posts:4

21 Jul 2011 3:55 PM  

Hi I'm using the side menu which is great.

However I have an indentation issue when I use "Show current sub-tree only"

If it's switched off I get :

Top Ancestor

    product 1

        sub product 1

    product 2

        sub product 2

    product 3

which is all good. If it's switched on It get

Top Ancestor

    product 1

product 2

    sub product 2

    product 3

as you can see, only product 2 is expanded which is great, however both product 2 and sub product 2 are offset to the left from where they should be. So 2's sub-products are at the same level as product 3 which is confusing! 

can anyone suggest a workaround or is this a known bug? My CSS is as below if that helps?

Many thanks, Rob

/* Inventura side menu CSS*/
/* SideMenu  */
 
.inventua_sidemenu{background-color: #4f4f4f;margin-left:-8px; margin-right:-6px;padding-bottom:10px;padding-top:5px;}/*sidebar background colour*/
 
/* SideMenu  */
.MenuHdr
{
  font-size: 8pt; padding-left: 10px;  padding-bottom: 2px;
   padding-top: 2px; cursor: default; /*text-transform:uppercase;font-weight: bold;*/
}
 
.MenuItem, .MenuItemMouseOver
{
  font-size: 8pt; font-weight: normal; padding-bottom: 1px;
  padding-top: 1px;
 }
.MenuHdr A, .MenuHdr A:Active, .MenuHdr A:Hover, .MenuHdr A:Visited, .MenuHdr A:Link
{
  text-decoration: none;  color: #D4D4D4; padding-top: 1px;
  padding-bottom: 1px; cursor: pointer; display: block; padding-left:10px;
}
.MenuHdr A:Hover {color:#F1F3F3;}/*v.light grey for hover*/
 
.MenuItem A, .MenuItem A:Active, .MenuItem A:Hover, .MenuItem A:Visited, .MenuItem A:Link,
.MenuItemMouseOver A, .MenuItemMouseOver A:Active, .MenuItemMouseOver A:Hover,
.MenuItemMouseOver A:Visited, .MenuItemMouseOver A:Link
{
  display: block;
  padding-left: 20px;
  padding-bottom: 1px;
  cursor: pointer;
  color: #D4D4D4;/* light grey for normal text*/
  padding-top: 1px;
  text-decoration: none; 
  width: 100%
}
 
.MenuItemMouseOver A, .MenuItemMouseOver A:Active, .MenuItemMouseOver A:Hover,.MenuItemMouseOver A:Visited, .MenuItemMouseOver A:Link
{color:#F1F3F3;}/*v.light grey for hover*/
 
.currentHeaderHighlight A, .currentHeaderHighlight A:Active, .currentHeaderHighlight A:Hover, .currentHeaderHighlight A:Visited, .currentHeaderHighlight A:Link {font-weight:bold;}
.currentItemHighlight A, .currentItemHighlight A:Ative, .currentItemHighlight A:Hover, .currentItemHighlight A:Visited, .currentItemHighlight A:Link {font-weight:bold;}

Anthony Glenwright
Posts:10683

21 Jul 2011 6:18 PM  
The way that the sidemenu works is that items without any "children" (based on whatever settings that you have selected) will be rendered with CSS class "MenuItem", and if they have "children" they are rendered as "MenuHdr". You can get around the CSS implications of that by ignoring these classes in your CSS, and instead use CSS something like:

.inventua_sidemenu TD A {...} /* level 1 */

.inventua_sidemenu TD TD A {...} /* level 2 */

.inventua_sidemenu TD TD TD A {...} /* level 3 */

Of course, you will need to decide for yourself whether to apply styling to the TD or the A (or both).
rob nisbet
Posts:4

22 Jul 2011 2:52 AM  

Hi Anthony, thanks for your reply ..

I'm struggling to understand what you suggest. Looking at the generated HTML the TD's are not nested (the table is just TR,TD for each row, no matter what level the menu row is at) so I can't see how what you suggest will work (and having tried it,I didnt see any effect but maybe I misunderstood).

Can you please elaborate on what you are suggesting. Your side menu on this site seems to indent as expected, can you perhaps show how you did that ? 

Many thanks

Rob

rob nisbet
Posts:4

22 Jul 2011 3:40 AM  

....and just to elaborate ... the below is the HTML I get. 1,2,3,4,5 all have Products as their parent, but for some reason 2,3,4 are drawn at the same level as 1child1 and 1child2. Then for no apparent reason 5 is drawn at the correct level. So this makes 2,3,4 look they are children of 1. Surely this is a bug, when there are multiple levels ? 

Many thanks

Rob

<tr>
<td onmouseover="selectmenuitem(this, true, 'Products', 'MenuHdr currentHeaderHighlight', 'MenuHdr currentHeaderHighlight'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Products" class="MenuHdr currentHeaderHighlight"><a href="http://localhost/Products.aspx">Productsa>td>
tr><tr>
<td onmouseover="selectmenuitem(this, true, 'One', 'MenuHdr', 'MenuHdr'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-One" class="MenuHdr"><a href="http://localhost/Products/One.aspx">Onea>td>
tr><tr>
<td onmouseover="selectmenuitem(this, true, 'One Child 1', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-OneChild1" class="MenuItem"><a href="http://localhost/Products/One/OneChild1.aspx">One Child 1a>td>
tr><tr>

<td onmouseover="selectmenuitem(this, true, 'One Child 2', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-OneChild2" class="MenuItem"><a href="http://localhost/Products/One/OneChild2.aspx">One Child 2a>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Two', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Two" class="MenuItem"><a href="http://localhost/Products/Two.aspx">Twoa>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Three', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Three" class="MenuItem"><a href="http://localhost/Products/Three.aspx">Threea>td> tr><tr> <td onmouseover="selectmenuitem(this, true, 'Four', 'MenuItem', 'MenuItemMouseOver'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Four" class="MenuItem"><a href="http://localhost/Products/Four.aspx">Foura>td>

tr><tr> <td onmouseover="selectmenuitem(this, true, 'Five', 'MenuHdr', 'MenuHdr'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Five" class="MenuHdr"><a href="http://localhost/Products/Five.aspx">Fivea>td>

Anthony Glenwright
Posts:10683

24 Jul 2011 6:57 PM  
From the output, I can see that the menu is being rendered as though "products one" was not a "child" of "products". Is it?

Also, can you check to see what version of sidemenu that you are running?
rob nisbet
Posts:4

25 Jul 2011 3:04 AM  

Hi Anthony, thanks for your reply - yes Products One is a child of Products. here is the Tabs table :

TabID TabName     ParentId    Level    TabPath
387      Products      NULL        0        //Products
642      One               387           1        //Products//One
580      One Child 1 642           2        //Products//One//OneChild1
694      One Child 2 642           2        //Products//One//OneChild2
718      Two               387           1        //Products//Two
717      Three            387           1        //Products//Three
634      Four              387           1        //Products//Four
529      Five               387           1        //Products//Five

So when the menu renders, One renders parallel to Products, even though it is a child. One's two children are indented from One OK, but then Two, Three, Four are all indented the same as One's children which is very confusing. Five is not indented, althoguh there is no reason that 2,3,4 should be any different from 5, they are all children of Products.

If I tick 'Show current sub-tree only' then Five gets indented the same (wrongly) as 2,3,4. That's why this makes no sense that 2,3,4 are treated differently to 5, and I suspect a code bug.

I've even tried this using different skins and example css from your site, but this always reproduces.

I've only recently downloaded v.5.0.2.

Many thanks for looking at this,  Rob

Anthony Glenwright
Posts:10683

25 Jul 2011 6:31 PM  
I have sent you an update via e-mail to try. Not sure what is causing your issue.
You are not authorized to post a reply.
Forums > Inventua Forums > DotNetNuke Modules/Components Support > Side Menu indetation with 'Show current Child



ActiveForums 3.7