0

I'd like to recreate this same type of dropdown menu in AngularJS. I've made the button with FontAwesome icons nested in there. Any ideas? Links to resource?

DropDown Text Input Example

var mainApp = angular.module( "mainApp", ["ngRoute"] );

mainApp.controller( "CategoriesController", [ "$scope", "dataFactory", function( $scope, dataFactory ) {

mainApp.controller("Menu", function( $scope ) {
    $scope.showMenu0 = false;
$scope.revealMenu0 = function( listing ) {
      $scope.showMenu0 = !$scope.showMenu0;
  
   }
})
}]);
.burgerbtn{
 position: absolute;
    display:block;
 margin-left: 19%;
 margin-top: -17.5%;
 height: 26px;
 width: 44px;
 color: #a09c98;
 font-size: 1em;
 border-radius: 13%;
 border: 1px solid #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-mouseover="revealMenu0()" ng-mouseleave="hideMenu0()">
        <img src={imageurl;}>
      </div>
<span ng-show="showMenu0">
        <button class="burgerbtn" ><i class="fa fa-bars" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></button>
      </span>
trav
  • 376
  • 2
  • 9
  • Take a look: http://plnkr.co/edit/eGohFqiGKmkonmLwT3g1?p=preview – developer033 Jul 10 '16 at 21:12
  • Thanks for piecing that together @developer033, however, that's not quite what I'm looking for. Even though my code snippet doesn't work properly, the button appears on hover. I just need to be able to but a text input area beneath the button on click. – trav Jul 10 '16 at 21:43

2 Answers2

0

Are you using a front-end framework? I recommend Bootstrap. Bootstrap's Popover feature does what you want - you can insert HTML into the Popover instead of just text.

Community
  • 1
  • 1
stackingjasoncooper
  • 623
  • 5
  • 13
0

Are you trying to show the menu on button click or on hover?

Either way this is more about CSS than angular. You angular code seems to make sense as far as toggling the menu. To make a drop down you can do something like this:

Template:

<span class="dd-btn" ng-click="revealMenu0()">
  <i>btnIcon</i>

  //notice the menu is inside the button!
  <div class="dd-menu" ng-if="showMenu0">
   //insert menu content here
  </div>
</span>

CSS:

.dd-btn {
  position: relative;
}

.dd-menu {
  // this will make the menu stick to the bottom of the button 
  // you can set margin to 0 if you don't want a gap between.
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
}

That should be all you need to get it to look like a dropdown, you can add more to make it look pretty.

hsiung
  • 217
  • 1
  • 5