меню и подменю в Angularjs

Question

Я новичок в AngularJS, и я хочу, чтобы разработать меню и подменю, как показано на следующем рисунке -

Я уже создали меню в AngularJS, как показывает в следующей image- же код также добавлен в 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: "#" 
    } 
]}];}); 

---

Но я столкнулся проблема для отображения области подменю, как выделено в первом изображении. Я не знаю, как получить верхний левый и правый верхний подменю.

Может ли кто-нибудь помочь мне?

спасибо заранее ...

Answer 1

Я думаю, что вы можете сделать это с помощью CSS, это должно быть, если применить Возможное некоторые стили в подменю UL. Возможно, следующие могут помочь вам:

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

Было бы здорово, если бы вы могли поделиться своим кодом, работая где-нибудь.

С уважением