Is CSSNav the right solution for this type of design?

I'm working on recreating the layout from http://www.mcusa.org in DNN.  One of the challenges I've run into is creating the tabs in different colors - can CSSNav handle this?

The other item I'm looking for is handling dynamic submenus on the actual sub pages.  If you click on the "About MC" link, you'll notice that all of the sub pages are listed on a menu on the right column - can CSSNav handle this type of menu as well?

I'm trying to build all of this as dynamically as possible so that it can handle future additions/removals of pages gracefully.  Am I dreaming or is this doable with DNN and is CSSNav the right product to help in this endeavor?

Thanks,

Brian

Ok, I saw the following post that explains the side menu question I had (at least it looks like the same thing):

http://www.snapsis.com/Support/tabid/601/forumid/7/postid/11627/view/topic/Default.aspx

So, my only question at this point would be how to set a different color for each tab?

Thanks,
Brian

Slowly but surely, I'm getting this figured out.  I used the individual tab ID's to add style elements to my CSS for each tab that I want a different color:

/* Home Tab */
#navParent-240 a {
    background:url(tabs/tab-silver-right.gif) no-repeat right top;
}
#navParent-258 li {
    background:url(tabs/tab-silver-left.gif) no-repeat left top;
}

/* About Us Tab */
#navParent-258 a {
    background:url(tabs/tab-red-right.gif) no-repeat right top;
}
#navParent-258 li {
    background:url(tabs/tab-red-left.gif) no-repeat left top;
}

The only problem with this is that the "a" tags are working properly (showing the right colored tabs) while the "li" tags do not seem to be picking it up (still show the default colored tab).  Anyone have any suggestions?

Hi Brian,
What you are doing should work.
Do you have padding on your LI rules so that they open up wide enough to show the left part of the image?

John,

Thanks for the reply.  Yes, the padding is set and it does show the default silver-colored tab that I've set up, it just does not override that tag with the colored versions for those defined in the CSS.  To clarify a bit further, here is the "default" code as well.  They are in this order in the CSS as well, so I would assume it would override earlier properties with the later ones (at least that's the way it's working for the "a" tag right-side images):

#navParent a {
    font-weight:normal;    
    float:left;
    display:block;
    text-align:center;
    white-space: nowrap;
    text-align: center;
    padding:7px 10px 3px 2px;
    text-decoration:none;
    color:#FFFFFF;
    background:url(tabs/tab-right.gif) no-repeat right top;
}

#navParent a:hover,
#navParent li.hover a
 {
    text-decoration:none;
    background-position:100% -150px;
    padding: 3px 10px 7px 2px;
}

#navParent li {
    background:url(tabs/tab-left.gif) no-repeat left top;
    border-bottom: #999999 1px solid;
}

/* Home Tab */
#navParent-240 a {
    background:url(tabs/tab-silver-right.gif) no-repeat right top;
}
#navParent-240 li {
    background:url(tabs/tab-silver-left.gif) no-repeat left top;
}

/* About Us Tab */
#navParent-258 a {
    background:url(tabs/tab-red-right.gif) no-repeat right top;
}
#navParent-258 li {
    background:url(tabs/tab-red-left.gif) no-repeat left top;
}

Check carefully that the ID is correct, but that should work.

Are you using FireBug for FireFox? It really helps to find problems like this.

John,

Using FireBug, here is the HTML from the page, the ID is correct:

[script removed]
I found the issue, however... I needed th change the CSS tag from "#navParent-258 li" to "li#navParent-258" since it was the ID of the "li" instead of the "li" existing within a tag with the tab ID.  FireBug helped me track that down, thanks for the recommendation!

Really cool menu on mcusa.org!

I've just bought Snapsis CSS NavMenu Dev-edition, and I would really like to know what it will take to make the 'hover effect' above the Logo- and Search-part of the page.

Will I have to include the Logo and Search into my Template?

Regards,
Nill

I'm not sure what it would take to incorporate the bars at the top, I have not decided if I'm going to worry about that or not (if I do, it'll come after I've got the rest of the site moved over).

On another note, right now I create my classes for the menu based upon the ID tags available.  However, I'd like to keep the class for all sub-pages the same as the top parent page - is there a way handle that situation?  Basically, what I'd like to do is have all of the "About MC" sub pages (and their subs) to have the red theme, all of the "Ministries" sub pages to have the green, etc.  Any suggestions anyone?

To have a class in the sub pages that are "connected" to the parent I would put a class attribute in the child tabs that use a part of the parent information.  Something like:

class="subOf-{Page.Parent.Id}" or class="subOf-{Page.Parent.PageName}"

Then in the CSS you could use:

.subOf-36 {background:red;}

or

.subOf-Ministries {background:red;}