CODEWITHSUNDEEP
cssangularjsmenu
jcubic
jcubic

Reputation: 66488

Menu expandable on hover in angular.js

I have problem with expandable and collapsible menu on mouse hover, I have code like this:

html:

  <div ng-mouseout="showMenu=false" class="dashboard-menu">
      <div ng-show="showMenu" class="sub-menu">
        <ul>
          <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
          <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
          <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
        </ul>
      </div>
      <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
    </div>

css:

.icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  background: #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.plus {
  float: right;
}
.dashboard-menu {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

why menu hide when I'm out of .plus icon? How to fix it? Here is a plunker.

Upvotes: 0

Views: 396

Answers (2)

Stewart Hering
Stewart Hering

Reputation: 90

I was also able to get your code working by adding the ng-mouseover="showMenu=true" to the dashboard-menu div.

<body ng-app>
    <div class="dashboard-menu" ng-mouseover="showMenu=true" ng-mouseout="showMenu=false">
      <div ng-show="showMenu" class="sub-menu">
        <ul>
          <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
          <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
          <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
        </ul>
      </div>
      <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
    </div>
  </body>

Upvotes: 1

jcubic
jcubic

Reputation: 66488

Using ng-mouseleave fixed the issue.

Upvotes: 0

Related Questions