What is preventing me from concealing submenus within the vertical navigation bar?

The submenus in the vertical nav bar do not hide properly after clicking on the submenu that links to the web form within the folder. However, this issue does not occur with webforms located outside of the folder.

cssasp.nettwitter-bootstrapwebformssubmenu

Answer №1

.list-group.panel>.list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
    <div class="col-md-2">

      <!-- menu -->
      <div id="MainMenu">
        <div class="list-group panel">
          <a href="#" class="list-group-item list-group-item-success" data-parent="#MainMenu">Item 1</a>
          <a href="#" class="list-group-item list-group-item-success" data-parent="#MainMenu">Item 2</a>
          <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3 <i class="fa fa-caret-down"></i></a>
          <div class="collapse" id="demo3">
            <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
            <div class="collapse list-group-submenu" id="SubMenu1">
              <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a>
              <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a>
              <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
              <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
                <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a>
                <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a>
              </div>
              <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a>
            </div>
            <a href="javascript:;" class="list-group-item">Subitem 2</a>
            <a href="javascript:;" class="list-group-item">Subitem 3</a>
          </div>
          <a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 4  <i class="fa fa-caret-down"></i></a>
          <div class="collapse" id="demo4">
            <a href="" class="list-group-item">Subitem 1</a>
            <a href="" class="list-group-item">Subitem 2</a>
            <a href="" class="list-group-item">Subitem 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Answer №2

After some troubleshooting, I was able to figure out the issue. It turns out that the problem lies in the file path. The menu was functioning correctly for files located in the same folder as the master page, but not for those in a different folder. Fortunately, I came across a helpful link that provided me with the solution to my dilemma.

ASP.Net Master Page and File path issues

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

Make sure the page preloader is visible before any other content is loaded

Currently, I am working on a straightforward preloader page that remains visible until the main content of the page is completely loaded. Despite the functionality of the loading page, my main concern lies in the quick display of the main content before th ...

javascriptjqueryhtmlcsspreloader

I'm having trouble with my code not fitting all screen resolutions. I usually code on a Macbook, but recently switched to a Windows computer and now everything is out of whack

$(function(){ $("#Welcome").typed({ strings: ["PROGRAMMERS / NETWORKERS"], typeSpeed: 60 }); }); html { background-color: mintcream; background-size: 100%; } /* Home */ .homeheader button { background-color: #4CAF450; top: ...

jqueryhtmlcss

Creating a tabular layout using div elements and CSS styling

Here is the css and html code that I am working with: <style type="text/css"> .formLayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; border-radius: 1em; } ...

csshtml

Tips on how to encourage users to experiment with fonts through online platforms

Currently, I am attempting to accomplish the following task: I possess a collection of fonts that I would like users to test out online. However, I want the end result to display in an image format so that individuals cannot utilize the font without purch ...

asp.nethtml

How can the printing of content be adjusted when the browser zoom function is activated?

Is there a way to prevent the content from zooming when printing while the browser is zoomed in? The goal is for the printing (using iframe) to remain unchanged even if the browser is zoomed. I attempted: document.body.style.transformOrigin = 'top le ...

javascripthtmlcssreactjsprinting

Google Map in Bootstrap FullScreen Mode Not Mobile-Friendly

Could you please take a look at the provided link and advise me on why the map is not responding correctly? I am also facing issues with the positioning of the map on the page, so any guidance on adjusting it appropriately would be greatly appreciated. Be ...

csstwitter-bootstrapresponsive-design

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

javascriptcss

What is the method to align my text to the top of the page?

I'm working on a 4-column page and trying to insert content. Everything is functioning properly except for getting my first div to align to the top in inline-blocks. As a newbie, I feel like I must be overlooking something simple. (I've tried usi ...

css

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript

The margin-left and margin-right in HTML CSS are not cooperating to center a div

I'm currently diving into the world of CSS and HTML, but I've hit a roadblock. The margin-left and margin-right in the ".logo" div class are refusing to center the div as expected. Despite conducting research and meticulously checking over the co ...

htmlcss

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

cssbrowserjavascript

Move the element outside of the parent container

I am in the process of creating a collapsible sidebar using bootstrap, and I am attempting to have a submenu appear outside of the sidebar when it is toggled to a mini navigation. For example: When the window size is greater than 767 pixels and you click ...

htmlcsstwitter-bootstrap

Transforming Dates to Show Month and Day in .NET using C#

Currently, the line below displays as "9/29/2012": <%=Convert.ToDateTime(prs["xDate"].ToString()).ToShortDateString() %> I want it to display as "Sept 29", without the year. How can I accomplish this in .NET? Thanks in advance! ...

c#asp.net.netvisual-studio-2010

Is there a way to create a System.Web.UI.Page using code that includes a Form and a UserControl?

Here is the code snippet in question: public static string RenderView(string path) { Page pageHolder = new Page(); UserControl viewControl = (UserControl)pageHolder.LoadControl(path); pageHolder.Controls.Add(viewControl); StringWriter ou ...

asp.netwebformsasmxascx

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

javascripthtmlcssvue.jsmaterial-design-lite

Exploring the Benefits of Utilizing Validation Groups in ASP.NET

Having trouble with Validation Group in asp.net c#. After searching for a solution on Google, I still can't figure it out. In this simple ASP.Net form, the TextBox pcs always gets validated even when the value is null or not a number. Here's m ...

c#asp.netrequiredfieldvalidator

Error encountered in ASP.NET MVC: Access denied for this page as it does not inherit from the 'System.Web.Page' class

Recently, I started working on my first ASP.NET MVC project and everything was running smoothly with just one controller, view, and model. However, when I decided to add a new controller and view, I encountered an unexpected error message while trying to r ...

asp.netasp.net-mvc

Switching up the styles in PHP-embedded HTML by tweaking the CSS

I used PHP to create HTML elements by echoing them out, but I ran into an issue when trying to change the CSS for those HTML elements. Can you help me figure out how to do this? The PHP } else { include("steamauth/SteamCo ...

phphtmlcss

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

htmlcss