Tips for customizing font color in asp:menu sourced from sitemap

I'm trying to change the font color of an asp:menu that reads items from a sitemap. I've tried using a ccsClass but it didn't work! Here is my code: 

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"  
StaticDisplayLevels="2" CssClass="MyMenu"  
StaticSubMenuIndent="18px"   
DynamicMenuItemStyle-BackColor="#C0C0BC"  
DynamicHoverStyle-BackColor="#B3B3B3"  
StaticHoverStyle-BackColor="#666666"  
StaticHoverStyle-ForeColor="#d9d9d6"  
StaticMenuItemStyle-VerticalPadding="1px" StaticPopOutImageUrl="~/Images/control_rewind_blue.png" >

This is my ccsClass:

.MyMenu{color:White; font-family:Tahoma; font-size:medium;}

Thank you!

asp.netcssaspmenu

Answer №1

To enhance your design, you have the option to include color using forecolor properties and also apply different styles

 <asp:Menu ID="Menu1" ForeColor="#003399" style="left: 40px; position: relative; top: 6px" runat="server" DataSourceID="SiteMapDataSource1"  
        StaticDisplayLevels="2" CssClass="MyMenu"  
        StaticSubMenuIndent="18px"   
        DynamicMenuItemStyle-BackColor="#C0C0BC"  
        DynamicHoverStyle-BackColor="#B3B3B3"  
        StaticHoverStyle-BackColor="#666666"  
        StaticHoverStyle-ForeColor="#d9d9d6"  
        StaticMenuItemStyle-VerticalPadding="1px" StaticPopOutImageUrl="~/Images/control_rewind_blue.png" >

Answer №2

To create a custom class for each operation on asp:Menu, follow this example:

<asp:Menu ID="AspMenu" runat="server">

<StaticMenuStyle CssClass="VerticalMenuli" />
<StaticMenuItemStyle CssClass="VerticalMenuItem" />
<StaticHoverStyle CssClass="VerticalMenuHover" /> 
<StaticSelectedStyle CssClass="VerticalMenuSelectedItem" />

<DynamicMenuStyle CssClass="VerticalMenuSubMenu" />     
<DynamicMenuItemStyle CssClass="VerticalMenuSubMenuItem" />
<DynamicHoverStyle CssClass="VerticalSubMenuHover" /> 
<DynamicSelectedStyle CssClass="SubMenuSelected"/>

You can now apply styling to any sub menu or link using the defined class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering dynamically created controls within a repeater using JQuery

Struggling to locate textbox values within my repeater control. Upon button click, I need to retrieve the textbox value associated with the specific button that was clicked. Here is an example: Textbox1 ----> should be linked to Button1 TextBox2 ----& ...

c#javascriptjqueryasp.net

Navigating the world of identifier management between bounded contexts in DDD

I am seeking clarification on the management of identifiers for entities within Domain-Driven Design (DDD). Consider a scenario where we have a Product model. This model may hold different meanings in various contexts such as Sales, Shipping, and Inventor ...

c#asp.netdomain-driven-designbounded-contexts

Can we find a method to incorporate multicolored borders?

I currently have a td element with the following CSS styling: td { border-bottom: 3px solid aqua; } I want to be able to click on these cells and change their color, similar to the images linked below: https://i.sstatic.net/5DscU.png Is there a way ...

javascripthtmlcsshtml-table

Error: The Microsoft JScript runtime has encountered an issue where the object 'JSON' is not defined

Every time I try to run my project in IE 9, it keeps throwing me this error: Microsoft JScript runtime error: 'JSON' is undefined I've already checked out various online solutions but none of them seem to work for me. Interestingly, my p ...

asp.netajax

Guide on how to download Visual Basic 2008

Feeling exhausted from constantly downloading Visual Studio, I decided to try my hand at downloading VB.Net instead. However, I found myself feeling quite confused about the relationship between VB.Net, Asp.Net, and .Net. Are they interconnected in some ...

asp.net.netvb.netvisual-studio-2008

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

javascriptcssreactjsmaterial-ui

An error was encountered with the SignalR hub Context.ConnectionId object reference

After exploring multiple tutorials on SignalR and sending targeted messages to clients, I encountered the following issue: Error: An object reference is required for the non-static field, method, or property 'HubBase.Context' Code: public c ...

c#asp.netasp.net-mvcsignalrsignalr-hub

Position the text of an h1 element next to its corresponding image in HTML5

I'm attempting to create a HEADER element with an H1 tag alongside a logo image. Here is the code snippet: Company name However, the issue is that "Some title" is not displaying correctly as it appears b ...

javascriptcsshtmlseo

Is there a way to shift text upward while it is contained within a span element inside a list item?

In my code, I have the following setup: <li> <a class="dw"><span>Design Goals</span></a> </li> .dw { background-image: url(/Content/images/icons/fugue/document-globe.png); } However, when I check this in my browser ...

htmlcss

The navigation div seems to be floating outside the normal flow of the document, and I'm completely puzzled

Let me illustrate the issue at hand. The black box/div covering the body text of the page is actually my website's main navigation (although with a light blue text color, it may be difficult to notice). Ideally, it should be positioned to the left of ...

htmlcssposition

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

Conceal content with transparent layer

Recently, I've been working on an animation where the logo is unveiled as a div moves downward. The div itself has a transparent background. I'm curious if it's feasible to hide parts of the logo behind the transparent div? <div class=" ...

htmlcss

receiving the sudden message: "The provided string does not match the format required for an email address"

For a period of time, everything was working fine as I successfully sent some emails to myself. However, when I attempted to run the code later on, it suddenly stopped functioning. This code is being implemented in a code behind file of an ASP.NET page w ...

c#asp.netiissendmail

Proper alignment of multiple elements with Bootstrap

I am currently incorporating Bootstrap panels into my project, and I have a design mockup that looks like this: https://i.sstatic.net/pHArl.png The Profile text and progress bar need to be aligned to the left, while the collapse icon should be aligned to ...

htmlcsstwitter-bootstrap

Intermittent issue with div background switching feature on Firefox

There's a div where background images are changed using a script. I've simplified everything here: Sometimes, in Firefox, an error occurs about 10% of the time that looks like this: https://i.sstatic.net/JvSfx.png Everything seems to work fine i ...

javascriptjqueryhtmlcss

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

javascripthtmlcssbootstrap-4

Centering buttons in Bootstrap 3

Check out this example below: Sample I'm attempting to align Button 1 all the way to the left and Buttons 2 and 3 all the way to the right. Is there a more optimal method for achieving this alignment without using offsets? ...

csstwitter-bootstrap-3

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Is there a way for me to customize the clickable region of my checkbox?

I'm facing a formatting issue in my Angular application that I need help with. The problem lies in the clickable area around my checkboxes, as shown in the images linked below. https://i.sstatic.net/MoLYZ.png https://i.sstatic.net/2VT5x.png What I a ...

htmlcssangular

Safari and Internet Explorer 9 prioritizing min-height over height in rendering

For testing a website, I am using Safari 5.0.5 and IE9 on Windows. Within the CSS file, the following code is present: #contentarea { background-image:url('../images/img.jpg'); background-repeat: no-repeat; background-position: right to ...

jqueryhtmlcss