admin管理员组文章数量:1131431
I have the following project (Blazor WASM), where, in my NavMenu.razor, the options of the "Products" submenu are not displayed. The menu is based on Bootstrap 5. I am new to this. Please, could someone help me? Thank you very much in advance.
I can't find in the Bootstrap documentation how to solve this problem. Thanks
My code in the NavMenu is:
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Sistema Comanda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All">
<span class="p-2"></span> Inicio
</NavLink>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Maestros
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Productos
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="familiarecetas">Familias</a></li>
<li><a class="dropdown-item" href="">Ítems</a></li>
</ul>
</div>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="locales">Locales</a></li>
</ul>
</div>
<NavLink class="nav-link text-white" href="locales">
<span class="p-2"></span> Locales
</NavLink>
<NavLink class="nav-link text-white" href="familiarecetas">
<span class="p-2"></span> Familias de Recetas
</NavLink>
</ul>
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="registrarse">
<span class="p-2"></span> Registrarse
</NavLink>
<NavLink class="nav-link text-white" href="acceder">
<span class="p-2"></span> Acceder
</NavLink>
</ul>
</div>
</div>
</nav>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
I tried to solve it by looking at the documentation of Bootstrap itself and others but I was unsuccessful.
I have the following project (Blazor WASM), where, in my NavMenu.razor, the options of the "Products" submenu are not displayed. The menu is based on Bootstrap 5. I am new to this. Please, could someone help me? Thank you very much in advance.
I can't find in the Bootstrap documentation how to solve this problem. Thanks
My code in the NavMenu is:
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Sistema Comanda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All">
<span class="p-2"></span> Inicio
</NavLink>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Maestros
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Productos
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="familiarecetas">Familias</a></li>
<li><a class="dropdown-item" href="">Ítems</a></li>
</ul>
</div>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="locales">Locales</a></li>
</ul>
</div>
<NavLink class="nav-link text-white" href="locales">
<span class="p-2"></span> Locales
</NavLink>
<NavLink class="nav-link text-white" href="familiarecetas">
<span class="p-2"></span> Familias de Recetas
</NavLink>
</ul>
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="registrarse">
<span class="p-2"></span> Registrarse
</NavLink>
<NavLink class="nav-link text-white" href="acceder">
<span class="p-2"></span> Acceder
</NavLink>
</ul>
</div>
</div>
</nav>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
I tried to solve it by looking at the documentation of Bootstrap itself and others but I was unsuccessful.
Share Improve this question edited Jan 8 at 7:59 Qiang Fu 8,1231 gold badge6 silver badges16 bronze badges asked Jan 7 at 23:36 Mario EscuderoMario Escudero 136 bronze badges 2- Can you show the Bootstrap scripts (CSS, JS) that you imported in index.html? – Yong Shun Commented Jan 8 at 1:57
- Your provided code doesn't have any "Products" submenu. – Yong Shun Commented Jan 8 at 2:27
1 Answer
Reset to default 0You could try this NavMenu works for grand toggle:
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Sistema Comanda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon bg-white"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All">
<span class="p-2"></span> Inicio
</NavLink>
<!-- Services with Submenu (Click Toggle) -->
<li class="nav-item">
<a class="nav-link dropdown-toggle text-white" data-bs-toggle="collapse" href="#servicesMenu" role="button"
aria-expanded="false" aria-controls="servicesMenu">
<span class="p-2"></span>Maestros
</a>
<div class="collapse" id="servicesMenu">
<ul class="list-unstyled ps-3">
<!-- Grand Submenu (Click Toggle) -->
<li>
<a class="nav-link dropdown-toggle text-white" data-bs-toggle="collapse" href="#moreServicesMenu"
role="button" aria-expanded="false" aria-controls="moreServicesMenu">
Productos
</a>
<div class="collapse ps-3" id="moreServicesMenu">
<ul class="list-unstyled">
<li><a class="dropdown-item text-white" href="familiarecetas">Familias</a></li>
<li><a class="dropdown-item text-white" href="">Ítems</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<NavLink class="nav-link text-white" href="locales">
<span class="p-2"></span> Locales
</NavLink>
<NavLink class="nav-link text-white" href="familiarecetas">
<span class="p-2"></span> Familias de Recetas
</NavLink>
</ul>
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<NavLink class="nav-link text-white" href="registrarse">
<span class="p-2"></span> Registrarse
</NavLink>
<NavLink class="nav-link text-white" href="acceder">
<span class="p-2"></span> Acceder
</NavLink>
</ul>
</div>
</div>
</nav>
本文标签： cProblem with display in sub menu with BlazorStack Overflow
版权声明：本文标题：c# - Problem with display in sub menu with Blazor - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736768442a1951953.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论