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
@@ -1,74 +1,295 @@
|
||||
/**
|
||||
* MegaMenu CSS for Classic SharePoint Pages
|
||||
* Version: 1.0.2
|
||||
*
|
||||
* This file imports the exact same CSS as the modern SPFx version
|
||||
* to ensure 100% visual consistency.
|
||||
*
|
||||
* Usage:
|
||||
* 1. Copy the compiled MegaMenu.css from src/extensions/megaMenu/ to your SharePoint assets
|
||||
* 2. Reference it in your master page or via alternate CSS URL:
|
||||
* <link rel="stylesheet" href="/SiteAssets/MegaMenu.css" />
|
||||
*
|
||||
* This file provides additional classic-specific adjustments if needed.
|
||||
*/
|
||||
/* SharePoint MegaMenu 2.1.0 - Classic pages */
|
||||
:root {
|
||||
--megaMenuBarHeight: 44px;
|
||||
--megaMenuContentWidth: 1200px;
|
||||
--megaMenuFlyoutWidth: 288px;
|
||||
--megaMenuZIndex: 6000;
|
||||
}
|
||||
|
||||
/*
|
||||
* The main MegaMenu.css should be loaded first!
|
||||
* This file only contains classic SharePoint specific overrides.
|
||||
*/
|
||||
|
||||
/* Classic SharePoint specific container adjustments */
|
||||
.megamenu-classic-container {
|
||||
/* Insert after s4-titlerow or other SharePoint containers */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
z-index: var(--megaMenuZIndex);
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.mega-menu-main {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: var(--megaMenuBarHeight);
|
||||
overflow: visible;
|
||||
border-top: 1px solid #edebe9;
|
||||
border-bottom: 1px solid #edebe9;
|
||||
background: #fff;
|
||||
color: #323130;
|
||||
}
|
||||
|
||||
.mega-menu-top-level {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: var(--megaMenuContentWidth);
|
||||
min-height: var(--megaMenuBarHeight);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mega-menu-top-item {
|
||||
position: static;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Ensure proper z-index in classic SharePoint context */
|
||||
#Mega-Menu {
|
||||
.mega-menu-mode-flyout .mega-menu-top-item {
|
||||
position: relative;
|
||||
z-index: 999; /* Below SharePoint dialogs but above content */
|
||||
}
|
||||
|
||||
.menu-item-link,
|
||||
.menu-item-text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: var(--megaMenuBarHeight);
|
||||
padding: 0 16px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #323130;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu-item-text[aria-haspopup="true"]::after {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: -3px 0 0 10px;
|
||||
border-right: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.menu-item-link:hover,
|
||||
.menu-item-text:hover,
|
||||
.menu-item-text[aria-expanded="true"] {
|
||||
background: #f3f2f1;
|
||||
color: #323130;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-item-link:focus,
|
||||
.menu-item-text:focus,
|
||||
.mega-menu-category a:focus,
|
||||
.flyout-link:focus {
|
||||
outline: 2px solid #0078d4;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
z-index: 1000; /* Above the main menu */
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #edebe9;
|
||||
border-top: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
|
||||
color: #323130;
|
||||
z-index: calc(var(--megaMenuZIndex) + 1);
|
||||
}
|
||||
|
||||
/* Classic SharePoint ribbon compatibility */
|
||||
body.ms-backgroundImage #Mega-Menu {
|
||||
/* Adjust if SharePoint has background images */
|
||||
.mega-menu.js-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mega-menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: var(--megaMenuContentWidth);
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
gap: 24px 32px;
|
||||
}
|
||||
|
||||
.mega-menu-category {
|
||||
min-width: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mega-menu-category h3 {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid #edebe9;
|
||||
}
|
||||
|
||||
.mega-menu-category h3 a,
|
||||
.mega-menu-category h3 span {
|
||||
display: block;
|
||||
color: #323130;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mega-menu-category h3 a:hover {
|
||||
color: #0078d4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mega-menu-category ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mega-menu-category li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mega-menu-category li a {
|
||||
display: block;
|
||||
margin: 0 -8px;
|
||||
padding: 6px 8px;
|
||||
color: #605e5c;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mega-menu-category li a:hover {
|
||||
background: #f3f2f1;
|
||||
color: #323130;
|
||||
}
|
||||
|
||||
.mega-menu-flyout {
|
||||
right: auto;
|
||||
width: var(--megaMenuFlyoutWidth);
|
||||
min-width: 240px;
|
||||
border-top: 1px solid #edebe9;
|
||||
}
|
||||
|
||||
.flyout-list {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
background: #fff;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flyout-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Ensure settings panel works in classic mode too */
|
||||
.mm-settings-panel {
|
||||
z-index: 4001; /* Above everything else */
|
||||
.flyout-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 8px 36px 8px 16px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
color: #323130;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Classic SharePoint v4.master specific adjustments */
|
||||
.v4master #Mega-Menu {
|
||||
/* Any v4.master specific styles if needed */
|
||||
.flyout-link:hover,
|
||||
.flyout-item:focus-within > .flyout-link {
|
||||
background: #f3f2f1;
|
||||
color: #323130;
|
||||
}
|
||||
|
||||
/* Classic SharePoint seattle.master specific adjustments */
|
||||
.seattle #Mega-Menu {
|
||||
/* Any seattle.master specific styles if needed */
|
||||
.flyout-link-has-children::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 18px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: -4px;
|
||||
border-top: 1px solid currentColor;
|
||||
border-right: 1px solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for classic SharePoint layouts */
|
||||
@media (max-width: 1024px) {
|
||||
.megamenu-classic-container {
|
||||
/* Classic SharePoint is often used on older devices */
|
||||
overflow-x: auto;
|
||||
.flyout-level-3 {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 100%;
|
||||
display: none;
|
||||
width: var(--megaMenuFlyoutWidth);
|
||||
border: 1px solid #edebe9;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
|
||||
z-index: calc(var(--megaMenuZIndex) + 2);
|
||||
}
|
||||
|
||||
.flyout-item:hover > .flyout-level-3,
|
||||
.flyout-item:focus-within > .flyout-level-3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mega-menu-top-level {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.mega-menu-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.flyout-level-3 {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles for classic SharePoint */
|
||||
@media print {
|
||||
#Mega-Menu,
|
||||
.megamenu-classic-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user