巧用自定義Menu控件實作Tab效果

public class MenuTab: System.Web.UI.WebControls.Menu

    {

        public override void RenderBeginTag(HtmlTextWriter writer)

        {

            StringBuilder sb = new StringBuilder("<style type=/"text/css/">");

            if (this.Orientation == Orientation.Horizontal)

            {

                sb.Append(@"

                ." + this.ClientID + @"1

                {

                    border-style:solid;

                    border-bottom-width:" + MenuBorderWidth.ToString() + @"px;

                    border-left-width:0px;

                    border-right-width:0px;

                    border-top-width:0px;

                }

                ." + this.ClientID + @"2

                {

                    border-style:solid;

                    border-bottom-width:0px;

                    border-left-width:" + MenuBorderWidth.ToString() + @"px;

                    border-right-width:" + MenuBorderWidth.ToString() + @"px;

                    border-top-width:" + MenuBorderWidth.ToString() + @"px;

                }");

            }

            else

            {

                sb.Append(@"

                ." + this.ClientID + @"1

                {

                    border-style:solid;

                    border-bottom-width:0px;

                    border-left-width:0px;

                    border-right-width:" + MenuBorderWidth.ToString() + @"px;

                    border-top-width:0px;

                }

                ." + this.ClientID + @"2

                {

                    border-style:solid;

                    border-bottom-width:" + MenuBorderWidth.ToString() + @"px;

                    border-left-width:" + MenuBorderWidth.ToString() + @"px;

                    border-right-width:0px;

                    border-top-width:" + MenuBorderWidth.ToString() + @"px;

                }");

            }

            sb.Append("</style>");

            writer.Write(sb.ToString());

            base.RenderBeginTag(writer);

        }

        [Description("BorderWidth"), Browsable(true), Bindable(false), DefaultValue(1)]

        public byte MenuBorderWidth

        {

            get

            {

                if (ViewState[this.ID + "MenuBorderWidth"] == null)

                {

                    return 1;

                }

                return (byte)ViewState[this.ID + "MenuBorderWidth"];

            }

            set

            {

                ViewState[this.ID + "MenuBorderWidth"] = value;

            }

        }

        protected override void OnPreRender(EventArgs e)

        {

            if (this.LevelMenuItemStyles.Count > 0)

            {

                this.LevelMenuItemStyles[0].ItemSpacing = 0;

                this.LevelMenuItemStyles[0].CssClass = this.ClientID + "1";

            }

            if (this.LevelSelectedStyles.Count > 0)

                this.LevelSelectedStyles[0].CssClass = this.ClientID + "2";

            base.OnPreRender(e);

        }

    }

aspx中

<cc1:MenuTab ID="Menu1" runat="server" Orientation="Horizontal" MenuBorderWidth="1"

        >

        <LevelSelectedStyles>

            <asp:MenuItemStyle Font-Overline="False"

                Font-Underline="False" HorizontalPadding="5px"

                ItemSpacing="0px" VerticalPadding="0px" BackColor="Red"

                ForeColor="White" />

        </LevelSelectedStyles>

        <LevelMenuItemStyles>

            <asp:MenuItemStyle Font-Underline="False" HorizontalPadding="0px"

                ItemSpacing="0px" VerticalPadding="0px" Width="80px" BorderColor="Red"

                />

        </LevelMenuItemStyles>

        <Items>

            <asp:MenuItem Text="&amp;nbsp;" Value="&amp;nbsp;"></asp:MenuItem>

            <asp:MenuItem Text="建立項1" Value="1"></asp:MenuItem>

            <asp:MenuItem Text="建立項2" Value="建立項2"></asp:MenuItem>

            <asp:MenuItem Text="建立項22" Value="建立項22" Selected="True"></asp:MenuItem>

            <asp:MenuItem Text="建立項3" Value="建立項3"></asp:MenuItem>

            <asp:MenuItem Text="建立項4" Value="建立項4"></asp:MenuItem>

            <asp:MenuItem Text="&amp;nbsp;&amp;nbsp;" Value="&amp;nbsp;&amp;nbsp;">

            </asp:MenuItem>

        </Items>

    </cc1:MenuTab>