菜單和子菜單中Angularjs

我在AngularJS新我想設計菜單和子菜單如以下的圖片 -菜單和子菜單中Angularjs

我已經創造了AngularJS菜單的顯示在下面的圖像 - 相同的代碼在http://jsfiddle.net/ashokyede20/pLnvsnLa/46/

下面還增加是HTML頁面此menu--

<div id="wrapper1" class="container" ng-app="menuApp"> 
    <div id="nav1" ng-controller="menuController"> 
    <div><span> Dynamic Menu</span> </div> 
     <ul> 
      <li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="{{menu.lastOrFirst}}" > 
       <a href="{{menu.action}}">{{menu.title}} <span ></span></a> 
       <ul ng-if="menu.menus"> 
       <div> 
       <li ng-repeat="submenu in menu.menus" class="has-children"> 
        <a href="{{submenu.action}}">{{submenu.title}}</a> 
         <ul ng-if="submenu.menus" ng-class="submenu.class"> 
         <li ng-repeat="subsubmenu in submenu.menus"> 
          <a href="{{subsubmenu.action}}">{{subsubmenu.title}}</a> 
         </li> 
         </ul> 
       </li> 
       </div> 
       </ul> 
      </li> 
      </ul> 
    </div> 
</div>

CSS--

#wrapper1 
    { 
     width: auto; 
     margin: 10px; 
     text-align: left; 
    } 
    #nav1 div {color:Red; margin:10px;} 
    #nav1 ul{list-style-type:none; padding:0; margin:0; } 
    #nav1 ul li {display:inline-block; background-color:#E0E0E0; min-width:150px;} 
    #nav1 ul li 
    { 
     background-image:linear-gradient(to bottom, #ffffff, #eaeaea); 
     background-repeat: repeat-x; 
     border-bottom: 1px solid #d1d1d1; 
     border-top: 1px solid #eaeaea; 
     border-left: 1px solid #eaeaea; 
     border-right: 1px solid #eaeaea; 
      } 
    #nav1 ul li:hover{background-color:#FFF; } 
    #nav1 ul li:hover{ background-image:linear-gradient(to bottom, #eaeaea, #ffffff); 
     background-repeat: repeat-x; 
     border-bottom: 1px solid #eaeaea; 
     border-top: 1px solid #d1d1d1; 
     border-left: 1px solid #eaeaea; 
     border-right: 1px solid #eaeaea; 
     } 
    #nav1 ul li:hover > a 
    { 
     border-bottom-color:#FFF; 
     outline:0; 
     text-decoration:none; 
     border-top:solid 2px #1971c4; 
     padding-top:12px; 
     color:#1971c4; 
     } 
    #nav1 ul ul li:hover > a 
    { 
     border-top: 1px solid #eaeaea; 
     } 
    #nav1 ul li.has-children > a:after { 
     content: ""; 
     background: url("http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/cme-header-sprite.png") no-repeat; 
     width: 8px; 
     height: 8px; 
     display: inline-block; 
     margin-left:5px; 
    } 
    #nav1 ul li a,visited{display:block; padding:15px; color:#888; text-decoration:none;} 
    #nav1 ul li:hover > ul{display:block;} 
    #nav1 ul li a:hover{color:#444;} 
    #nav1 > ul li:hover a{color:#444;} 

    #nav1 ul ul li{display:block;} 
    #nav1 ul ul{position:absolute; background-color:#FFF; min-width:225px;} 
    #nav1 ul ul li:hover{background-color:#F9F9F9;} 
    #nav1 ul li:hover ul li a,visited{color:#888;} 
    #nav1 ul ul li:hover ul{display:block;} 
    #nav1 ul ul ul {margin: -47px 0 0 224px; background-color:#F9F9F9;} 
    #nav1 ul ul ul li a:hover{color:#444;} 
    #nav1 {vertical-align:middle; text-align:center;}

和控制器 ---------------------------------- JS ---------------- menuApp.controller（「menuController」功能（$範圍，$ HTTP）{

$scope.menus = [ 
{ 

    title: "Menu #1", 
    action: "#" 
}, 
{ 

    title: "Menu #2", 
    action: "#", 
    menus: [ 
     { 
      title: "SubMenu #1", 
      action: "#" 
     }, 
     { 
      title: "SubMenu #2", 
      action: "#" 
     }, 
     { 
      title: "SubMenu #3", 
      action: "#" 
     }, 
     { 
      title: "SubMenu #4", 
      action: "#" 
     } 
    ] 
}, 
{ 
    title: "Menu #3", 
    action: "#", 
    menus: [ 
    { 
     title: "SubMenu #1", 
     action: "#", 
     menus: [ 
      { 
       title: "Sub-SubMenu #1", 
       action: "#" 
      }, 
      { 
       title: "Sub-SubMenu #2", 
       action: "#" 
      } 
     ] 
    } 
    ] 
},{ 
    title: "Menu #4", 
    action: "#", 
    menus: [ 
    { 
     title: "SubMenu #1", 
     action: "#", 
     menus: [ 
      { 
       title: "Sub-SubMenu #1", 
       action: "#" 
      }, 
      { 
       title: "Sub-SubMenu #2", 
       action: "#" 
      } 
     ]}]},{ 
    title: "Menu #5", 
    action: "#", 
    menus: [ 
    { 
     title: "SubMenu #1", 
     action: "#" 
    }, 
    { 
     title: "SubMenu #2", 
     action: "#" 
    } 
]}];});

但我面對問題顯示子菜單區域突出顯示在第一個圖像。我不知道如何獲得子菜單的左上角和右上角。

任何人都可以幫我嗎？

感謝很多提前...

來源

2015-12-02 Ashok

我想你可以通過CSS做到這一點，它應該是更多鈔票，如果一些樣式應用到子菜單UL。也許以下可以幫助你：

#nav1 ul ul ul {position: absolute; top: 40px; left: 0; width: 100%; background-color:#F9F9F9;}

如果你可以分享你的代碼運行在某個地方，那將是非常好的。

Regards

來源

2015-12-02 12:46:17 Estefano

感謝您的幫助，我在下面的位置添加了代碼，請看看它。這是我第一次在jsFiddle中添加代碼，我試圖解決這個問題，因爲它不在那裏工作。 http://jsfiddle.net/ashokyede20/pLnvsnLa/15/ – Ashok

Ashok，你必須改變並插入不同的CSS規則。添加了一些彩色背景以幫助識別不同的元素。你可以在這裏看到更新：http://jsfiddle.net/pLnvsnLa/31/ 當你在不同的菜單級插入更多鏈接時，可能需要一些更新。 – Estefano

感謝Estefano，我已經更新了您提供的鏈接中的代碼http://jsfiddle.net/ashokyede20/pLnvsnLa/38/現在您可以在輸出窗口中看到UI。現在問題就像我想看到菜單選項卡下的擴展子菜單，它將從第一個菜單開始到最後一個菜單（這是它的寬度和起始點）。我不能確定它的起點。 – Ashok

菜單和子菜單中Angularjs

回答

相關問題