Click here to Skip to main content
14,880,436 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Been toying around with this for a bit and have had quite a bit of success so far but there's just one problem I personally can't seem to fix.

I'm using bootstrap to create my navbar and everything in it which works fine for the most part, until I come to the point where I am using dropdowns.

What I want it to look like is something like this.

The most optimal result I have gotten so far though looks like this.

What I have tried:

@model MessePrototyp.Models.MenuItem

<li class="dropdown-submenu">

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

    <ul class="dropdown-menu">
        @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a a class="dropdown-item" asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>


            }


        }
    </ul>
</li>


This is the code that producess my "optimal" result. The problem, or at least the bit of code that generates the duplicate subpoint seems to be the bolded line. I have however not been able to find a way to work around it as anything I have tried has given me results that are even further away from what I am looking for.
Posted
Updated 8-Nov-18 6:04am
Comments
Richard Deeming 9-Nov-18 8:41am
   
Are you using Bootstrap 4[^] or Bootstrap 3[^]?

1 solution

You can try something like this:

HTML
<div class="btn-group">
  <button type="button" class="btn">Konfiguration</button>
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
   @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>

            }

        }
  </ul>
</div>
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900