角度材料菜單位置（通知欄）

Question

我試圖創建一個通知欄，它在點擊時顯示在鐘形圖標的左下方。

一個例子可以看這裏：http://wrapbootstrap.com/preview/WB011H985

我試着給它一個特定的margin-top（140px），但是當你向下滾動一點，點擊鐘，通知方式過於下面顯示出來。

http://codepen.io/anon/pen/NxgePe

HTML

<div class="md-menu-demo menudemoMenuPositionModes" ng-controller="PositionDemoCtrl as ctrl" ng-cloak="" style="min-height:350px;" ng-app="MyApp"> 
    <div class="menu-demo-container" layout-align="start center" layout="column"> 
    <div class="menus" layout-wrap="" layout="row" layout-fill="" layout-align="space-between center" style="min-height:200px;"> 
     <div layout="column" flex-sm="100" flex="33" layout-align="center center"> 
     <p><code>md-position-mode="target-right target"</code></p> 
     <md-menu md-position-mode=""> 
      <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)"> 
      <img ng-src="https://cdn4.iconfinder.com/data/icons/unigrid-flat-basic/90/019_025_bell_ring_alarm_notice_notification_notify-32.png"> 
      </md-button> 
      <md-menu-content width="6"> 
      <md-menu-item ng-repeat="item in [1, 2, 3]"> 
       <md-button ng-click="ctrl.announceClick($index)"> 
        <div layout="row"> 
        <p flex="">Option {{item}}</p> 
        <md-icon md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon> 
        </div> 
       </md-button> 
      </md-menu-item> 
      </md-menu-content> 
     </md-menu> 
     </div> 
    </div> 
    </div> 
    </div> 

CSS

.menudemoMenuPositionModes .md-menu-demo { 
    padding: 24px; } 

.menudemoMenuPositionModes .menu-demo-container { 
    min-height: 200px; } 

#menu_container_0 { 
    background-color:red; 
    margin-top:140px; 
} 

的JavaScript

angular 
    .module('MyApp',['ngMaterial', 'ngMessages']) 
    .config(function($mdIconProvider) { 
    $mdIconProvider 
     .iconSet("call", 'img/icons/sets/communication-icons.svg', 24) 
     .iconSet("social", 'img/icons/sets/social-icons.svg', 24); 
    }) 
    .controller('PositionDemoCtrl', function DemoCtrl($mdDialog) { 
    var originatorEv; 

    this.openMenu = function($mdOpenMenu, ev) { 
     originatorEv = ev; 
     $mdOpenMenu(ev); 
    }; 

    this.announceClick = function(index) { 
     $mdDialog.show(
     $mdDialog.alert() 
      .title('You clicked!') 
      .textContent('You clicked the menu item at index ' + index) 
      .ok('Nice') 
      .targetEvent(originatorEv) 
    ); 
     originatorEv = null; 
    }; 
    }); 

Answer 1

添加絕對定位菜單容器...

在您的例子的情況下，像這樣：

#menu_container_0 { 
    background-color:red; 
    position: absolute; 
    margin-top:140px; 
} 

http://codepen.io/anon/pen/VeWgvq