Dave Burke : Online Community and Social Business Specialist

CS Nuglet: Centering a variable item Navigation Menu by role

This is a pretty simplistic nuglet, but I went about my business for two days living with a non-centered navigation menu until this simple fix presented itself.  The issue is one most of us encounter: Anonymous users see 4 menu items in their Navigation List, Registered Users see 5.  This is usually not an issue unless we need to center it on the page.

CSS-wise we use an Outer Div at 100% width, then place the Navigation List in an Inner Div of a set width using auto margins.  The problem is specifying the width of the inner Div because we don't have a set number of menu items.

The solution is adding the Inner Div based on role, like so.

 

<CSControl:ConditionalContent ID="ConditionalContent1" runat="server">
    <ContentConditions>
        <CSControl:UserPropertyValueComparison
            ID="UserPropertyValueComparison1" runat="server"
            UseAccessingUser="true" ComparisonProperty="IsAnonymous"
            Operator="IsSetOrTrue" />
    </ContentConditions>
    <TrueContentTemplate>
           <div class="InnerAnonymous">
    </TrueContentTemplate>
    <FalseContentTemplate>
            <div class="InnerRegistered">
    </FalseContentTemplate>
</CSControl:ConditionalContent>
<CSControl:NavigationList ID="NavigationList1" runat="server" Level="0"
    Theme="drive" Property="navigationItems"
    RenderChildrenInContextMenu="false">
    ....

Comments (0) | Post RSS RSS comment feed

Posted on 1/21/2009 7:37:57 PM by Dave Burke
Categories: Community Server
Tags:

Related posts


Powered by BlogEngine.NET 2.0.0.36
Theme by Dave Burke

Copyright © 2013 Dave Burke.  All Rights reserved.