在Sidenav菜单中创建子菜单（ASP.NET MVC）

Question

I have side menu

Here is code of it

 <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="@Url.Action("Index", "Home")">Home</a>
    <a href="@Url.Action("Index", "Calendar")">Calendar</a>
    <a href="@Url.Action("Index", "PatientDatabase")">Patient Database</a>
    <a href="@Url.Action("Index", "Findings")">Findings</a>
    <a href="@Url.Action("Index", "Controlling")">Controlling</a>
    <a href="@Url.Action("Index", "Invoices")">Invoices</a>
</div>

And JS that's work with it

    <script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>

One of my menu point will have submenu.

So when I click for example Findings I need to see submenu that raleted to Findings .

How I can realize this?

Answer 1

Two quick solutions:

1. JavaScript

instead of <a href="@Url.Action("Index", "Findings")">Findings</a>

have the markup like

<a class="submenu" href="@Url.Action("Index", "Findings")">
  <p>Findings</p>
  <a class="submenu-item" href="#">Sub menu item</a>
  <a class="submenu-item" href="#">Sub menu item</a>
</a>

with a stylesheet like

.submenu > .submenu-item { display: none }
.submenu.open > .submenu-item { display: block }

and your JavaScript like

document.querySelectorAll('.submenu').forEach(function(item) {
  item.addEventListener('click', function(event) {
    event.preventDefault()
    item.classList.toggle('open')
  })
})

That's a simple JavaScript toggle for hiding and showing items. The reason I kept the anchor tag on the top level item is so that it still works if JS doesn't.

2. Detail tag

HTML has a native tag that shows and hides item

<detail>
  <summary>Findings</summary>
  <a href="#">Sub menu item</a>
  <a href="#">Sub menu item</a>
</detail>

However, browser support is not at 100% .