Project-Pro/cdnPRO
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add menu tu wagabunda

Browse Source
This commit is contained in:
Roman Pyrih
2025-11-21 10:35:24 +01:00
parent cde9871489
commit 5cae883a38
4 changed files with 211 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
wagabunda.net.pl/custom.js
View File

@@ -92,3 +92,97 @@ const firstRow = mainHeader.querySelector('.row.sortable-row')
if (firstRow) {
firstRow.outerHTML = header_html
}
// MARK: hamburger menu
(function () {
const menuList = document.querySelector('nav.main-nav ul.mega-menu-content');
if (!menuList) return;
menuList.insertAdjacentHTML('beforebegin', `
<div class="mega-menu-hamburger">
<button class="mega-menu-hamburger-btn" aria-expanded="true" aria-controls="mega-menu-list">
<span></span>
</button>
</div>
`);
menuList.id = menuList.id || 'mega-menu-list';
const hamburgerBtn = document.querySelector('.mega-menu-hamburger-btn');
function slideUp(element, duration = 300) {
element.style.height = element.offsetHeight + 'px';
element.offsetHeight;
element.style.transitionProperty = 'height, margin, padding';
element.style.transitionDuration = duration + 'ms';
element.style.overflow = 'hidden';
element.style.height = '0';
element.style.paddingTop = '0';
element.style.paddingBottom = '0';
element.style.marginTop = '0';
element.style.marginBottom = '0';
window.setTimeout(function () {
element.style.display = 'none';
element.style.removeProperty('height');
element.style.removeProperty('padding-top');
element.style.removeProperty('padding-bottom');
element.style.removeProperty('margin-top');
element.style.removeProperty('margin-bottom');
element.style.removeProperty('overflow');
element.style.removeProperty('transition-duration');
element.style.removeProperty('transition-property');
}, duration);
}
function slideDown(element, duration = 300) {
element.style.removeProperty('display');
let display = window.getComputedStyle(element).display;
if (display === 'none') display = 'flex';
element.style.display = display;
const height = element.scrollHeight;
element.style.overflow = 'hidden';
element.style.height = '0';
element.style.paddingTop = '0';
element.style.paddingBottom = '0';
element.style.marginTop = '0';
element.style.marginBottom = '0';
element.offsetHeight;
element.style.transitionProperty = 'height, margin, padding';
element.style.transitionDuration = duration + 'ms';
element.style.height = height + 'px';
window.setTimeout(function () {
element.style.removeProperty('height');
element.style.removeProperty('overflow');
element.style.removeProperty('transition-duration');
element.style.removeProperty('transition-property');
element.style.removeProperty('padding-top');
element.style.removeProperty('padding-bottom');
element.style.removeProperty('margin-top');
element.style.removeProperty('margin-bottom');
}, duration);
}
function slideToggle(element, duration = 300) {
if (window.getComputedStyle(element).display === 'none') {
slideDown(element, duration);
} else {
slideUp(element, duration);
}
}
if (hamburgerBtn) {
hamburgerBtn.addEventListener('click', function () {
hamburgerBtn.classList.toggle('active');
const isExpanded = hamburgerBtn.classList.contains('active');
hamburgerBtn.setAttribute('aria-expanded', String(isExpanded));
slideToggle(menuList, 250);
});
}
})();

2
wagabunda.net.pl/styles.css
View File

File diff suppressed because one or more lines are too long

2
wagabunda.net.pl/styles.css.map
View File

File diff suppressed because one or more lines are too long

115
wagabunda.net.pl/styles.scss
View File

@@ -349,10 +349,23 @@ body nav.main-nav {
display: block !important;
}
@media (max-width: 500px) {
.additional-separator {
display: none !important;
}
.header-container {
min-height: 36px;
}
}
ul.mega-menu-content {
padding-left: 15px;
padding-right: 15px;
@media (max-width: 500px) {
display: none;
flex-direction: column;
}
> li {
.btn-cart,
.quick-search {
@@ -361,11 +374,20 @@ body nav.main-nav {
> a {
padding: 13px 14px 14px;
@media (max-width: 500px) {
padding: 5px;
min-height: auto !important;
text-align: center;
}
}
.elem-in-nav {
span {
font-size: 16px;
@media (max-width: 500px) {
font-size: 14px;
}
}
}
@@ -439,6 +461,28 @@ body nav.main-nav {
}
}
&.mm-basket-li {
> .btn-cart {
@media (max-width: 500px) {
margin: 0 auto;
}
}
}
&.pull-left {
> .quick-search {
@media (max-width: 500px) {
margin: 0 auto;
}
}
@media (max-width: 500px) {
&.visible-panel {
.quick-search {
bottom: 0;
}
}
}
}
@media (max-width: 820px) {
.mobile-menu-item.sub-menu.full-width-sub-menu {
width: calc(100% - 30px) !important;
@@ -474,6 +518,9 @@ body nav.main-nav {
}
}
}
@media (max-width: 500px) {
width: 100%;
}
}
}
@@ -486,6 +533,74 @@ body nav.main-nav {
}
}
}
.mega-menu-hamburger {
position: relative;
padding: 10px 15px;
line-height: 0;
text-align: center;
@media (min-width: 501px) {
display: none;
}
.mega-menu-hamburger-btn {
position: relative;
border: none;
width: 36px;
height: 36px;
background: #fff;
padding: 0;
margin: 0;
border-radius: 3px;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 8px;
left: 5px;
width: 25px;
height: 2px;
background: $cBlue;
transition: all 250ms ease-in-out;
}
&::after {
content: '';
position: absolute;
top: 26px;
left: 5px;
width: 25px;
height: 2px;
background: $cBlue;
transition: all 250ms ease-in-out;
}
&.active {
&::before {
top: 18px;
transform: rotate(-45deg);
}
&::after {
top: 18px;
transform: rotate(45deg);
}
span {
transform: translateX(calc(100% + 10px));
}
}
span {
position: absolute;
top: 17px;
left: 5px;
width: 25px;
height: 2px;
background: $cBlue;
transition: all 250ms ease-in-out;
}
}
}
}
#widget197464156 {
.promo-box {