When the page loads, the ASP menu should display the sub-menu items in a unique style

    <asp:SiteMapDataSource runat="server" ID="RelativeSiteMapDataSource" StartFromCurrentNode="False"
    ShowStartingNode="False" SiteMapProvider="CatalogSiteMap" />

<asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDisplayLevels="2" 
    Orientation="Vertical" DataSourceID="RelativeSiteMapDataSource"   />

In several of my ASPX pages, the code above is present.

I am looking to display all sub-menu items when the page loads with an indentation that reflects the menu hierarchy. Currently, the code only opens a sub-menu when its parent menu item is clicked (for example, clicking on Products shows its sub-menu).

Note: I can't attach an image as I'm new here, but I've described how I want the menu to look below.

Products

  • Instock
  • Out-of-Stock

Orders

  • Purchase Orders
  • Sales Orders
    • Back Orders
    • Invoiced Orders

Documents

  • Purchase
  • Invoice

Update 1: The current code does not show all menu items and sub-menu items when the page loads. I need to modify the asp:menu to include all menu items before applying CSS for the desired layout.

Update 2: This is the structure of the menu as seen in the page source:

  • Products
  • Orders
  • Documents
  • Answer №1

    By making a few adjustments to the asp:menu source code within an aspx page, such as setting RenderingMode ="List" and StaticDisplayLevels="3", you can easily generate the desired menu display upon page load. This allows for simple customization with CSS to style the menu as needed.

    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

    Securing folder access using Web.Config Authorization

    When setting access rules in the login module, is there a specific denial of all at the end? Imagine I have two distinct roles: Admin and User Admins can enter the directory iPhone while Users can access the directory Blackberry I organize my rules and ...

    Toggle the visibility of a hidden div by clicking a button

    After spending several days working on this project, just when I thought it was perfect, I had to completely restructure the entire page. Now I'm feeling stuck and in need of some help. The issue is that I have three images with buttons underneath eac ...

    Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

    I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

    Issue with accessing and manipulating HTML elements in an .asp page using WebBrowser

    This is for a Desktop C# app in Visual Studio Express 2012. When using a webBrowser control to logon to various websites, I encountered an issue with a specific website where the logon attributes are on an .asp page called by the HTML. Despite my efforts, ...

    Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

    Is there a way to prevent my slider from continuously scrolling? I think it has something to do with the offset parameter but I'm having trouble figuring it out. Any assistance would be greatly appreciated. var $container = $(container); var resizeF ...

    When hovering over A, the DIV element fails to appear

    I'm encountering an issue with a specific page on my website () The problem lies with a .dropdown class that is supposed to display a DIV right below the header. In the source code, you can find it underneath <-- START DROPDOWN MENU -->. When I ...

    Guidelines for dynamically passing HTML attribute values into a CSS selector using a variable in Protractor

    After successfully locating the button on the row using its value stored in the "title" HTML attribute, I am now faced with the task of passing a dynamic value to this attribute. To achieve this, I have declared it as a variable. However, I am unsure about ...

    Section content neatly framed by a stationary menu overlay

    I created a menu structured like this: <div id="menu"> <a href="#p1">Paragraph 1</a> <a href="#p2">Paragraph 2</a> ... </div> and set it to have a fixed position: #menu { position: ...

    NextJS application failing to display SVG icon in the absence of internet connection

    https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...

    Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

    I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...

    Utilize an npm package to transform a CSS file into inline styles within an HTML document

    I have an HTML file with an external CSS file and I would like to inline the styles from the external style sheet into one inline <style> tag at the top of the head. Any assistance would be greatly appreciated. Note: I do not want to use the style a ...

    Transform the localized text to a decimal format

    My task is to handle a string that represents decimal values like "123,34", "123123,09", "1234", "123.34", or "123123.09". This data needs to be stored in a MySQL database with a 10,2 decimal format. Since the culture of ASP.net threads may vary due to lo ...

    Creating Divs that Adapt to Screen Size in HTML

    I currently have images in my HTML with hard-coded height and width due to a required transition effect. However, these three images are placed within a div. Is there a way to set the container div to a specific responsive height and width that adjusts f ...

    What could be the reason my post method is not reaching the controller?

    Struggling to send a basic model back to the controller for updating an object. Can't seem to figure it out. The Controller method: [Authorize(Roles = Enums.Roles.SiteAdmin)] [HttpPost] [ValidateAntiForgeryToken] public ActionResult ...

    .xml Large file upload error - Handling System.OutOfMemoryException in asp.net using C#

    I am encountering an issue when uploading a .xml file in asp.net with C#. Upon using ds.GetXml();, I am receiving the error 'System.OutOfMemoryException'. Interestingly, smaller .xml files work fine without any problems. However, when attempting ...

    How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

    I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

    Ways to create gaps among the links in the Bootstrap 4 navigation bar?

    I recently put together a Bootstrap 4 navbar and now I'm looking to increase the spacing between the items on the right side of the navbar. <nav id="menu" class="navbar navbar-expand-md sticky-top"> <div class="site-branding navbar-brand c ...

    When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

    Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

    What could be the reason that the painting application is not functioning properly on mobile devices?

    I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

    Encountering a 404 error for a JSONP Get request while deploying on IIS

    When utilizing jquery AJAX with datatype jsonp, everything runs smoothly on my local development environment even with a large amount of data. However, once deployed on IIS, it only functions properly for requests shorter than 2121 characters; anything mor ...