The formatting of ASP.Net MenuItems is not cascading down to the child items

I am facing a challenge while building an ASP.Net 4.5 menu programmatically in C#. The main issue is that the formatting of the child items is not inheriting from the top menu items as expected. Specifically, I am struggling with two formatting aspects: StaticEnableDefaultPopOutImage and ItemSpacing. The former controls whether a little arrow shows up next to the MenuItem, and the latter determines the spacing between items. While the StaticEnableDefaultPopOutImage is set to false for the top menu items and works correctly, it fails to apply to the child items (resulting in the arrow showing up). Similarly, the ItemSpacing is set to 75px for the top menu items but does not space out the child items properly. The structure of the menu is defined in a Master Page. Here is an example of the menu code in the Master:

<asp:Menu runat="server" CssClass="bgcell_top_nav" ID="menuMain" Orientation="Horizontal" RenderingMode="Table" StaticEnableDefaultPopOutImage="false" Width="100%" ItemWrap="false" Height="250" DynamicVerticalOffset="8" StaticDisplayLevels="1">
    <StaticMenuItemStyle ItemSpacing="75px" />
</asp:Menu>

Here's a snippet of the code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //top menu items
        MenuItem ApplicationFunctionality = new MenuItem();
        ApplicationFunctionality.Text = "Applications";
        ApplicationFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
        this.menuMain.Items.Add(ApplicationFunctionality);
        MenuItem DatabaseFunctionality = new MenuItem();
        DatabaseFunctionality.Text = "Databases";
        DatabaseFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
        this.menuMain.Items.Add(DatabaseFunctionality);

        //sub menu items
        MenuItem Application_Add = new MenuItem();
        Application_Add.Text = "Add";
        ApplicationFunctionality.ChildItems.Add(Application_Add);
        MenuItem Application_Search = new MenuItem();
        Application_Search.Text = "Search";
        ApplicationFunctionality.ChildItems.Add(Application_Search);
        MenuItem Application_Reports = new MenuItem();
        Application_Reports.Text = "Reports";
        ApplicationFunctionality.ChildItems.Add(Application_Reports);

        MenuItem CreateInternalApplication = new MenuItem();
        CreateInternalApplication.Text = "Internal";
        CreateInternalApplication.NavigateUrl = "~/TemplateForms/ApplicationCreationTemplateForm.aspx";
        Application_Add.ChildItems.Add(CreateInternalApplication);
        MenuItem CreateExternalApplication = new MenuItem();
        CreateExternalApplication.Text = "External";
        Application_Add.ChildItems.Add(CreateExternalApplication);
    }
}

I have also attached a screenshot for reference: [Screenshot Link](https://i.sstatic.net/o32dt.png)

Any suggestions on how to properly format the child items in the menu would be greatly appreciated.

Answer №1

Eliminating arrow icons:

An issue arises with

StaticEnableDefaultPopOutImage="false"
as it only affects static menu levels, not dynamic ones like the two additional levels in your current setup. To rectify this, consider including
DynamicEnableDefaultPopOutImage="false"
.

Introducing spacing:

To introduce spacing to dynamic levels, you could implement:

<DynamicMenuItemStyle ItemSpacing="75px" />

Implementing custom styles:

Alternatively, you can apply custom styles to individual menu levels for more precise control over appearance. Define style classes for menu item levels using LevelMenuItemStyles. For example, below are custom styles added for the first 3 menu item levels:

<asp:Menu runat="server" CssClass="bgcell_top_nav" 
        ID="menuMain" Orientation="Horizontal" RenderingMode="Table"
        StaticEnableDefaultPopOutImage="false" Width="100%"
        ItemWrap="false" Height="250" DynamicVerticalOffset="8"
        StaticDisplayLevels="1">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="menuItemLevel1"/>
        <asp:MenuItemStyle CssClass="menuItemLevel2"/>
        <asp:MenuItemStyle CssClass="menuItemLevel3" />
    </LevelMenuItemStyles> 
</asp:Menu>

This setup allows you to tailor the style of each menu level, such as:

.menuItemLevel2{
    margin-left:7px;
}
.menuItemLevel3{
    margin-left:12px;
}

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

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

Troubleshooting problem with printing iframes on Firefox

When attempting to print an iframe with a large amount of data using the code below, I'm encountering an issue in Firefox where only the first page is printed. The rest of the pages are not being included in the printout. window.frames[frameID]. ...

Splitting up website content dynamically across various pages

I am interested in developing a webpage that showcases different versions of my code in a tabular format, arranged in reverse chronological order. An example of how I want it to look is provided below. Number Release Date End Date Requires ...

Is it possible to simultaneously center and display an iframe inline?

I have a YouTube video that I'm trying to center within a div. After adding display: block; to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe ...

How to print a file with the .aspx extension in an Asp.net

While attempting to print the contents of an HTML DIV using the provided code, everything worked smoothly. However, upon integrating an Ajax Control into an Aspx page, an error message surfaced: "Extender control 'CalendarExtender2' is not a r ...

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

Is there a way to convert any object into a string for serialization?

I'm facing an issue where my JSON serializer is causing random failure due to the appearance of the character < at times. I'm struggling to identify the source of this issue and I am interested in potentially re-serializing using a different m ...

What is the best way to showcase a variable from a switch statement on my ASP.NET web page?

Looking to format the month from a datetime object as text in this style: 01 Dec 2011 A switch statement was set up to determine the month and assign it to a variable for display on index.aspx. However, the code doesn't seem to be functioning as e ...

The div's height is being disrupted by the accordion

Currently, I am facing an issue with the accordion component in Angular and ng-bootstrap. The problem arises when I place an accordion within a div that has a specified max-height. The accordion extends beyond this height limit, whereas I would like it to ...

Role in HTML/CSS

I'm currently facing an issue with getting my footer to stick to the bottom of the page. In Internet Explorer, it appears centered under the rest of the content instead of at the very bottom. When I try to view it in Chrome, it ends up positioned next ...

ReSharper now providing C# 3.0 Code Inspection Alerts for .NET 2.0 Projects

I've noticed that when I'm working on .NET 2.0 projects using the latest version of ReSharper (4.1), I keep receiving warnings about using the var keyword and lambdas. Is there a way to disable these warnings specifically for .NET 2.0 projects? ...

What is the best way to implement an async Task<string> method that returns a string, and then how can I assign a delegate to this method in a constructor and execute it at a later time?

Within my codebase, there exists a method that returns "string": public string SendResponse(HttpListenerRequest request) { string result = ""; string key = request.QueryString.GetKey(0); if (key == "cmd") { // logic for different q ...

Issue with jQuery animation: Background color does not change upon scrolling

Here is my fiddle link: https://jsfiddle.net/jzhang172/owkqmtcc/5/ I am attempting to change the background color of the "content" div when scrolling anywhere within it. The goal is for the background color to change when scrolling and revert back to its ...

Challenges in customizing the bootstrap navigation bar links

Having an issue with the bootstrap navbar link displaying on small devices. Here is the template I'm using: https://i.sstatic.net/jSy1b.png The last item is displaying in two lines. ...

Running Stored Procedures in ASP.NET MVC using LINQ

As a beginner in ASP.NET, I have a query regarding executing a stored procedure on a server. Currently, with the ASP.NET MVC framework, I am able to retrieve data from a table successfully as shown below: Controller: public JsonResult GetLaptopsJson() { ...

Email-based login in FormsAuthentication Causes Redirect Failure

In my asp.net/c# app, I am utilizing MembershipProvider and FormsAuthentication to authenticate users against Active Directory. Upon successful verification, a cookie is created and the user is redirected back to their original page. The authentication pr ...

additional dark border streak

When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...

Make an element in jQuery draggable but always within the viewport

My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container. To better illustrate my problem, you can view a demo on Fid ...

The JavaScript linked list causes the program to come to a halt

I am currently working on developing a simple web page embedded program using JavaScript. One of the tasks I am tackling involves creating a linked list of all active buttons displayed on the screen at any given time. However, I have encountered an issue w ...