50b85468f1
- Added localization support for loading states, empty navigation, and submenu actions in both German and English. - Introduced new properties in IMenuItem for description, openInNewWindow, and external links. - Updated SPTermStorePickerService to handle cache versioning and language-specific caching. - Implemented a new MegaMenuCore service for handling term properties, cache management, and navigation URL resolution. - Refactored TaxonomyNavigationService to build menu hierarchy and filter hidden terms. - Added automated tests for MegaMenu core functionalities and static asset validation. - Removed unused ItemDictionary service. - Created a comprehensive ToDo document outlining the implementation status and future tasks.
98 lines
8.0 KiB
HTML
98 lines
8.0 KiB
HTML
<!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">
|
||
<button type="button" class="mega-menu-mobile-toggle" aria-expanded="false" aria-controls="Mega-Menu-Items" aria-label="Hauptnavigation öffnen"><span class="mega-menu-mobile-icon" aria-hidden="true"></span><span class="mega-menu-mobile-label">Hauptnavigation</span></button>
|
||
<ul id="Mega-Menu-Items" 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">Unternehmen</a>
|
||
<button type="button" class="menu-item-toggle" aria-haspopup="true" aria-expanded="true" aria-controls="Mega-Menu-Panel-Unternehmen" aria-label="Untermenü schließen für Unternehmen"><span aria-hidden="true"></span></button>
|
||
<div id="Mega-Menu-Panel-Unternehmen" 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">Über uns</a>
|
||
<button type="button" class="flyout-toggle" aria-expanded="false" aria-controls="Flyout-UeberUns" aria-label="Untermenü öffnen für Über uns"><span aria-hidden="true"></span></button>
|
||
<ul id="Flyout-UeberUns" 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">Organisation</a>
|
||
<button type="button" class="flyout-toggle" aria-expanded="false" aria-controls="Flyout-Organisation" aria-label="Untermenü öffnen für Organisation"><span aria-hidden="true"></span></button>
|
||
<ul id="Flyout-Organisation" 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 > .menu-item-toggle');
|
||
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));
|
||
});
|
||
});
|
||
var mobile = document.querySelector('.mega-menu-mobile-toggle');
|
||
mobile.addEventListener('click', function () { var open = mobile.getAttribute('aria-expanded') !== 'true'; mobile.setAttribute('aria-expanded', String(open)); document.getElementById('Mega-Menu').classList.toggle('is-mobile-open', open); });
|
||
Array.prototype.forEach.call(document.querySelectorAll('.flyout-toggle'), function (toggle) { toggle.addEventListener('click', function () { var open = toggle.getAttribute('aria-expanded') !== 'true'; toggle.setAttribute('aria-expanded', String(open)); toggle.parentElement.classList.toggle('is-open', open); }); });
|
||
}());
|
||
</script>
|
||
</body>
|
||
</html>
|