Menu in a static grid or table

[exeldoc]

Hey,
i want to build a menu with a submenu in a static grid or table. Meaning, in my case the grid is defined by 2 colums and 5 rows. First colum menu, second colum submenu.

Here you can see a scatch:

When i click in another row of the menu, its submenu will start in the first row.
Just that you know, what I am aiming for.

but when i list the subpages like this:

<?= $item = $site->children()->find('category') ?>
<nav class="mainnav">
        <div class="main_menu_container">
          <?php foreach($item->children()->listed() as $p): ?>
            <?php if($p->hasChildren()): ?>
            <div <?php e($p->isOpen(), ' class="active"') ?> class="mainmenu">
              <span class="open-submenu <?php echo $p->title()->html() ?>"><?php echo $p->title()->html() ?><span>
            </div>
          <?php else: ?>
            <div class="mainmenu">
              <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
            </div>
            <?php endif ?>
          <?php endforeach ?>
            <div class="mainmenu">
            </div>

          </div>

          <div class="sub_menu_container">
           <?php foreach($item->children()->listed()->children() as $child): ?>

            <div class="submenu">
               <div class="subcat hidden <?php echo $child->parent()->title()->html() ?>"><a href="<?php echo $child->url() ?>"><?php echo $child->title() ?></a></div>
            </div>

           <?php endforeach ?>
         </div>

  </nav>

the result looks like this:

So the Problem is: The hole submenu builds a long list of every subpage, which logically creates too many rows.

So my idea was, if i could get the subpages of each page to wrap them in a div, which would be followed be the next div with subpages of the next page i could overlay them and could make them visible if they are needed.

So is that possible or does anyone have a nicer solution for these kind of stuctures?

Thanks already for looking into it.

[Oziris]

Maybe some jquery lines could do the trick ?

Solution For Very Long Dropdown Menus | CSS-Tricks

[texnixe]

I think your structure should be different and only show the children of the currently open item. The way you have set it up know, you loop through all children of all items. So basically, the submenu should be inside the outer loop and then the submenu should be either displayed or not, depending which parent item is currently selected.

[exeldoc]

I have been there.
I reconstructed it:

<nav class="mainnav">


      <?php foreach($item->children()->listed() as $p): ?>
        <?php if($p->hasChildren()): ?>
    <div class="menu_container">
        <div <?php e($p->isOpen(), ' class="active"') ?> class="mainmenu">
          <span class="open-submenu <?php echo $p->title()->html() ?>"><?php echo $p->title()->html() ?><span>
        </div>
    </div>
    <div class="sub_menu_container">
        <?php foreach($p->children() as $child): ?>
        <div class="submenu">
            <div><a href="<?php echo $child->url() ?>"><?php echo $child->title() ?></a></div>
         </div>
        <?php endforeach ?>
    </div>
      <?php else: ?>
    <div class="menu_container">
        <div class="mainmenu">
          <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
        </div>
    </div>
        <?php endif ?>
      <?php endforeach ?>
    <div class="menu_container">
        <div class="mainmenu">
        </div>
    </div>

the Problem here is that the first div from the menu container takes the height of the sub menu. Than it looks like this, which is totally logical:

Submenu is the way it is supposed to be, but i don’t see a nice way to fix the menu here.

That’s why I thought i meight be a good idea to just make two foreach requests…

[texnixe]

That’s more a CSS issue…

[exeldoc]

Thanks Oziris for contributing , but actually the lenth is not realy the real problem here, i think. Sry or if i confused you with that.

[exeldoc]

Thats what i feared it to be.
Thanks anyway for looking into it.

[anon77445132]

If you want to learn more, goto Brad Frost: Responsive Resources - Navigation

[exeldoc]

Hey.
I just want to share my solution. I forced myself through it.

Here you can see my HTML structure:

<!-- <?= $item = $site->children()->find('category') ?> -->
<nav class="mainnav">

<div class="borders">
  <div class="borders_main">
    <div class="border border_main"></div>
    <div class="border border_main"></div>
    <div class="border border_main"></div>
    <div class="border border_main"></div>
    <div class="border border_main"></div>
  </div>
  <div class="borders_sub">
    <div class="border border_sub"></div>
    <div class="border border_sub"></div>
    <div class="border border_sub"></div>
    <div class="border border_sub"></div>
    <div class="border border_sub"></div>
  </div>
</div>
  <div class="menu_container">
      <?php foreach($item->children()->listed() as $p): ?>
        <?php if($p->hasChildren()): ?>
    <div class="mainmenu_container">
        <div <?php e($p->isOpen(), ' class="active"') ?> class="mainmenu">
          <span class="open-submenu <?php echo $p->title()->html() ?>"><?php echo $p->title()->html() ?><span>
        </div>
    </div>
    <div class="submenu_container <?php echo $p->title()->html() ?>_sub hidden">
        <?php foreach($p->children() as $child): ?>
          <div class="submenu">
            <a class="submenu_entry" href="<?php echo $child->url() ?>"><?php echo $child->title() ?></a>
          </div>
        <?php endforeach ?>
    </div>
      <?php else: ?>
    <div class="mainmenu_container">
        <div class="mainmenu">
          <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
        </div>
    </div>
        <?php endif ?>
      <?php endforeach ?>

  </div>

css:

.menu_pic_wrapper {
display: grid;
grid-template-columns: 1fr;
}
.mainnav, .pic_container {
  display: grid;
  grid-template-columns: 1fr 260px 260px 1fr;
  grid-column: 1;
   grid-row: 1;
}
.mainnav {
grid-row: 1;
grid-template-rows: 1fr;
}
.menu_pic {
 grid-column: 3 / 5 !important;
  place-self: start !important;
}
.borders, .menu_container {
  grid-column: 2 /4;
  display: grid;
  grid-template-columns: 260px 260px;
  grid-template-rows: repeat(5, 1fr);
  align-self: center;
}
.menu_container {
  grid-row: 1;
}
.borders {
  grid-row: 1;
  grid-template-rows: 1fr;
}
.boarders_sub {
  grid-column: 2;
}
.boarders_main {
  grid-column: 1;
}
.border {
  height: 65px;
  margin-bottom: -1px;
}
.border_main {
  border-top: 1px solid var(--lieghtGrey);
  border-right: 1px solid var(--lieghtGrey);
}
.border_sub {
  border-top: 1px solid var(--lieghtGrey);
  grid-column: 2;
  grid-row: 1;
}
.border_main:last-of-type, .border_sub:last-of-type {
  border-bottom: 1px solid var(--lieghtGrey);
}
.mainmenu_container {
  grid-column: 1;
  height: 66px;
}
.submenu_container {
  grid-column: 2;
  grid-row: 1 / 6;
  z-index: 1;
}
.mainmenu, .submenu {
  padding: 20px;
  min-height: 26px;
}

js:

$('.photo').click(function() {
$(".photo_sub").toggleClass("show").toggleClass("hidden");
$(".submenu_container").not(".photo_sub").removeClass("show").addClass("hidden")
  console.log("click_photo");
});
$('.object').click(function() {
$(".object_sub").toggleClass("show").toggleClass("hidden");
$(".submenu_container").not(".object_sub").removeClass("show").addClass("hidden")
console.log("click_object");
});
$('.tableau').click(function() {
$(".tableau_sub").toggleClass("show").toggleClass("hidden");
$(".submenu_container").not(".tableau_sub").removeClass("show").addClass("hidden")
console.log("click_worklist");
});

So in case anyone has a similar problem, maybe this helps.