Question

我正在创建一个标头，在该标头上，Env列表应使用一些已定义的CSS填充，并且CSS应该在那里以维护其他标头项目的设计。我在动态列表项中使用angular js和array。

我可以使用数组在一个选项卡中填充三级菜单。但是我无法像悬停时的亲子一样并排放置。请检入图片。

enter image description here

var EnvListApp = angular.module('EnvList', [])
EnvListApp.controller('EnvListController', function($scope) {

  $scope.Env = [{
      "EnvId": "Grand Parent 1",
      "Department": [{
          "DepartmentId": "Parent 1"
        },
        {
          "DepartmentId": "Parent 2"
        }
      ]
    },
    {
      "EnvId": "Grand Parent 2",
      "Department": [{
          "DepartmentId": "GP2 Parent 3"
        },
        {
          "DepartmentId": "GP2 Parent 4",
          "Team": [{
              "TeamId": "GP3 Parent 4 Child 1"
            },
            {
              "TeamId": "GP3 Parent 4 Child 2"
            }
          ]
        },
        {
          "DepartmentId": "Parent 5"
        }
      ]
    },
    {
      "EnvId": "Grand Parent 3",
      "Department": [{
        "DepartmentId": "Parent 6"
      }]
    }
  ];

});

* {
  font-family: Segoe UI;
  font-size: 12px;
}

body {
  margin: 0;
  padding: 0;
}

#main-navigator {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  height: 48px;
  line-height: 48px;
}

#sub-navigator {
  background: rgba(0, 0, 0, 0.1);
  color: black;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

#login-panel {
  float: right;
  margin-right: 20px;
  font-size: 12px;
  line-height: 50px;
}

#env-panel {
  float: right;
}

.languagepicker {
  background-color: #333333;
  display: inline-block;
  padding: 0;
  height: 30px;
  overflow: hidden;
  transition: all .5s ease;
  margin: 10px 5px 0 0;
  vertical-align: top;
  position: relative;
  z-index: 999;
}

.languagepicker:hover {
  /* don't forget the 1px border */
  height: 30px;
}

.languagepicker a {
  color: #ffffff;
  text-decoration: none;
}

.languagepicker li {
  display: block;
  padding: 0px 5px;
  line-height: 30px;
}

.languagepicker li:hover {
  background-color: #afafaf;
}

.languagepicker a:first-child li {
  border: none;
  background: #bb635a;
}

.languagepicker li img {
  margin-right: 5px;
}

.roundborders {
  border-radius: 5px;
}

.large:hover {
  /* 
			don't forget the 1px border!
			The first language is 40px heigh, 
			the others are 41px
			*/
  height: auto;
}

#logo-panel {
  float: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#logo-image {
  height: 40px;
  vertical-align: middle;
  margin-right: 10px;
  padding: 0px;
}

#menu-links-panel {
  float: left;
  font-size: 12px;
  padding-left: 25px;
}

.main-navigator-item {
  padding-left: 5px;
  padding-right: 25px;
  cursor: pointer;
}

.sub-navigator-item {
  padding: 10px;
  cursor: pointer;
}

.activeLink {
  color: #B0B0B0;
}

.activeSubLink {
  color: #4169E1;
}


/* CSS for Menu list and childs */

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li.testclass {
  display: block;
  padding: 0px;
  margin-top: 1px;
  background-color: red;
}

li.testclass ul li {
  margin-left: 0px;
  padding: 0;
  background-color: blue;
}

li.testclass ul li ul li {
  margin-left: 0px;
  padding: 0;
  background-color: green;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>Menu Test</title>
</head>

<body>

  <div id="main-navigator" ng-click="loadSubNavigator($event)">
    <div id="menu-links-panel">
      <img class="icon icons8-Service-Bell-Filled" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABMklEQVRIS+3UwVWDQBAG4H84eE4HmkPgKHZgCa4U4NpBUoGxArUC1wIIlmAH4pHkICVw9sD4lif7SEjMIrAnObP/x8zsQHDwkAMD/0inLlu3y4/lkgh3dToz7teRWtpo1kgdpjHb8PrMUWSWyBAlbjxCyEBIwISBgoC0ZKTw8LIRKv2tooOIDvcYDwAuLVryVhIWh7C9SBDLOagCuj2EeSbU0+6hFvJnwNwILLJIPTahLcRP5BUxkm6f336bCWIt1Gtr8GeJnJwwPvVgeyNA8UWY5kIVOstUsrsHvaHGHhkkiGUOwmnf8Mb5PLtWU1PJz3V9HxCookrChb7WVSWzWEqP8Dw4wrjdREod3fghYPJXUpdzPkTYvgwGUgpWkscCzJ44QRy068PN4Meex9ZvZUzsG++lYYngYgyTAAAAAElFTkSuQmCC"
        width="15" height="15">
      <label ng-class="{activeLink: isActiveLink('requests')}" class="main-navigator-item" selectedSubNavigator="requests" defultMain="requests" defultSub="newRequest" onclick="javascript:pagereload();"> Requests </label>
    </div>

    <div id="logo-panel">
      <img id="logo-image" src="#" alt="Logo"></img>
    </div>

    <!-- Env Menu starts here -->
    <div id="env-panell" ng-app="EnvList" ng-controller="EnvListController">
      <ul class="languagepicker roundborders large">

        <li><a href="#">env &#9660;</a></li>

        <li class="testclass" ng-repeat="e in Env"><a href="#">{{e.EnvId}}</a>
          <ul>
            <li ng-repeat="d in e.Department"><a href="#">{{d.DepartmentId}}</a>
              <ul>
                <li ng-repeat="t in d.Team"><a href="#">{{t.TeamId}}</a></li>
              </ul>
            </li>
          </ul>
        </li>

      </ul>
    </div>
    <!-- Env Menu End here-->

  </div>

</body>

</html>

如何使用现有CSS进行制作？请帮忙！

Answer 1

这是已编辑的代码段。希望这是您希望实现的结果。

PS。我对在css部分添加的内容进行了评论。

var EnvListApp = angular.module('EnvList', [])
EnvListApp.controller('EnvListController', function($scope) {

  $scope.Env = [{
      "EnvId": "Grand Parent 1",
      "Department": [{
          "DepartmentId": "Parent 1"
        },
        {
          "DepartmentId": "Parent 2"
        }
      ]
    },
    {
      "EnvId": "Grand Parent 2",
      "Department": [{
          "DepartmentId": "GP2 Parent 3"
        },
        {
          "DepartmentId": "GP2 Parent 4",
          "Team": [{
              "TeamId": "GP3 Parent 4 Child 1"
            },
            {
              "TeamId": "GP3 Parent 4 Child 2"
            }
          ]
        },
        {
          "DepartmentId": "Parent 5"
        }
      ]
    },
    {
      "EnvId": "Grand Parent 3",
      "Department": [{
        "DepartmentId": "Parent 6"
      }]
    }
  ];

});

* {
  font-family: Segoe UI;
  font-size: 12px;
}

body {
  margin: 0;
  padding: 0;
}

#main-navigator {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  height: 48px;
  line-height: 48px;
}

#sub-navigator {
  background: rgba(0, 0, 0, 0.1);
  color: black;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

#login-panel {
  float: right;
  margin-right: 20px;
  font-size: 12px;
  line-height: 50px;
}

#env-panel {
  float: right;
}

.languagepicker {
  background-color: #333333;
  display: inline-block;
  padding: 0;
  height: 30px;
  /* Remove this */
  /*overflow: hidden;*/
  transition: all .5s ease;
  margin: 10px 5px 0 0;
  vertical-align: top;
  position: relative;
  z-index: 999;
}

.languagepicker:hover {
  /* don't forget the 1px border */
  height: 30px;
}

.languagepicker a {
  color: #ffffff;
  text-decoration: none;
}

.languagepicker li {
  display: block;
  padding: 0px 5px;
  line-height: 30px;
}

.languagepicker li:hover {
  background-color: #afafaf;
}

.languagepicker a:first-child li {
  border: none;
  background: #bb635a;
}

.languagepicker li img {
  margin-right: 5px;
}

.roundborders {
  border-radius: 5px;
}


.large:hover {
  /* 
			don't forget the 1px border!
			The first language is 40px heigh, 
			the others are 41px
			*/
  height: auto;
}

#logo-panel {
  float: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#logo-image {
  height: 40px;
  vertical-align: middle;
  margin-right: 10px;
  padding: 0px;
}

#menu-links-panel {
  float: left;
  font-size: 12px;
  padding-left: 25px;
}

.main-navigator-item {
  padding-left: 5px;
  padding-right: 25px;
  cursor: pointer;
}

.sub-navigator-item {
  padding: 10px;
  cursor: pointer;
}

.activeLink {
  color: #B0B0B0;
}

.activeSubLink {
  color: #4169E1;
}


/* CSS for Menu list and childs */

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.languagepicker li{
  visibility: hidden;
}

/* My Edits */
.languagepicker li:first-child{
  visibility: visible;
}

.languagepicker:hover li{
  visibility: visible;
}

ul li.testclass {
  display: block;
  padding: 0;
  margin-top: 1px;
  background-color: red;
  position: relative;
}


li.testclass > ul,
li.testclass > ul li ul {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  width: auto;
  white-space: nowrap;
}

li.testclass:hover > ul,
li.testclass > ul li:hover ul {
  display: block;
}

/* End of Edits */


li.testclass ul li {
  margin-left: 0px;
  padding: 0;
  background-color: blue;
}

li.testclass ul li ul li {
  margin-left: 0px;
  padding: 0;
  background-color: green;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>Menu Test</title>
</head>

<body>

  <div id="main-navigator" ng-click="loadSubNavigator($event)">
    <div id="menu-links-panel">
      <img class="icon icons8-Service-Bell-Filled" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABMklEQVRIS+3UwVWDQBAG4H84eE4HmkPgKHZgCa4U4NpBUoGxArUC1wIIlmAH4pHkICVw9sD4lif7SEjMIrAnObP/x8zsQHDwkAMD/0inLlu3y4/lkgh3dToz7teRWtpo1kgdpjHb8PrMUWSWyBAlbjxCyEBIwISBgoC0ZKTw8LIRKv2tooOIDvcYDwAuLVryVhIWh7C9SBDLOagCuj2EeSbU0+6hFvJnwNwILLJIPTahLcRP5BUxkm6f336bCWIt1Gtr8GeJnJwwPvVgeyNA8UWY5kIVOstUsrsHvaHGHhkkiGUOwmnf8Mb5PLtWU1PJz3V9HxCookrChb7WVSWzWEqP8Dw4wrjdREod3fghYPJXUpdzPkTYvgwGUgpWkscCzJ44QRy068PN4Meex9ZvZUzsG++lYYngYgyTAAAAAElFTkSuQmCC"
        width="15" height="15">
      <label ng-class="{activeLink: isActiveLink('requests')}" class="main-navigator-item" selectedSubNavigator="requests" defultMain="requests" defultSub="newRequest" onclick="javascript:pagereload();"> Requests </label>
    </div>

    <div id="logo-panel">
      <img id="logo-image" src="#" alt="Logo"></img>
    </div>

    <!-- Env Menu starts here -->
    <div id="env-panell" ng-app="EnvList" ng-controller="EnvListController">
      <ul class="languagepicker roundborders large">

        <li><a href="#">env &#9660;</a></li>

        <li class="testclass" ng-repeat="e in Env"><a href="#">{{e.EnvId}}</a>
          <ul>
            <li ng-repeat="d in e.Department"><a href="#">{{d.DepartmentId}}</a>
              <ul>
                <li ng-repeat="t in d.Team"><a href="#">{{t.TeamId}}</a></li>
              </ul>
            </li>
          </ul>
        </li>

      </ul>
    </div>
    <!-- Env Menu End here-->

  </div>

</body>

</html>

如何在css中使用动态列表在多级菜单悬停中添加自定义样式

1 个答案: