HOME » Asp.Net Menu Skins Gallery - Asp.Net Menu Skins Gallery.

Asp.Net Menu Skins Gallery

If you use the standard asp.net menu control, here are some skin examples that you can use in your asp.net website:
 

Menu #1

in .skin file add:
<asp:Menu runat="server" SkinId="HeaderMenuSkin"
  BackColor="#3F93DB" DynamicHorizontalOffset="2" Font-Names="Calibri"
  Font-Size="16px" Font-Bold="true" ForeColor="#FFFFFF" StaticSubMenuIndent="10px">
    <StaticSelectedStyle BackColor="#C9E26A" />
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
    <DynamicHoverStyle BackColor="#C9E26A" ForeColor="White" />
    <DynamicMenuStyle BackColor="#C9E26A" BorderStyle="Solid" BorderWidth="1px" BorderColor="#80B877" />
    <DynamicSelectedStyle BackColor="#FFCC66" />
    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
    <StaticHoverStyle BackColor="#C1DF59" ForeColor="White" />
</asp:Menu>
 
in .css file add:
#menu {background-color:#3F93DB; border:solid 1px #80B877;}
 
in .aspx file add:
<div id="menu">
 <asp:Menu ID="_mainMenu" runat="server" Orientation="Horizontal" SkinID="HeaderMenuSkin">
    <Items>
       <asp:MenuItem Text="Menu Item">
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       </asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
    </Items>
 </asp:Menu>
</div>
Asp.Net Menu Skin 1


Menu #2

in .skin file add:
<asp:Menu runat="server" SkinId="HeaderMenuSkin"
BackColor="#FEC41A" DynamicHorizontalOffset="2" Font-Names="Calibri"
Font-Size="16px" Font-Bold="true" ForeColor="#FFFFFF" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#C9E26A" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#FEDB00" ForeColor="White" />
<DynamicMenuStyle BackColor="#FEDB00" BorderStyle="Solid" BorderWidth="1px" BorderColor="#E3145C" />
<DynamicSelectedStyle BackColor="#FEDB00" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#E3145C" ForeColor="White" />
</asp:Menu>
 
in .css file add:
#menu {background-color:#FEC41A; border:solid 1px #E9510E;}
 
in .aspx file add:
<div id="menu">
 <asp:Menu ID="_mainMenu" runat="server" Orientation="Horizontal" SkinID="HeaderMenuSkin">
    <Items>
       <asp:MenuItem Text="Menu Item">
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       </asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
    </Items>
 </asp:Menu>
</div>
Asp.Net Menu Skin 2


Menu #3

in .skin file add:
<asp:Menu runat="server" SkinId="HeaderMenuSkin"
BackColor="#4F86BC" DynamicHorizontalOffset="2" Font-Names="Calibri"
Font-Size="16px" Font-Bold="true" ForeColor="#FFFFFF" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#A5C8E8" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#A5C8E8" ForeColor="White" />
<DynamicMenuStyle BackColor="#A5C8E8" BorderStyle="Solid" BorderWidth="1px" BorderColor="#4F86BC" />
<DynamicSelectedStyle BackColor="#A5C8E8" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#477BAD" ForeColor="White" />
</asp:Menu>
 
in .css file add:
#menu {background-color:#4F86BC; border:solid 1px #A5C8E8;}
 
in .aspx file add:
<div id="menu">
 <asp:Menu ID="_mainMenu" runat="server" Orientation="Horizontal" SkinID="HeaderMenuSkin">
    <Items>
       <asp:MenuItem Text="Menu Item">
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       </asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
    </Items>
 </asp:Menu>
</div>
Asp.Net Menu Skin 3


Menu #4

in .skin file add:
<asp:Menu runat="server" SkinId="HeaderMenuSkin"
BackColor="#C64983" DynamicHorizontalOffset="2" Font-Names="Calibri"
Font-Size="16px" Font-Bold="true" ForeColor="#FFFFFF" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#E8C2D9" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#E8C2D9" ForeColor="White" />
<DynamicMenuStyle BackColor="#E8C2D9" BorderStyle="Solid" BorderWidth="1px" BorderColor="#A359AE" />
<DynamicSelectedStyle BackColor="#A5C8E8" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#C8649A" ForeColor="White" />
</asp:Menu>
 
in .css file add:
#menu {background-color:#C64983; border:solid 1px #A359AE;}
 
in .aspx file add:
<div id="menu">
 <asp:Menu ID="_mainMenu" runat="server" Orientation="Horizontal" SkinID="HeaderMenuSkin">
    <Items>
       <asp:MenuItem Text="Menu Item">
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       </asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
    </Items>
 </asp:Menu>
</div>
Asp.Net Menu Skin 4


Menu #5

in .skin file add:
<asp:Menu runat="server" SkinId="HeaderMenuSkin"
BackColor="#A0522C" DynamicHorizontalOffset="2" Font-Names="Calibri"
Font-Size="16px" Font-Bold="true" ForeColor="#EEE2D4" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#E8C2D9" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#B78177" ForeColor="White" />
<DynamicMenuStyle BackColor="#B78177" BorderStyle="Solid" BorderWidth="1px" BorderColor="#5D3F30" />
<DynamicSelectedStyle BackColor="#A5C8E8" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#EEE2D4" ForeColor="#A0522C" />
</asp:Menu>
 
in .css file add:
#menu {background-color:#A0522C; border:solid 1px #5D3F30;}
 
in .aspx file add:
<div id="menu">
 <asp:Menu ID="_mainMenu" runat="server" Orientation="Horizontal" SkinID="HeaderMenuSkin">
    <Items>
       <asp:MenuItem Text="Menu Item">
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
           <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       </asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
       <asp:MenuItem Text="Menu Item"></asp:MenuItem>
    </Items>
 </asp:Menu>
</div>
Asp.Net Menu Skin 5