Как создать большое меню навигации

Question

Я пытаюсь создать меню, содержащее группы и элементы.

В настоящее время код выглядит вдоль этих линий

<div id="Layer_01_Category_01_Header" class="Some classes here"> 
</div> 
<div id="Layer_01_Category_01_Content" class="Some classes here"> 
    <div id="Layer_02_Category_01_Header" class="Some classes here"> 
    </div> 
    <div id="Layer_02_Category_01_Content" class="Some classes here"> 
     <div id="Layer_03_Category_01_Header" class="Some classes here"> 
     </div> 
     <div id="Layer_03_Category_01_Content" class="Some classes here"> 
      ITEMS HERE 
     </div> 
     <div id="Layer_03_Category_02_Header" class="Some classes here"> 
     </div> 
     <div id="Layer_03_Category_02_Content" class="Some classes here"> 
      ITEMS HERE 
     </div> 
    </div> 
</div> 

Вот как это выглядит: https://gyazo.com/74e407b749e3a05574703e5c3b2256b3

Это, как предполагается работать:

• 1) пользователь нажимает открыть группу (с белым треугольником в левой части окна)

• 2) Элементы (светло-серый фон), принадлежащие к этой группе, загружаются, и пользователь может щелкнуть по одному из элементов, чтобы увидеть дополнительную информацию об этом (информация отображается на другом div, вне меню)

• 3) Пользователь открывает другую группу. Открытая ранее группа закрывается и содержимое скрывается/удаляется

Надеюсь, вы поняли, что ... (Я плохо разбираюсь в вещах).

Теперь ... Я попытался сделать это вручную, добавив DIV для каждого элемента, но он не чувствует, как правильно делать это, потому что:

• A) HTML код уже вокруг 400 линий
• B) Время загрузки на странице будут получить больше и больше, тем больше я продолжать расширять это меню (я полагаю?)

Как я мог пойти заселение группы с элементами в некотором автоматизированном способе? То, что я имел в виду, это запустить скрипт, когда группа открыта, которая заполняет ее элементами из файла базы данных/xml, но я хотел бы услышать другие решения.

Answer 1

Я принимаю следующие вещи.

1. Глубина иерархии может быть любого уровня.
2. Длина каждого уровня может быть любой.

Я бы порекомендовал изменить Меню из Аккордеона в Каскадный стиль.

1. Если глубина иерархии больше, возможно, вы можете получить наполовину отображаемое имя с эллипсисом при изменении глубины в ширину столбца. См. Ниже:
2. Если количество элементов в одной иерархии больше, вы можете создать вертикальную полосу прокрутки. И снова пользовательский интерфейс будет несовместим с опытом просмотра. В этом случае лучше использовать cascading menu style. Пожалуйста, смотрите следующую картинку. Однако для такого типа меню будет работать статическая или динамическая загрузка. Хотя, я бы порекомендовал статические загрузки меню и использовал css для обработки hover и show & hide.

Примечание: поскольку комбинированный подход (аккордеон + дерево) не подходит для многоуровневых и нескольких пунктов меню, я просто рекомендовал правильный подход. И я считаю, что это требует лишь небольшого изучения в свойствах CSS, таких как позиция, z-индекс, отображение или видимость. Я оставил эти вещи для вас.