feat: Add support for flyout menu mode in MegaMenu
- Introduced `MegaMenuMode` type and `normalizeMegaMenuMode` function to handle menu modes. - Updated `MegaMenuApplicationCustomizer` to accept `menuMode` property. - Enhanced `MegaMenuRenderer` to render flyout menus based on the selected mode. - Created new HTML previews for both flyout and mega menu modes. - Removed unused mock services and user custom action service interfaces.
This commit is contained in:
Torsten Brendgen
90
preview/flyout-menu-preview.html
Normal file
90
preview/flyout-menu-preview.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>MegaMenu – Flyout-Vorschau</title>
|
||||
<link rel="stylesheet" href="../classic/megamenu-classic.css" />
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: #faf9f8; color: #323130; font-family: "Segoe UI", Arial, sans-serif; }
|
||||
.suite-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #0078d4; color: #fff; }
|
||||
.suite-brand { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
|
||||
.waffle { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
|
||||
.waffle span { width: 4px; height: 4px; background: #fff; }
|
||||
.suite-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
|
||||
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0078d4; font-weight: 700; }
|
||||
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 32px; background: #fff; }
|
||||
.site-title { font-size: 24px; font-weight: 300; }
|
||||
.site-search { width: 280px; padding: 9px 12px; border: 1px solid #8a8886; background: #fff; }
|
||||
.preview-label { padding: 7px 24px; background: #deecf9; color: #605e5c; font-size: 12px; text-align: center; }
|
||||
.page { max-width: 1200px; margin: 28px auto; padding: 0 24px; }
|
||||
.page h1 { margin: 0 0 8px; font-size: 32px; font-weight: 300; }
|
||||
.page p { color: #605e5c; }
|
||||
.news { max-width: 760px; margin-top: 28px; border-top: 1px solid #edebe9; }
|
||||
.news article { padding: 18px 0; border-bottom: 1px solid #edebe9; }
|
||||
.news time { color: #605e5c; font-size: 12px; }
|
||||
.news h2 { margin: 5px 0; font-size: 18px; font-weight: 600; }
|
||||
@media (max-width: 760px) { .site-search { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="suite-bar">
|
||||
<div class="suite-brand"><span class="waffle" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>SharePoint</div>
|
||||
<div class="suite-user"><span>Max Mustermann</span><span class="avatar">MM</span></div>
|
||||
</header>
|
||||
<div class="site-header"><div class="site-title">Intranet Portal</div><input class="site-search" type="search" placeholder="Auf dieser Website suchen" /></div>
|
||||
|
||||
<div class="megamenu-classic-container">
|
||||
<nav id="Mega-Menu" class="mega-menu-main mega-menu-mode-flyout" data-menu-mode="flyout" aria-label="Hauptnavigation">
|
||||
<ul class="mega-menu-top-level">
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link" href="#">Startseite</a></li>
|
||||
<li class="mega-menu-top-item is-active">
|
||||
<a class="menu-item-link menu-item-has-children" href="#unternehmen" aria-haspopup="true" aria-expanded="true">Unternehmen</a>
|
||||
<div class="mega-menu mega-menu-flyout js-open" aria-expanded="true">
|
||||
<ul class="flyout-list flyout-level-2">
|
||||
<li class="flyout-item has-children">
|
||||
<a class="flyout-link flyout-link-has-children" href="#ueber-uns" aria-haspopup="true">Über uns</a>
|
||||
<ul class="flyout-list flyout-level-3"><li class="flyout-item"><a class="flyout-link" href="#profil">Unternehmensprofil</a></li><li class="flyout-item"><a class="flyout-link" href="#leitung">Geschäftsleitung</a></li><li class="flyout-item"><a class="flyout-link" href="#standorte">Standorte</a></li></ul>
|
||||
</li>
|
||||
<li class="flyout-item has-children">
|
||||
<a class="flyout-link flyout-link-has-children" href="#organisation" aria-haspopup="true">Organisation</a>
|
||||
<ul class="flyout-list flyout-level-3"><li class="flyout-item"><a class="flyout-link" href="#bereiche">Fachbereiche</a></li><li class="flyout-item"><a class="flyout-link" href="#organigramm">Organigramm</a></li><li class="flyout-item"><a class="flyout-link" href="#ansprechpartner">Ansprechpartner</a></li></ul>
|
||||
</li>
|
||||
<li class="flyout-item is-current"><a class="flyout-link" href="#news">Aktuelle Meldungen</a></li>
|
||||
<li class="flyout-item"><a class="flyout-link" href="#termine">Veranstaltungen</a></li>
|
||||
<li class="flyout-item"><a class="flyout-link" href="#telefonbuch">Telefonbuch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link menu-item-has-children" href="#personal" aria-haspopup="true" aria-expanded="false">Personal</a></li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link menu-item-has-children" href="#services" aria-haspopup="true" aria-expanded="false">Services</a></li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link" href="#projekte">Projekte</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="preview-label">Vorschau: menuMode = "flyout" · Für Ebene 3 mit der Maus über „Über uns“ oder „Organisation“ fahren</div>
|
||||
|
||||
<main class="page">
|
||||
<h1>Aktuelle Meldungen</h1>
|
||||
<p>Die Flyout-Navigation bleibt kompakt und folgt der hierarchischen Struktur des Termsets.</p>
|
||||
<section class="news"><article><time>20. Juli 2026</time><h2>Neue Services im Intranet verfügbar</h2><p>Alle wichtigen Anwendungen sind jetzt zentral über das Serviceportal erreichbar.</p></article><article><time>18. Juli 2026</time><h2>Informationen aus der Geschäftsleitung</h2><p>Die aktuelle Mitarbeitendeninformation steht zum Abruf bereit.</p></article></section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var triggers = document.querySelectorAll('.mega-menu-top-level > .mega-menu-top-item > [aria-haspopup="true"]');
|
||||
Array.prototype.forEach.call(triggers, function (trigger) {
|
||||
trigger.addEventListener('click', function (event) {
|
||||
var panel = trigger.nextElementSibling;
|
||||
if (!panel || !panel.classList.contains('mega-menu')) { return; }
|
||||
event.preventDefault();
|
||||
var open = panel.classList.contains('js-open');
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.mega-menu.js-open'), function (item) { item.classList.remove('js-open'); if (item.previousElementSibling) { item.previousElementSibling.setAttribute('aria-expanded', 'false'); } });
|
||||
panel.classList.toggle('js-open', !open); trigger.setAttribute('aria-expanded', String(!open));
|
||||
});
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
98
preview/mega-menu-preview.html
Normal file
98
preview/mega-menu-preview.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>MegaMenu – Mega-Menu-Vorschau</title>
|
||||
<link rel="stylesheet" href="../classic/megamenu-classic.css" />
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: #faf9f8; color: #323130; font-family: "Segoe UI", Arial, sans-serif; }
|
||||
.suite-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #0078d4; color: #fff; }
|
||||
.suite-brand { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
|
||||
.waffle { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
|
||||
.waffle span { width: 4px; height: 4px; background: #fff; }
|
||||
.suite-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
|
||||
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0078d4; font-weight: 700; }
|
||||
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 32px; background: #fff; }
|
||||
.site-title { font-size: 24px; font-weight: 300; }
|
||||
.site-search { width: 280px; padding: 9px 12px; border: 1px solid #8a8886; background: #fff; }
|
||||
.preview-label { padding: 7px 24px; background: #fff4ce; color: #605e5c; font-size: 12px; text-align: center; }
|
||||
.page { max-width: 1200px; margin: 28px auto; padding: 0 24px; }
|
||||
.page h1 { margin: 0 0 8px; font-size: 32px; font-weight: 300; }
|
||||
.page p { color: #605e5c; }
|
||||
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
|
||||
.card { min-height: 150px; padding: 20px; border: 1px solid #edebe9; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
|
||||
.card strong { color: #0078d4; }
|
||||
@media (max-width: 760px) { .site-search { display: none; } .cards { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="suite-bar">
|
||||
<div class="suite-brand"><span class="waffle" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span>SharePoint</div>
|
||||
<div class="suite-user"><span>Max Mustermann</span><span class="avatar">MM</span></div>
|
||||
</header>
|
||||
<div class="site-header"><div class="site-title">Intranet Portal</div><input class="site-search" type="search" placeholder="Auf dieser Website suchen" /></div>
|
||||
|
||||
<div class="megamenu-classic-container">
|
||||
<nav id="Mega-Menu" class="mega-menu-main mega-menu-mode-megaMenu" data-menu-mode="megaMenu" aria-label="Hauptnavigation">
|
||||
<ul class="mega-menu-top-level">
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link" href="#">Startseite</a></li>
|
||||
<li class="mega-menu-top-item is-active">
|
||||
<a class="menu-item-link menu-item-has-children" href="#unternehmen" aria-haspopup="true" aria-expanded="true">Unternehmen</a>
|
||||
<div class="mega-menu js-open" aria-expanded="true">
|
||||
<div class="mega-menu-grid" style="--megaMenuColumnCount:4">
|
||||
<section class="mega-menu-category">
|
||||
<h3 class="mega-menu-category-title"><a href="#ueber-uns">Über uns</a></h3>
|
||||
<ul class="mega-menu-links"><li><a href="#profil">Unternehmensprofil</a></li><li><a href="#leitung">Geschäftsleitung</a></li><li><a href="#standorte">Standorte</a></li></ul>
|
||||
</section>
|
||||
<section class="mega-menu-category">
|
||||
<h3 class="mega-menu-category-title"><a href="#organisation">Organisation</a></h3>
|
||||
<ul class="mega-menu-links"><li><a href="#bereiche">Fachbereiche</a></li><li><a href="#organigramm">Organigramm</a></li><li><a href="#ansprechpartner">Ansprechpartner</a></li></ul>
|
||||
</section>
|
||||
<section class="mega-menu-category">
|
||||
<h3 class="mega-menu-category-title"><a href="#kommunikation">Kommunikation</a></h3>
|
||||
<ul class="mega-menu-links"><li class="is-current"><a class="is-current" href="#news">Aktuelle Meldungen</a></li><li><a href="#termine">Veranstaltungen</a></li><li><a href="#medien">Mediencenter</a></li></ul>
|
||||
</section>
|
||||
<section class="mega-menu-category">
|
||||
<h3 class="mega-menu-category-title"><span>Direktzugriff</span></h3>
|
||||
<ul class="mega-menu-links"><li><a href="#telefonbuch">Telefonbuch</a></li><li><a href="#formulare">Formulare</a></li><li><a href="#vorlagen">Vorlagen</a></li></ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link menu-item-has-children" href="#personal" aria-haspopup="true" aria-expanded="false">Personal</a></li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link menu-item-has-children" href="#services" aria-haspopup="true" aria-expanded="false">Services</a></li>
|
||||
<li class="mega-menu-top-item"><a class="menu-item-link" href="#projekte">Projekte</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="preview-label">Vorschau: menuMode = "megaMenu" · „Unternehmen“ ist zur Ansicht geöffnet</div>
|
||||
|
||||
<main class="page">
|
||||
<h1>Willkommen im Intranet</h1>
|
||||
<p>Diese statische Vorschau verwendet dieselben CSS-Klassen wie die MegaMenu-Solution.</p>
|
||||
<div class="cards"><div class="card"><strong>Aktuelle Meldungen</strong><p>Neuigkeiten und wichtige Informationen aus dem Unternehmen.</p></div><div class="card"><strong>Schnellzugriff</strong><p>Formulare, Vorlagen und häufig verwendete Anwendungen.</p></div><div class="card"><strong>Meine Aufgaben</strong><p>Persönliche Aufgaben und zuletzt verwendete Dokumente.</p></div></div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var triggers = document.querySelectorAll('.mega-menu-top-level > .mega-menu-top-item > [aria-haspopup="true"]');
|
||||
function closeAll(except) {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.mega-menu.js-open'), function (panel) {
|
||||
if (panel !== except) { panel.classList.remove('js-open'); panel.setAttribute('aria-expanded', 'false'); if (panel.previousElementSibling) { panel.previousElementSibling.setAttribute('aria-expanded', 'false'); } }
|
||||
});
|
||||
}
|
||||
Array.prototype.forEach.call(triggers, function (trigger) {
|
||||
trigger.addEventListener('click', function (event) {
|
||||
var panel = trigger.nextElementSibling;
|
||||
if (!panel || !panel.classList.contains('mega-menu')) { return; }
|
||||
event.preventDefault();
|
||||
var open = panel.classList.contains('js-open'); closeAll(panel);
|
||||
panel.classList.toggle('js-open', !open); panel.setAttribute('aria-expanded', String(!open)); trigger.setAttribute('aria-expanded', String(!open));
|
||||
});
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user