<asp:Menu ID="Menu1" runat="server"></asp:Menu>

El control menú tiene ciertas propiedades que nos permiten adaptar a nuestro gusto y necesidad. Por default el control menú es un control vertical. Para nuestra página vamos a necesitar que sea horizontal.

Orientation="Horizontal"
Orientation="Vertical"

Todo menú debe tener ítems que nos sirvan de acceso a las diferentes partes del sitio.

<Items></Items>

Dentro de los tags ítems debemos detallar los MenuItems que necesitamos.

<asp:MenuItem></asp:MenuItem>

Los menús se comportan en relación a una estructura de árboles normalmente organizados en diferentes niveles de una jerarquía. La primera rama es el root del menú y las siguientes son los sub menúes.

<asp:MenuItem>
<asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem>
<asp:MenuItem />
<asp:MenuItem />
<asp:MenuItem />
</asp:MenuItem>
</asp:MenuItem>

Vamos a armar un menú con tres opciones para nuestro sitio web y lo vamos a incluir en nuestra master page.

<asp:Menu ID="Menu1" runat="server" />
<Items>
<asp:MenuItem NavigateUrl="~/Menu1.aspx" Text="Menu1" Value="1"/>
<asp:MenuItem NavigateUrl="~/Menu2.aspx" Text="Menu2" Value="2"/>
<asp:MenuItem NavigateUrl="~/Menu3.aspx" Text="Menu3" Value="3"/>   
</Items>
</asp:Menu>

ASP.NET permite agregarle estilo al control mediante determinadas propiedades del tab MENU.

BackColor="#B5C7DE"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="0.8em"
ForeColor="#284E98"
StaticSubMenuIndent="10px"

Estilos para las acciones:

<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />

Nuestro menú y formato se ve de esta forma

Orientation="Vertical"


Orientation="Vertical"

Capítulos del Tutorial