Where is the horizontal menu styles controlled at?

Home ›

ASP.NET Forums » Starter Kits and Source Projects » Small Business Starter Kit » Where is the horizontal menu styles controlled at?

Shortcuts

Previous Next

Where is the horizontal menu styles controlled at?

Last post 05-03-2009 2:35 AM by Hyacinth Broadchest. 2 replies.

Sort Posts:

Where is the horizontal menu styles controlled at?

03-25-2009, 1:49 PM

Contact

1 point Member
smejus57
Member since 04-21-2008, 1:03 PM
Posts 13

Where are the CSS styles for the horizontals navigation at the top (and bottom) controlled? I want to change the color of the text.

Re: Where is the horizontal menu styles controlled at?

03-26-2009, 7:32 AM

Contact

15,187 point All-Star
yasserzaid
Member since 09-22-2007, 9:10 PM
Egypt
Posts 2,573

try this Example :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu3.aspx.cs" Inherits="menu3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .staticMenuItem
        {
            color:White;

            border:solid 1px black;
            padding:2px 4px;
        }
        .menuHover
        {
            color:#ffcc00;
            background-color:blue;
        }
        .dmenuHover
        {
            color:blue;
            background-color:#ff9900;
        }
        .dynamicMenuItem
        {
            color:black;
            background-color:#FF6600;
            padding:2px 4px;
        }
        .dynamicMenu
        {
            background-color: #ffcc00;
            border:Solid 1px black;
            filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;
        }
    </style>

     <style type="text/css">
        .staticMenuItem
        {
            color:White;

            border:solid 1px black;
            padding:2px 4px;
        }
        .menuHover
        {
            color:#ffcc00;
            background-color:red;
        }
        .dmenuHover
        {
            color:blue;
            background-color:#ff9900;
        }
        .dynamicMenuItem
        {
            color:black;
            /*background-color:#FF6600;*/
            padding:2px 4px;
        }
        .dynamicMenu
        {
            /*the background color for the dynamic menus both "popout" and non is covered by the
            DynamicMenuStyle-BackColor="#FF6600" in the <asp:Menu> tag*/
            /*background-color: #ffcc00;*/
            /*background-color: green;*/
            border:Solid 1px black;
            filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;
        }


    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Menu
        id="Menu1" Visible="false"
        StaticMenuItemStyle-CssClass="staticMenuItem"
        StaticHoverStyle-CssClass="menuHover"
        DynamicHoverStyle-CssClass="menuHover"
        DynamicMenuItemStyle-CssClass="dynamicMenuItem"
        DynamicMenuStyle-CssClass="dynamicMenu"
        Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600" DataSourceID="SiteMapDataSource1">

        <StaticMenuItemStyle CssClass="staticMenuItem" />
        <DynamicHoverStyle CssClass="menuHover" />
        <DynamicMenuStyle CssClass="dynamicMenu" BackColor="#FF6600" />
        <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
        <StaticHoverStyle CssClass="menuHover" />
    </asp:Menu>

    <br />
    <asp:Menu
        id="Menu2" DataSourceID="SiteMapDataSource1"
        StaticMenuItemStyle-CssClass="staticMenuItem"
        StaticHoverStyle-CssClass="menuHover"
        DynamicHoverStyle-CssClass="menuHover"
        DynamicMenuItemStyle-CssClass="dynamicMenuItem"
        DynamicMenuStyle-CssClass="dynamicMenu"
        Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600">

        <StaticMenuItemStyle CssClass="staticMenuItem" />
        <DynamicHoverStyle CssClass="menuHover" />
        <DynamicMenuStyle CssClass="dynamicMenu" BackColor="#FF6600" />
        <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
        <StaticHoverStyle CssClass="menuHover" />
    </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        <br />
        <br />

</div>
</form>
</body>
</html>

Good Luck

Yasser Zaid

Re: Where is the horizontal menu styles controlled at?

05-03-2009, 2:35 AM

Contact

52 point Member
Hyacinth Broadchest
Member since 04-10-2009, 11:28 PM
Posts 34

The top nav is a series of links in a div called nav-main.

So look in the style-sheet for this bit:

#nav-main a:link,
#nav-main a:visited {
	color:#FFFFFF;
	text-decoration:none;
}

#nav-main a:hover {
	color:#D4E7F8;
	text-decoration:underline;
}

#nav-main a:active {
	color:#FFFFFF;
}

As you can see, it is possible to have diferent colours for active, hover and visited links within that div.

They have done it this way so as not to override settings on other links outside of the nav-main div.

Page 1 of 1 (3 items)

RSS Available