For one of my projects, the client has requested a 'tab' look to their navigation. I hadn't yet attempted this with Nav 2.0 so I setup a temp installation to give it a shot. I followed some of the video tutorials from DNN Creative and have gotten the appearance correct (Active and non-active tabs) but the on-click behavior just looks bad...
I setup the right and left "sides" of the tab to be the Right and Left separators via the SeparatorRightHTML and SeparatorLeftHTML and the 'active' separators via the SeparatorLeftHTMLActive and SeparatorRightHTMLActive properties
The CSS is:
.NavSepLeft {
background: #fff url("images/NavSepLeft.gif") no-repeat;
padding: 0 10px 25px 0;
float: left;
}
.NavSepRight {
background: #fff url("images/NavSepRight.gif") no-repeat;
padding: 0 0 25px 10px;
float: left;
}
.NavSepLeftActive {
background: #34006d url("images/NavSepLeftActive.gif") no-repeat;
padding: 0 10px 25px 0;
float: left;
}
.NavSepRightActive {
background: #34006d url("images/NavSepRightActive.gif") no-repeat;
padding: 0 0 25px 10px;
float: left;
}
.MainNav {
font-family: Arial, sans-serif;
}
.MainNav .root {
float: left;
}
.MainNav .root .txt {
background: #34006d url("images/NavItemBG.gif") repeat-x;
float: left;
padding-top:3px;
padding-bottom:3px;
}
.MainNav .sel .txt {
background: #34006d url("images/NavItemBGActive.gif") repeat-x;
float: left;
padding-top:3px;
padding-bottom:3px;
color:#0f0;
}
and a sample of the behavior can be seen at: http://tctc.netdocsdev.com - when you click the tabs, there is a 'pause' between the Menu Item and the separators. Any thoughts?
Edit: yes, it looks like a Benetton explosion, but it's a development skin I use that helps me 'see' the different DIVs, spans, etc... this is not for production.