How to use the classes 'first' and 'last' in templates

Hello John,

Is it possible to use the classes 'first' and 'last' in a template? An instance of the CSSNavmenu not based on a template is generating these classes and I wonder if this is also possible using a template-file.

Thanks again,

Best regards,

Pascal

Hi John,

Did you have any luck with this, I now need to remove a left border from the first menu item in just the main menu?

Thanks,

Lee

Yes, the templates have a way to check for first and last child.

Just like the IIF({Tab.IsActive}='True' check that is in the sample templates, you can also use IIF({Tab.IsFirstChild}='True' and IIF({Tab.IsLastChild}='True'

Great thanks, - I have now starting experimenting with templates so that I can add the above check in. - Before adding the check I am just trying to get a template to output exactly the same as when you select the 'hover' nav type.

I took the suckerfish template and slightly changed it to:

(file attached)

The problem I am having is that some of the menu items are disappearing, the structure is as follows


Home
    Submenu 1
        SubSubmenu
    Submenu 2


When I hover over the Home page only Submenu 2 displays, the submenu1 and SuSubmenu do not display.

The menu works fine if the menu is set to use 'Hover' nav type - How can I get this template to work in exactly the same way as the hover type?

My CSS code is also below:

#nav, #nav ul
{
    /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    color: #fff;
    width: auto;
    background: url(images/Menubar_Main_Highlight.gif) no-repeat -1000px -1000px;
}

#nav a
{
    /* width: 10em; */ /* override link styling for menu */
    display: block;
    border-left: 1px solid #b6a2a2;
    border-right: 1px solid #331f1f;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 4px 8px 3px 8px;
}

#nav li
{
    /* all list items */
    float: left;
    width: auto; /* width needed or else Opera goes nuts */
    list-style: none;
}

#nav li ul
{
    /* second-level lists */
    position: absolute;
    width: 109px;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    display: block;
    margin: 0;
    padding: 0;
}

/* styles each individual submenu item */
#nav li ul a
{
    border: 0;
    border: 0px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #2e2e2e;
    display: block;
    width: 109px;
    padding: 3px 3px 3px 4px;
    background: orange url(images/Subnav_Background.gif) repeat;
}

#nav li ul ul
{
    /* third-and-above-level lists */
    margin: -1.8em 0 0 10em;
}

/* hover for main menu */
#nav li a:hover
{
    background: #29599f url(images/Menubar_Main_Highlight.gif) repeat-x;
    color: #fff;
}

/* hover for sub menus and reset width of hover */
#nav li ul a:hover
{
    background: #29599f url(images/SubNav_Background_Highlight.gif) repeat-y center;
    color: #fff;
    width: 109px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul,
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,
#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul
{
    /* lists nested under hovered list items */
    left: auto;
}

/* remove bold from selected menu item */
#nav .SelectedTab
{
    font-weight: normal;
}

wow, somehow I had managed to lose the revised CSS code where I had changed the sf classes to ie classes. - So, the css is now using iehover and the code in the template also specifies iehover. The menu now hovers in IE6.

But I still have the same problem, The hover works, but it doesn't display submenu1 or the subsubmenu - it just displays submenu2 (This happens in all browsers)

Changing those values just re-positions the hover menu, but I still only have submenu2 displaying. - What is odd is that this CSS code worked fine using the 'hover' menu type, the problem only occurs when I have switched to this template.

the 2 different source codes from my dnn installs are attached, thanks

Hi John,

No I didn't get it to work after several hours of playing with it.  So I referred back to the original hover method which works without any problems and I then targeted the first menu item by the Tabs Nav ID

Thanks,

Hello john,

I'v tried to make the IfFirstChild statement work, but it only put's out False. here is my code:

[NavMenu-Container[

So only "notfirst" is printed on the page, the rest works great. Could you me out here?

Thank,

Best regards, Thomas de Wit

Hi Tresken,

You may have an older version of the menu. Send me an e-mail by replying directly to the notification of this post, or by clicking on my username here in the forums, and I'll send you the latest.

Hi John,

I'v reply'd to the notification mail, so you should have my email. According to my colleague we have version 3.1.2 , wich should be one of the latetst versions if i'm correct.

Regards, Thomas