CODEWITHSUNDEEP
angularjscssdrop-down-menutwitter-bootstrap-3
micronyks
micronyks

Reputation: 55443

How to make dynamic dropdown menu?

  <ul class="nav navbar-nav friend-label">
                <li class="dropdown" ng-repeat="module in modules">
                     <a href="" class="dropdown-toggle" data-toggle="dropdown">  
                      {{module.ModuleName}} <b class="caret"></b>
                     </a>

                    <ul class="dropdown-menu">
                        <li  ng-repeat="subModule in module.SubModules">
                            <a href=""><b>{{subModule.SubModuleName}} </b>
                            </a>

                        </li>
                    </ul>
                </li>
   </ul>

By which, I'm getting following out put. Question and problem is, when I do have submenu its fine if dropdown appears, but when there is no submenu, dropdown should not come. still it shows dropdown small pointer arrow. and if you click it, it comes out with blank dropdown.

As shown in this fig, Contact Us menu doesn't have submenu. Still blank dropdown comes. I want to stop it using above code of HTML. Its a small problem. but I'm unable to fig it out.

enter image description here

Upvotes: 0

Views: 5372

Answers (2)

Vasyl
Vasyl

Reputation: 1423

Using ngRepeat you can dynamically populated menu from the model:

<span class="dropdown" dropdown on-toggle="toggled(open)">
      <a href class="dropdown-toggle" dropdown-toggle>
        Click me!
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="choice in items">
          <a ng-click="runFn(choice.fn)">{{choice.name}}</a> 
        </li>
      </ul>
    </span>

Look for fully worked example on Plunker

Upvotes: 2

Abhitalks
Abhitalks

Reputation: 28437

I am inferring that you are populating your dropdown items dynamically via ajax or server-side.

If that is true, then you could make use of small CSS/Javascript to hide empty menus. But, you have to take care of a few quirks.

First make sure that your markup looks like this:

    <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu"></ul>
    </li>

Important: Notice, that there is no white space between your ul.dropdown-menu start and end tags. This is because, the CSS :empty selector will fail if there is a white-space or line-break.

Now, if there are menu-items in your database you could populate those inside the ul.dropdown-menu as li. If there are no items, then it will left empty. At this point you will have a small dropdown which is empty and still a caret showing.

A little CSS can make the empty dropdown go away:

ul.dropdown-menu:empty {
    display: none;
}

But, because CSS does not have reverse adjacent sibling combinator, we cannot target the caret. So, we have to resort to a little Javascript/jQuery:

$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();

You can choose to have both implemented only in jQuery if you wish to. This is just to give you an idea.

Put together your setup now looks and behaves something like this snippet below. Please view it in full-screen to prevent collapsing.

Snippet:

$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();
ul.dropdown-menu:empty {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
        </li>
        <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu"></ul>
        </li>
    </ul>
</nav>

Upvotes: 1

Related Questions