多層Menu的實現。這只是一個小技巧而已。
效果
如效果圖一。
實現
使用asp.Menu。
主要就是替換StaticPopOutImage,它默認是頂角向左的三角符號。在此自定義一個圖片,讓其頂角向下。
(1)設置StaticPopOutImageUrl="~/xia.gif"
(2)添加Item
完整代碼
<asp:Menu ID="Menu2" runat="server" StaticPopOutImageUrl="~/xia.gif" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="部門" Value="部門">
<asp:MenuItem Text="董事長室" NavigateUrl="http://www.baidu.com" Target="_blank"></asp:MenuItem>
<asp:MenuItem Text="總經理室" NavigateUrl="http://www.163.com"></asp:MenuItem>
<asp:MenuItem Text="財務" NavigateUrl="http://www.qq.com">
<asp:MenuItem Text="財務01" NavigateUrl="http://mail.qq.com"></asp:MenuItem>
<asp:MenuItem Text="財務02" NavigateUrl="http://webqq.com"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
</Items>
<LevelSubMenuStyles>
<asp:SubMenuStyle BorderColor="Silver" BorderStyle="Solid" BorderWidth="2px" Font-Underline="False" />
</LevelSubMenuStyles>
<StaticMenuStyle BorderColor="#FF8080" BorderStyle="Solid" BorderWidth="1px" />
<StaticMenuItemStyle BorderColor="#FFC0C0" BorderStyle="Solid" BorderWidth="1px" />
</asp:Menu>