angularjs popup menu

In this example below you will see how to do a angularjs popup menu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0x00dec0de, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x00dec0de ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>angularjs popup menu</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="app">
  <button auto-close="true" dropdown="" input-id="menu">press me</button><button dropdown="" input-id="menu2">press me</button>
  <ul class="hidden" id="menu">
    <li>
      <a href="#">This is link 1 </a>
    </li>
    <li>
      <a href="#">This is link 2</a>
    </li>
    <li>
      <a href="#">This is link 3</a>
    </li>
    <li>
      <a href="#">This is link 4</a>
    </li>
  </ul>
  <ul class="hidden" id="menu2">
    <li>
      <a href="#">This is link 2 1 </a>
    </li>
    <li>
      <a href="#">This is link 2 2</a>
    </li>
    <li>
      <a href="#">This is link 2 3</a>
    </li>
    <li>
      <a href="#">This is link 2 4</a>
    </li>
  </ul>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0x00dec0de/angularjs-popup-menu-XbOjxm */
#menu, #menu2 {
  width: 150px;
  background-color: gray;
}

.hidden {
  display: none;
}


/*Downloaded from https://www.codeseek.co/0x00dec0de/angularjs-popup-menu-XbOjxm */
(function() {
  'use strict';
  var app;

  app = angular.module('app', []);

  app.controller('mainCtrl', [
    '$scope',
    function($scope) {
      return $scope.name = "works";
    }
  ]);

  app.directive('dropdown', [
    '$document',
    function($document) {
      return {
        scope: {
          inputId: '@',
          autoClose: '@'
        },
        restrict: 'A',
        link: function(s,
    e,
    a,
    m) {
          var autoclose,
    closeMenu,
    isOpen,
    menu,
    menuClick,
    openMenu;
          menu = angular.element(document.getElementById(a.inputId));
          isOpen = false;
          menuClick = true;
          // Hide the menu when we go to the link
          autoclose = false;
          if (a.autoClose) {
            autoclose = true;
          }
          openMenu = function() {
            menu.removeClass('hidden');
            return isOpen = true;
          };
          closeMenu = function() {
            menu.addClass('hidden');
            return isOpen = false;
          };
          e.on('click',
    function() {
            menuClick = true;
            if (!isOpen) {
              return openMenu();
            } else {
              return closeMenu();
            }
          });
          return $document.on('click',
    function(e) {
            if (!menu[0].contains(e.target)) {
              if (menuClick) {
                return menuClick = false;
              } else {
                if (isOpen) {
                  return closeMenu();
                }
              }
            } else {
              if (autoclose) {
                if (e.target.tagName.toLowerCase() === 'a') {
                  return closeMenu();
                }
              }
            }
          });
        }
      };
    }
  ]);

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTtBQUFBLE1BQUE7O0VBQ0EsR0FBQSxHQUFNLE9BQU8sQ0FBQyxNQUFSLENBQWUsS0FBZixFQUFzQixFQUF0Qjs7RUFFTixHQUFHLENBQUMsVUFBSixDQUFlLFVBQWYsRUFBMEI7SUFBQyxRQUFEO0lBQVcsUUFBQSxDQUFDLE1BQUQsQ0FBQTthQUNuQyxNQUFNLENBQUMsSUFBUCxHQUFjO0lBRHFCLENBQVg7R0FBMUI7O0VBSUEsR0FBRyxDQUFDLFNBQUosQ0FBYyxVQUFkLEVBQTBCO0lBQUMsV0FBRDtJQUFhLFFBQUEsQ0FBQyxTQUFELENBQUE7YUFDckM7UUFBQSxLQUFBLEVBQ0U7VUFBQSxPQUFBLEVBQVMsR0FBVDtVQUNBLFNBQUEsRUFBVztRQURYLENBREY7UUFHQSxRQUFBLEVBQVUsR0FIVjtRQUlBLElBQUEsRUFBSyxRQUFBLENBQUMsQ0FBRDtJQUFHLENBQUg7SUFBSyxDQUFMO0lBQU8sQ0FBUCxDQUFBO0FBQ0gsY0FBQSxTQUFBO0lBQUEsU0FBQTtJQUFBLE1BQUE7SUFBQSxJQUFBO0lBQUEsU0FBQTtJQUFBO1VBQUEsSUFBQSxHQUFPLE9BQU8sQ0FBQyxPQUFSLENBQWdCLFFBQVEsQ0FBQyxjQUFULENBQXdCLENBQUMsQ0FBQyxPQUExQixDQUFoQjtVQUNQLE1BQUEsR0FBUztVQUNULFNBQUEsR0FBWSxLQUZaOztVQUlBLFNBQUEsR0FBWTtVQUNaLElBQW9CLENBQUMsQ0FBQyxTQUF0QjtZQUFBLFNBQUEsR0FBWSxLQUFaOztVQUVBLFFBQUEsR0FBVyxRQUFBLENBQUEsQ0FBQTtZQUNULElBQUksQ0FBQyxXQUFMLENBQWlCLFFBQWpCO21CQUNBLE1BQUEsR0FBUztVQUZBO1VBSVgsU0FBQSxHQUFXLFFBQUEsQ0FBQSxDQUFBO1lBQ1QsSUFBSSxDQUFDLFFBQUwsQ0FBYyxRQUFkO21CQUNBLE1BQUEsR0FBUztVQUZBO1VBSVgsQ0FBQyxDQUFDLEVBQUYsQ0FBSyxPQUFMO0lBQWMsUUFBQSxDQUFBLENBQUE7WUFDWixTQUFBLEdBQVk7WUFFWixJQUFHLENBQUksTUFBUDtxQkFDRSxRQUFBLENBQUEsRUFERjthQUFBLE1BQUE7cUJBR0UsU0FBQSxDQUFBLEVBSEY7O1VBSFksQ0FBZDtpQkFRQSxTQUFTLENBQUMsRUFBVixDQUFhLE9BQWI7SUFBc0IsUUFBQSxDQUFDLENBQUQsQ0FBQTtZQUNwQixJQUFHLENBQUksSUFBSyxDQUFBLENBQUEsQ0FBRSxDQUFDLFFBQVIsQ0FBaUIsQ0FBQyxDQUFDLE1BQW5CLENBQVA7Y0FDRSxJQUFHLFNBQUg7dUJBQ0UsU0FBQSxHQUFZLE1BRGQ7ZUFBQSxNQUFBO2dCQUdFLElBQWUsTUFBZjt5QkFBQSxTQUFBLENBQUEsRUFBQTtpQkFIRjtlQURGO2FBQUEsTUFBQTtjQU1FLElBQUcsU0FBSDtnQkFDRSxJQUFHLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLFdBQWpCLENBQUEsQ0FBQSxLQUFrQyxHQUFyQzt5QkFDRSxTQUFBLENBQUEsRUFERjtpQkFERjtlQU5GOztVQURvQixDQUF0QjtRQXhCRztNQUpMO0lBRHFDLENBQWI7R0FBMUI7QUFQQSIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0J1xuYXBwID0gYW5ndWxhci5tb2R1bGUgJ2FwcCcsIFtdXG5cbmFwcC5jb250cm9sbGVyICdtYWluQ3RybCcsWyckc2NvcGUnLCAoJHNjb3BlKS0+XG4gICRzY29wZS5uYW1lID0gXCJ3b3Jrc1wiXG5dXG5cbmFwcC5kaXJlY3RpdmUgJ2Ryb3Bkb3duJywgWyckZG9jdW1lbnQnLCgkZG9jdW1lbnQpLT5cbiAgc2NvcGU6IFxuICAgIGlucHV0SWQ6ICdAJ1xuICAgIGF1dG9DbG9zZTogJ0AnXG4gIHJlc3RyaWN0OiAnQSdcbiAgbGluazoocyxlLGEsbSktPlxuICAgIG1lbnUgPSBhbmd1bGFyLmVsZW1lbnQgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQgYS5pbnB1dElkXG4gICAgaXNPcGVuID0gZmFsc2VcbiAgICBtZW51Q2xpY2sgPSB0cnVlXG4gICAgIyBIaWRlIHRoZSBtZW51IHdoZW4gd2UgZ28gdG8gdGhlIGxpbmtcbiAgICBhdXRvY2xvc2UgPSBmYWxzZVxuICAgIGF1dG9jbG9zZSA9IHRydWUgaWYgYS5hdXRvQ2xvc2VcbiAgICBcbiAgICBvcGVuTWVudSAgPSgpLT5cbiAgICAgIG1lbnUucmVtb3ZlQ2xhc3MgJ2hpZGRlbidcbiAgICAgIGlzT3BlbiA9IHRydWVcbiAgICAgICBcbiAgICBjbG9zZU1lbnUgPSgpLT4gXG4gICAgICBtZW51LmFkZENsYXNzICdoaWRkZW4nXG4gICAgICBpc09wZW4gPSBmYWxzZVxuICAgICBcbiAgICBlLm9uICdjbGljaycsIC0+XG4gICAgICBtZW51Q2xpY2sgPSB0cnVlXG4gICAgICBcbiAgICAgIGlmIG5vdCBpc09wZW5cbiAgICAgICAgb3Blbk1lbnUoKVxuICAgICAgZWxzZVxuICAgICAgICBjbG9zZU1lbnUoKVxuICAgIFxuICAgICRkb2N1bWVudC5vbiAnY2xpY2snLCAoZSktPlxuICAgICAgaWYgbm90IG1lbnVbMF0uY29udGFpbnMgZS50YXJnZXRcbiAgICAgICAgaWYgbWVudUNsaWNrXG4gICAgICAgICAgbWVudUNsaWNrID0gZmFsc2VcbiAgICAgICAgZWxzZVxuICAgICAgICAgIGNsb3NlTWVudSgpIGlmIGlzT3BlblxuICAgICAgZWxzZVxuICAgICAgICBpZiBhdXRvY2xvc2VcbiAgICAgICAgICBpZiBlLnRhcmdldC50YWdOYW1lLnRvTG93ZXJDYXNlKCkgaXMgJ2EnXG4gICAgICAgICAgICBjbG9zZU1lbnUoKSAgICAgXG5dXG4iXX0=
//# sourceURL=coffeescript

Comments