Skip to content

Instantly share code, notes, and snippets.

@taunusweb

taunusweb/Mega.html

Created September 7, 2021 11:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save taunusweb/06e59cee9a7c50f21a4d987cac3368ce to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save taunusweb/06e59cee9a7c50f21a4d987cac3368ce to your computer and use it in GitHub Desktop.
Download ZIP
Megamenu für Extension bootstrap_package, TYPO3
Raw
ext_tables.php
#
# Add SQL definition of database tables
#
CREATE TABLE pages (
megamenu TINYINT(1) UNSIGNED DEFAULT '0' NOT NULL
);
Raw
Mega.html
<f:section name="MainNavigation">
<f:if condition="{menu}">
<div class="container">
<ul id="main-menu" class="sm sm-blue">
<f:for each="{menu}" as="item">
<f:if condition="{item.spacer}">
<f:then>
</ul>
<ul class="navbar-nav">
</f:then>
<f:else>
<li class="{f:if(condition:item.active, then:' active')}{f:if(condition:'{item.data.megamenu}==1', then: ' has-mega-menu')}">
<a href="{item.link}" id="nav-item-{item.data.uid}">
<f:if condition="{theme.navigation.icon.enable} && {item.icon}">
<span class="nav-link-icon">
<f:if condition="{item.icon.0.extension} === svg">
<f:then>
<bk2k:inlineSvg image="{item.icon.0}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
</f:then>
<f:else>
<f:image additionalAttributes="{loading: 'lazy'}" image="{item.icon.0}" alt="{item.icon.0.alternative}" title="{item.icon.0.title}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}" />
</f:else>
</f:if>
</span>
</f:if>
<f:format.raw>{item.title}</f:format.raw><f:if condition="{item.current}"> <span class="sr-only">(current)</span></f:if>
</a>
<f:if condition="{item.children}">
<ul class="nav-{item.data.uid} {f:if(condition:'{item.data.megamenu}==1', then: 'mega-menu')}" aria-labelledby="nav-item-{item.data.uid}">
<f:if condition="{item.data.megamenu}==1">
<div class="grid">
</f:if>
<f:for each="{item.children}" as="child">
<li class="{f:if(condition:item.active, then:' active')}">
<f:if condition="{child.spacer}">
<f:then>
<li class="dropdown-divider"></li>
</f:then>
<f:else if="{item.data.megamenu}==1">
<div class="p-3">
<a href="{child.link}" title="{child.title}">
<f:if condition="{theme.navigation.dropdown.icon.enable} && {child.icon}">
<span class="dropdown-icon">
<f:if condition="{child.icon.0.extension} === svg">
<f:then>
<bk2k:inlineSvg image="{child.icon.0}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
</f:then>
<f:else>
<f:image additionalAttributes="{loading: 'lazy'}" image="{child.icon.0}" alt="{child.icon.0.alternative}" title="{child.icon.0.title}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
</f:else>
</f:if>
</span>
</f:if>
<span class="dropdown-text"><f:format.raw>{child.title}</f:format.raw><f:if condition="{child.current}"> <span class="sr-only">(current)</span></f:if></span>
</a>
<f:format.raw><p>{item.data.description}</p></f:format.raw>
<f:if condition="{child.children}">
<ul aria-labelledby="nav-item-{child.data.uid}">
<f:for each="{child.children}" as="subchild">
<li>
<a href="{subchild.link}" title="{subchild.title}">
<f:if condition="{theme.subnavigation.icon.enable} && {subchild.icon}">
<span class="dropdown-icon">
<f:if condition="{subchild.icon.0.extension} === svg">
<f:then>
<bk2k:inlineSvg image="{subchild.icon.0}" width="{theme.subnavigation.icon.width}" height="{theme.subnavigation.icon.height}" />
</f:then>
<f:else>
<f:image additionalAttributes="{loading: 'lazy'}" image="{subchild.icon.0}" alt="{subchild.icon.0.alternative}" title="{subchild.icon.0.title}" width="{theme.subnavigation.icon.width}" height="{theme.subnavigation.icon.height}" />
</f:else>
</f:if>
</span>
</f:if>
<span class="dropdown-text"><f:format.raw>{subchild.title}</f:format.raw><f:if condition="{subchild.current}"> <span class="sr-only">(current)</span></f:if></span>
</a>
</li>
</f:for>
</ul>
</f:if>
</div>
</f:else>
<f:else>
<a href="{child.link}" title="{child.title}">
<f:if condition="{theme.navigation.dropdown.icon.enable} && {child.icon}">
<span class="dropdown-icon">
<f:if condition="{child.icon.0.extension} === svg">
<f:then>
<bk2k:inlineSvg image="{child.icon.0}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
</f:then>
<f:else>
<f:image additionalAttributes="{loading: 'lazy'}" image="{child.icon.0}" alt="{child.icon.0.alternative}" title="{child.icon.0.title}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}" />
</f:else>
</f:if>
</span>
</f:if>
<span class="dropdown-text"><f:format.raw>{child.title}</f:format.raw><f:if condition="{child.current}"> <span class="sr-only">(current)</span></f:if></span>
</a>
<f:if condition="{child.children}">
<ul aria-labelledby="nav-item-{child.data.uid}">
<f:for each="{child.children}" as="subchild">
<li>
<a href="{subchild.link}" title="{subchild.title}">
<f:if condition="{theme.subnavigation.icon.enable} && {subchild.icon}">
<span class="dropdown-icon">
<f:if condition="{subchild.icon.0.extension} === svg">
<f:then>
<bk2k:inlineSvg image="{subchild.icon.0}" width="{theme.subnavigation.icon.width}" height="{theme.subnavigation.icon.height}" />
</f:then>
<f:else>
<f:image additionalAttributes="{loading: 'lazy'}" image="{subchild.icon.0}" alt="{subchild.icon.0.alternative}" title="{subchild.icon.0.title}" width="{theme.subnavigation.icon.width}" height="{theme.subnavigation.icon.height}" />
</f:else>
</f:if>
</span>
</f:if>
<span class="dropdown-text"><f:format.raw>{subchild.title}</f:format.raw><f:if condition="{subchild.current}"> <span class="sr-only">(current)</span></f:if></span>
</a>
</li>
</f:for>
</ul>
</f:if>
</f:else>
</f:if>
</f:for>
</li>
<f:if condition="{item.data.megamenu}==1">
</div>
</f:if>
</ul>
</f:if>
</li>
</f:else>
</f:if>
</f:for>
</ul>
</div>
</f:if>
</f:section>
Raw
pages.php
/***************
* Register fields
*/
$GLOBALS['TCA']['pages']['columns'] = array_replace_recursive(
$GLOBALS['TCA']['pages']['columns'],
[
'megamenu' => [
'exclude' => 1,
'label' => 'Megamenu',
'config' => [
'type' => 'check',
'renderType' => 'checkboxToggle',
'items' => [
[
0 => '',
1 => '',
]
],
]
],
]
);
// Make fields visible in the TCEforms:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
'pages', // Table name
'--palette--;LLL:EXT:ud_bootstrap/Resources/Private/Language/locallang_db.xlf:pages.palette_title;tx_udbootstrap',
// Field list to add
'1,4,199', // List of specific types to add the field list to. (If empty, all type entries are affected)
'after:cache_tags' // Insert fields before (default) or after one, or replace a field
);
// Add the new palette:
$GLOBALS['TCA']['pages']['palettes']['tx_udbootstrap'] = [
'showitem' => 'megamenu'
];
Raw
setup.typoscript
....
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
levels = 3
includeSpacer = 1
as = mainnavigation
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = nav_icon
as = icon
if {
isTrue.stdWrap.cObject = COA
isTrue.stdWrap.cObject {
10 = TEXT
10.value = 1
10.if.isTrue = {$page.theme.navigation.icon.enable}
20 = TEXT
20.value = 1
20.if.isTrue = {$page.theme.navigation.dropdown.icon.enable}
}
}
}
}
}
....
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment