Блог

Итак, я пытаюсь создать меню, которое извлекает свои элементы из кода. Это делается для того, чтобы значительно упростить добавление новых элементов и / или в будущем поместить пункты меню в базу данных, чтобы их было легче редактировать и добавлять без перекомпиляции.

Я хочу, чтобы меню выглядело так:

Однако в настоящее время поведение работает не очень хорошо, т.е.

Я создал здесь stackblitz: https://stackblitz.com/edit/angular-ivy-ejlj7n?file=src/app/app.module.ts

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

Другая проблема заключается в том, что подменю открываются в том же столбце, что и их мастер, а не охватывают всю ширину сетки, что, как я подозреваю, связано с тем, что эти divs являются (по необходимости создания системы меню только для HTML / CSS) подразделами принадлежащего им элемента меню.

Спасибо!

Хорошо, поэтому я отказался от чистой версии pure css и с помощью небольшого кода заставил ее работать. Я все еще не уверен, почему это не работало раньше, но то, что я сделал, это повторил над пунктами меню, а при наведении курсора мыши на пункт меню обновил переменную в коде, которая позволяет отображать подпункты, поэтому весь [нестайлинговый] код был:

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

и затем в HTML я каждый раз повторяю каждый раздел и тестирую эти переменные. При наведении курсора мыши на родительский элемент меню я переназначаю идентификатор в искомом массиве:

     <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; }
  

Это работает гладко — не то решение, которое я искал, но это решение, которое меня может беспокоить 🙂

Спасибо всем, кто рассмотрел проблему!