TypeScript 编码菜单和网格显示不正确

Question

所以我正在尝试创建一个从代码派生其元素的菜单。这是为了更容易添加新元素，and/or 将来会将菜单项放入数据库中，以便在不重新编译的情况下更容易编辑和添加。

我希望菜单看起来像这样：

但是该行为目前效果不佳，即

我在这里创建了一个 stackblitz：https://stackblitz.com/edit/angular-ivy-ejlj7n?file=src/app/app.module.ts

我尝试了很多东西，例如为每个悬停部分创建一个子网格、设置项目的宽度、重新排列每个网格部分中列出的内容等 - 但我不确定我还能做什么。不稳定的性质显然来自于元素在悬停时移动的事实。

另一个问题是子菜单在与其主菜单相同的列中打开，而不是跨越网格的整个宽度，我怀疑这是因为那些 div（只需要创建一个 HTML/CSS菜单系统）他们拥有的菜单项的子 div。

谢谢！

Answer 1

好的，所以我放弃了这个的纯 css 版本，用一点代码让它工作。我仍然不确定为什么它以前不起作用，但我所做的是重申菜单项，并将鼠标悬停在菜单项上时更新代码中的一个变量，该变量允许子项显示，所以所有 [unstyled] 代码都是:

menuHoverId: number;
menuMidHoverId: number;
menuHover(id: number) { this.menuHoverId = id; }
menuMidHover(id: number) { this.menuMidHoverId = id; }

然后在 HTML 中我每次都重复每个部分并针对这些变量进行测试。当我将鼠标悬停在父菜单项上时，我在要搜索的数组中重新分配了 id：

    <header>
        <div class="grid-container">
           <div class="title">Test/Blocks/etc</div>

           <div class="top-menu">
              <div class="top-menu-item" *ngFor="let section of menuList; let i = index" (mouseover)="menuHover(i)">{{ section.title }}</div>
           </div>

           <div class="mid-menu">
              <span *ngFor="let section of menuList; let i = index">
                 <span *ngIf="menuHoverId===i">
                    <div class="mid-menu-item" *ngFor="let link of section.items; let o = index" (mouseover)="menuMidHover(o)">{{ link.name }}</div>
                 </span>
              </span>
           </div>
           
           <div class="bottom-menu">
              <span *ngFor="let section of menuList; let i = index">
                 <span *ngIf="menuHoverId===i">
                    <span *ngFor="let link of section.items; let o = index">
                       <span *ngIf="menuMidHoverId===o">
                          <div class="bottom-menu-item" *ngFor="let subsim of link.subItems; let t = index">
                             {{ subsim.name }}
                          </div>
                       </span>
                    </span>
                 </span>
              </span>
           </div>
        </div>
    </header>

然后 css 是简单的网格布局：

.grid-container {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(4, auto);
   gap: 4px 0px;
   grid-template-areas:
        "title"
        "top-menu"
        "mid-menu"
        "bottom-menu";
   }
   .title { grid-area: title; }
   .top-menu { grid-area: top-menu; }
   .top-menu-item { display: inline-block; }
   .mid-menu { grid-area: mid-menu; }
   .mid-menu-item { display: inline-block; }
   .bottom-menu { grid-area: bottom-menu; }
   .bottom-menu-item { display: inline-block; }

它工作顺利 - 不是我正在寻找的解决方案，但它是我可能会被打扰的解决方案:)

感谢所有查看问题的人！

TypeScript 编码菜单和网格显示不正确

TypeScript coded menu and Grid not displaying correctly

css

grid

angular