Question

我是AngularJS的新手，我想设计菜单和子菜单，如下图所示 -

我已经在AngularJS中创建了菜单，如下图所示 - http://jsfiddle.net/ashokyede20/pLnvsnLa/46/中也添加了相同的代码

以下是此菜单的HTML页面 -

 <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”，function（$ scope，$ 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;}

如果您可以在某个地方共享代码，那将会非常棒。

此致

Angularjs中的菜单和子菜单

1 个答案: