asp2Menu學習

設計Menu的一些想法。
通過樣式增強交互性。
- 滑鼠懸停時，使用者可以很清楚知道，停留在那個地方可以做什麼操作。
例如，滑鼠懸停（Hover） Menu 上 字型加上底線，改變字體顏色和 Menu 的背景色。顯示 MenuItem 的 ToolTip。
- Menu 的項（MenuItem）被選中時，應醒目突出被選擇。
例如，改變字體的顏色，加粗等，改變 item 的背景色。

效率優先，兼顧性能。這年頭就投一個字——快。
- 使用asp:Menu
1，拖控件，選擇“靜態”。
2，創建樣式（CSS）：Menu 的 MenuItem 常規樣式和Menu 的 SelectedItem（被選中） 樣式。
/*
Menu 的 MenuItem 常規樣式
1. 只是沒有下邊框
*/
.normal_item_border
{
 border-top: solid 1px SteelBlue;
 border-right: solid 1px SteelBlue;
 border-bottom: 0;
 border-left: solid 1px SteelBlue;
}

/*
Menu 的 SelectedItem（被選中） 樣式
1. 只是沒有下邊框
*/
.selected_item_border
{
 border-top: solid 1px #FF8000;
 border-right: solid 1px #FF8000;
 border-bottom: 0;
 border-left: solid 1px #FF8000;
}

/*
Menu 區域樣式
1. 只有下邊框，即看起來是一條線。
*/
#menu
{
 border: 0;
 border-bottom: solid 1px #d4d0c8;
}
3，Menu 控制項的屬性設置。
（1）<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" BackColor="White" BorderColor="White"
                ForeColor="Black">
水平顯示；背景白色，配合item背景色，以空白表示分隔。
（2）<StaticSelectedStyle BackColor="#FFC080" Font-Bold="True" CssClass="selected_item_border" />
常規項目。設背景色和 css。
（3）<StaticMenuItemStyle BackColor="SkyBlue" HorizontalPadding="8px" ItemSpacing="1px"
                    VerticalPadding="2px" CssClass="normal_item_border" />
選中項目。設背景色和 css。Padding 和 Spacing 目的——看起來不沉悶，很明朗。
（4）<StaticHoverStyle Font-Underline="True" ForeColor="Navy" />
鼠標懸停。設置字型。提醒用戶可以對此項操作。
4，主要Code
            <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" BackColor="White" BorderColor="White"
                ForeColor="Black">
                <Items>
                    <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                    <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                    <asp:MenuItem Text="Help" Value="Help"></asp:MenuItem>
                    <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                </Items>
                <StaticSelectedStyle BackColor="#FFC080" Font-Bold="True" CssClass="selected_item_border" />
                <StaticMenuItemStyle BackColor="SkyBlue" HorizontalPadding="8px" ItemSpacing="1px"
                    VerticalPadding="2px" CssClass="normal_item_border" />
                <StaticHoverStyle Font-Underline="True" ForeColor="Navy" />
            </asp:Menu>