feat(v2/nav): OpenShift submenu (3/4/legacy) + group K8s distros; deterministic 2-col grid

Addresses the OpenShift 'lío' (ocp3 deprecated · openshift overview · ocp4
current 29-link page) and groups the Kubernetes distributions:

- OpenShift is now a nested submenu inside the Kubernetes menu (OpenShift ▸ →
  OpenShift 4 (current) · Overview · OpenShift 3 (legacy)), so the substantial
  ocp4 page is finally reachable. Reuses the AWS nested-submenu mechanism.
- Distros/platforms grouped at the end of the Kubernetes menu: Managed K8s ·
  OpenShift ▸ · Rancher · Distros & Alternatives (kubernetes-alternatives moved
  here and relabeled). Rancher was already present.
- Switched the 2-column Kubernetes menu from CSS multicol to a deterministic
  column-major grid (11 rows × 2 cols) with overflow:visible / max-height:none,
  eliminating the sub-pixel balancing remainder that left a faint scrollbar.

Verified in Chrome 148 (Playwright + screenshot): menu renders as a clean 2-col
card with NO scrollbar at viewport heights 768–1080; the OpenShift submenu opens
to the side, stays on-screen, and keeps the parent open. Cache-bust ?v=2.9.38.
V2-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Nubenetes Bot
2026-06-20 18:01:31 +02:00
parent f413bebd38
commit fa1a473b91
3 changed files with 28 additions and 8 deletions

View File

@@ -49,7 +49,6 @@
<a href="/kubernetes-storage/">💾 Storage</a>
<a href="/kubernetes-autoscaling/">⚖️ Autoscaling</a>
<a href="/kubernetes-operators-controllers/">🎛️ Operators</a>
<a href="/kubernetes-alternatives/">🔀 Alternatives</a>
<a href="/kubernetes-bigdata/">📊 Big Data</a>
<a href="/kubernetes-tutorials/">🎓 Tutorials</a>
<a href="/kubernetes-backup-migrations/">🗄️ Backup &amp; Migrations</a>
@@ -57,8 +56,16 @@
<a href="/kubernetes-based-devel/">💻 Local Dev</a>
<a href="/kubernetes-on-premise/">🏢 On-Premise</a>
<a href="/managed-kubernetes-in-public-cloud/">☁️ Managed K8s</a>
<a href="/openshift/">🎩 OpenShift</a>
<span class="nb-quicknav__subwrap">
<button class="nb-quicknav__subtrigger" popovertarget="nb-pop-ocp" type="button"><span>🎩 OpenShift</span><span class="nb-quicknav__caret" aria-hidden="true"></span></button>
<div class="nb-quicknav__menu nb-quicknav__submenu" id="nb-pop-ocp" popover>
<a href="/ocp4/">🎩 OpenShift 4 (current)</a>
<a href="/openshift/">🎩 Overview</a>
<a href="/ocp3/">🎩 OpenShift 3 (legacy)</a>
</div>
</span>
<a href="/rancher/">🐮 Rancher</a>
<a href="/kubernetes-alternatives/">🔀 Distros &amp; Alternatives</a>
</div>
</span>

View File

@@ -1338,9 +1338,11 @@ input[type="text"] {
#nb-pop-dev { position-anchor: --nb-a-dev; }
[popovertarget="nb-pop-more"] { anchor-name: --nb-a-more; }
#nb-pop-more { position-anchor: --nb-a-more; }
/* nested AWS submenu anchors to its in-menu trigger */
/* nested submenus anchor to their in-menu trigger */
[popovertarget="nb-pop-aws"] { anchor-name: --nb-a-aws; }
#nb-pop-aws { position-anchor: --nb-a-aws; }
[popovertarget="nb-pop-ocp"] { anchor-name: --nb-a-ocp; }
#nb-pop-ocp { position-anchor: --nb-a-ocp; }
.nb-quicknav__menu {
inset: auto; /* reset the UA-centered popover defaults */
margin: 0;
@@ -1407,14 +1409,25 @@ input[type="text"] {
/* Two-column layout for long menus (e.g. Kubernetes, 22 items) so they stay
short enough to show in full WITHOUT a scrollbar — the scrollable tall popover
was unreliable. Multicol is column-major, so reading order is preserved. */
/* Deterministic 2-column layout (column-major grid) so the menu height equals
the row count exactly — no balancing remainder, hence no stray scrollbar.
11 rows × 2 cols fits the 22 top-level Kubernetes entries. */
.nb-quicknav__menu--cols {
display: block;
column-count: 2;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(11, auto);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 0.4rem;
min-width: 22rem;
/* a 2-column menu (~370px) always fits below the sticky bar, so never
scroll — avoids the sub-pixel grid/overflow scrollbar entirely */
max-height: none;
overflow: visible;
}
.nb-quicknav__menu--cols a {
break-inside: avoid;
/* the submenu wrapper must be a real block (not display:contents) so its
trigger occupies one grid cell cleanly */
.nb-quicknav__menu--cols .nb-quicknav__subwrap {
display: block;
}
/* ── Nested submenu (e.g. Cloud → AWS ▸ → AWS pages) ──

View File

@@ -114,7 +114,7 @@ extra:
extra_css:
- https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap
- static/extra.css
- static/v2_elite.css?v=2.9.37
- static/v2_elite.css?v=2.9.38
extra_javascript:
- static/v2_filter.js?v=2.9.19