Post
Ask Question

AngularJs DropDown Menu

HTML Code
  1. <div ng-app="rgMenu" ng-controller="MenuController">  
  2.   
  3.     <ul>  
  4.         <!-- Iterate over and display main menu items -->  
  5.         <li class="main btn" ng-repeat="item in items" ng-click="showSubMenu(item,$index)">  
  6.             <!--<a class="btn" >{{item.title}}</a>-->  
  7.             {{item.title}}  
  8.         </li>  
  9.     </ul>  
  10.     <div style="clear:both;"></div>  
  11.   
  12.     <!-- The ng-style directive allows you to assign a style property  
  13.          to an element. Updates to the property will be immediately  
  14.          reflected in the view. See tje showSubMenu function in app.js -->  
  15.     <ul ng-style="subLeft">  
  16.         <!-- Iterate over and display submenu items -->  
  17.         <li class="sub" ng-repeat="sublink in sublinks">  
  18.             <a class="btn fullwidth" ng-href="{{sublink.href}}" target="{{sublink.target}}" >{{sublink.title}}</a>  
  19.         </li>  
  20.     </ul>  
  21.   
  22.     <div style="clear:both;"></div>  
  23.   
  24. </div>  
JAVASCRIPT Code 
  1. var app = angular.module("rgMenu",[]);  
  2.   
  3. app.controller("MenuController",function($scope, $http) {  
  4.   
  5.     $scope.items = [  
  6.     {"itemId":1, "title":"Google", "description":"Google Search Engine",   
  7.      "sublinks":[  
  8.             {"title":"Google1", "href":"http://google.com/", "target":"_blank"},  
  9.             {"title":"Play", "href":"http://play.google.com/", "target":"_blank"},  
  10.             {"title":"Plus", "href":"http://plus.google.com/", "target":"_blank" }  
  11.     ]},  
  12.     {"itemId":2, "title":"Yahoo", "description":"Yahoo Search Engine",  
  13.         "sublinks":[   
  14.             {"title":"Yahoo", "href":"http://yahoo.com/", "target":"_blank" },  
  15.             {"title":"Sports", "href":"http://sports.yahoo.com/", "target":"_blank" },  
  16.             {"title":"News", "href":"http://news.yahoo.com/", "target":"_blank" }  
  17.         ]},  
  18.     {"itemId":3, "title":"Bing", "description":"Bing Search Engine",   
  19.          "sublinks":[  
  20.             {"title":"Bing", "href":"http://www.bing.com", "target":"_blank" },  
  21.             {"title":"Entertainment", "href":"http://www.bing.com/entertainment", "target":"_blank" },  
  22.             {"title":"Videos", "href":"http://www.bing.com/videos/browse?FORM=L8SP7", "target":"_blank" }  
  23.          ]},  
  24.     {"itemId":4, "title":"Dogpile", "description":"Dogpile Search Engine",  
  25.          "sublinks":[  
  26.              {"title":"Dogpile", "href":"http://www.dogpile.com", "target":"_blank"},  
  27.              {"title":"FAQ", "href":"http://www.dogpile.com/info.dogpl.t6.1/support/Faqs", "target":"_blank"},  
  28.              {"title":"Contact", "href":"http://m.dogpile.com/support/contactus", "target":"_blank" }  
  29.         ]}  
  30.     ];  
  31.       
  32.     // Defaults  
  33.     $scope.sublinks = null;  
  34.     $scope.activeItem = null;  
  35.   
  36.     // Default submenu left padding to 0  
  37.     $scope.subLeft = {'padding-left':'0px'};  
  38.   
  39.     /* 
  40.      * Set active item and submenu links 
  41.      */  
  42.     $scope.showSubMenu = function(item,pos) {  
  43.         // Move submenu based on position of parent  
  44.         $scope.subLeft = {'padding-left':(80 * pos)+'px'};  
  45.         // Set activeItem and sublinks to the currectly  
  46.         // selected item.  
  47.         $scope.activeItem = item;  
  48.         $scope.sublinks = item.sublinks;  
  49.     };  
  50.       
  51. });  
CSS Code
  1.   
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>  
  3. <style>  
  4. body {  
  5.     font-family: Helvetica,Arial;  
  6.     font-size: 10pt;  
  7. }  
  8.   
  9. ul {  
  10.     margin:0;  
  11.     padding:0;  
  12. }  
  13.   
  14. li {  
  15.     margin:0;  
  16.     padding:0;  
  17.     list-style: none;  
  18.     text-align: center;  
  19.     line-height:27px;  
  20.     cursor: pointer;  
  21.     border-radius: 4px;  
  22.     border:1px solid #111;  
  23.     background-color: #0072BA;  
  24.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0B5BA1), to(#012238));  
  25.     background-image: -moz-linear-gradient(19% 75% 90deg,#012238, #0B5BA1);  
  26.     box-shadow: inset 0 1px 0 0 #a5b9d9;  
  27. }  
  28.   
  29. li:hover {  
  30.     background-color: #458cff;  
  31.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0D6CBF), to(#023F69));  
  32.     background-image: -moz-linear-gradient(19% 75% 90deg,#023F69, #0D6CBF)  
  33. }  
  34.   
  35. li:active {  
  36.     background-color: #333;  
  37.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));  
  38.     background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)  
  39. }  
  40.   
  41. li:hover {  
  42.     background-color: #458cff;  
  43.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0D6CBF), to(#023F69));  
  44.     background-image: -moz-linear-gradient(19% 75% 90deg,#023F69, #0D6CBF)  
  45. }  
  46.   
  47. li:active {  
  48.     background-color: #333;  
  49.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));  
  50.     background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)  
  51. }  
  52.   
  53. .main {  
  54.     float: left;  
  55.     margin-top:5px;  
  56.     width:78px;  
  57. }  
  58.   
  59. .sub {  
  60.     margin:0;  
  61.     width:120px;  
  62.     background-color: #005D96;  
  63.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6C1299), to(#220630));  
  64.     background-image: -moz-linear-gradient(19% 75% 90deg,#220630, #6C1299)  
  65. }  
  66.   
  67. .sub:hover {  
  68.     background-color: #450C61;  
  69.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8C17C7), to(#450C61));  
  70.     background-image: -moz-linear-gradient(19% 75% 90deg,#450C61, #8C17C7)  
  71. }  
  72.   
  73. .sub:active {  
  74.     background-color: #111;  
  75.     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));  
  76.     background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)  
  77. }  
  78.   
  79. .btn {  
  80.     color:#fff;  
  81.     text-decoration: none;  
  82. }  
  83.   
  84. .fullwidth {  
  85.     /* inline-block allows the anchor tag to fill 
  86.        the entire width of the list item */  
  87.     display:inline-block;  
  88.     width:100%;  
  89. }