CS Tab/Menu Customization: How to use custom images and determine the current page to load the correct images?

I wanted to know if any of the experienced CS users/MVPs out there could help with this topic as it would seem it would come up in skinning quite a bit.  How do you swap out the default tab/top-navigation with another menu? 

If the navigation did not need to determine which tab that the user is currently on, e.g. channel9, then the menu would be much easier to drop in.  However, I would like to use a menu that gives a graphical indication to the user of the current page that they are on.

You can find the code for the menu mouseovers at: http://www.jonathangill.org/CSMenuHelp/how_to_create_custom_menu.htm
You may download the files and the HTML page above at: http://www.jonathangill.org/CSMenuHelp/CSMenuHelpBase.zip 

You should be able to implement this type of menu by customizing the web/themes/[theme name]/skins/skin-repeaterbar.ascx file. 

Only the permitted menu items are rendered by this skin file (so the Control Panel link will not be included automatically) and it has sample inline code to show you how to determine if a tab is selected.

In CS2007, the navigation bar is implemented (in the default theme) in the web/themes/default/common/master.master file using the <CSControl:NavigationList /> control.  This control binds CSLinks, so you can use CSLink-based conditional controls (see the default implemenation for examples).

This menu is not nice.

Vietnam travel

Hey Ben... Sorry - am a bit confused - how would you change the CSLinks control?

podpi:

how would you change the CSLinks control?

It depends on how you want the navigation list to look.  The default theme uses the following control structure in the master.master file:

<CSControl:NavigationList runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <CSControl:CSLinkData runat="server" Tag="Li" LinkCssClass="Selected" LinkTo="Link" Property="Text">
            <DisplayConditions><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
        </CSControl:CSLinkData>
        <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text">
            <DisplayConditions Operator="Not"><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
        </CSControl:CSLinkData>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</CSControl:NavigationList>

this shows how the selected item is highlighted (via <DisplayConditions>, the <CSControl:CSLinkPropertyValueComparison /> control, and variations on the LinkCssClass).  These same options can be modified to support any desired markup.

Is there specific markup that you'd like to render?  If so, I could provide a specific example.

Ben,

I'm trying to solve a very similar problem. Since you so graciously offered to provide a specific example based on the markup required, I'm hoping you can help me out. I need to render tabs in the manner similar to the example used here.

EDIT: The forum won't let me post the code without screwing it up, so you'll have to look at the example for the tab code.

It doesn't seem like you can provide a string format to the CSLinkData control to specify a custom render format. A property like that would be EXTREMELY useful.

Thanks!

This should do it...

<CSControl:NavigationList runat="server">
    <HeaderTemplate><ul class="box"></HeaderTemplate>
    <ItemTemplate>
        <CSControl:CSLinkData runat="server" Tag="Li" ContainerId="active" LinkTo="Link" Property="Text" Text="{0}&lt;span class=&quot;tab-l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tab-r&quot;&gt;&lt;/span&gt;">
            <DisplayConditions><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
        </CSControl:CSLinkData>
        <CSControl:CSLinkData runat="server" Tag="Li" LinkTo="Link" Property="Text" Text="{0}&lt;span class=&quot;tab-l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tab-r&quot;&gt;&lt;/span&gt;">
            <DisplayConditions Operator="Not"><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
        </CSControl:CSLinkData>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</CSControl:NavigationList>

Note the use of the Text property on CSLinkData.  Text properties are processed as format strings when a Property is also defined, so the text of the tab will be placed in the {0} place holder.  The encoded markup in the Text property will render as unencoded HTML (it must be encoded to specify it within the Text property, however).

Hey Ben,

That code was awesome, thanks so much for youe help. I have a new dilemma for you. How would you handle this?

    <ul>
     <li><a href="" id="main-menu1" title=""><b>Home</b></a></li>
     <li><a href="" id="main-menu2" title=""><b>Portfolio</b></a></li>
     <li><a href="" id="main-menu3" title=""><b>About</b></a></li>
     <li><a href="" id="main-menu4" title=""><b>Contact</b></a></li>
    </ul>

I need to be able to specify the ID of the hyperlink, not of the LI. Any thoughts? Thanks man!

interscape:

I need to be able to specify the ID of the hyperlink, not of the LI. Any thoughts? Thanks man!

Ideally, the CSS or script that references the hyperlinks by ID would be modified to either use a class name or use the ID of the LI.

Alternatively, the output of the control can be customized using ASP.Net databinding syntax:

<CSControl:CSLinkData runat="server">
  <ContentTemplate>
    <li><a href="<%# Eval("NavigateUrl") %>" id="main-menu1" title="<%# Eval("Text") %>"><b><%# Eval("Text") %></b></a></li>
  </ContentTemplate>
</CSControl:CSLinkData>