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
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:11798
 |
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:11798
 |
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.

' 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:11798
 |
25 Jul 2011 6:31 PM |
|
I have sent you an update via e-mail to try. Not sure what is causing your issue. |
|
|
|
|
|