Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
12f15267 by Jeff Balicki
Options

mobile menu working 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 05bdb5e2
Expand all
Inline Side-by-side
Showing 14 changed files with 256 additions and 5 deletions
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -103,4 +103,11 @@ function megamenu_override_default_theme($value) {
return $value;
}
add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme');
\ No newline at end of file
function fixUlisting() {
wp_deregister_script( 'megamenu' );
wp_dequeue_script( 'megamenu' );
wp_enqueue_script( 'megamenu', get_stylesheet_directory_uri().'/js/maxmegamenu.js' );
}
add_action( 'wp_enqueue_scripts', 'fixUlisting', 100 );
\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -4,8 +4,8 @@
"compress": {
"booleans": true,
"conditionals": true,
"drop_console": true,
"drop_debugger": true,
"drop_console": false,
"drop_debugger": false,
"if_return": true,
"join_vars": true,
"keep_classnames": false,
......
// Add your custom JS here.
import "./_header_menu";
\ No newline at end of file
//import "./_header_menu";
var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
console.log('clicked level1Links')
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
}
});
}
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
const parent = target.closest("a");
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
const siblingList = parent.nextElementSibling;
e.preventDefault();
parent.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}
});
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
// parent.previousElementSibling
// .querySelector(".is-active")
// .classList.remove(isActiveClass);
});
}
......
......@@ -14,6 +14,8 @@
}
.branding{
display: flex;
margin-bottom: 0px;
......@@ -27,3 +29,16 @@
align-items: flex-start;
margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
.branding{
margin-top: 0px;
}
.site-title{
font-size: 20px;
}
.navbar-brand{
width:100px;
}
}
\ No newline at end of file
......
@media only screen and (min-width: 1000px) {
#mega-menu-wrap-primary{
width: 100%;
......@@ -116,3 +116,155 @@
line-height: 20px;
font-family: "PT Sans",sans-serif;
}
.list-wrapper2,
.list-wrapper3 {
display: none;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-primary{
margin-top: 60px !important;
padding-top: 20px !important;
padding-bottom: 100px !important;
overflow-x: scroll !important;
height: calc(100vh - 80px) !important;
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after{
display: none !important;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
padding: 0px 10%;
margin: auto;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{
left: -100%;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
margin-top: 0px;
}
.sub-mobile-menu{
.mega-menu-item{
margin-top: 15px !important;
}
.mega-indicator{
margin-top: -50px !important;
position: relative !important;
margin-right: 0px !important;
width: 30px !important;
&:after{
margin-right: 0px !important;
}
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
margin-left: 20px;
color: #555;
font-family: inherit;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
text-align: left;
vertical-align: top;
display: block;
border: 0;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center;
height: 2.5rem;
margin-top: 0rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
.sub-menu-wrapper{
background-color: #fff;
width: 100% !important;
padding: 0px 10% !important;
margin: auto !important;
float: none !important;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu{
display: none !important;
}
.list-wrapper2,
.list-wrapper3 {
ul.mega-sub-menu{
display: block !important;
}
}
.list-wrapper2,
.list-wrapper3 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
transform: translateX(100%) !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #fff !important;
}
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
}
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
display: none;
}
}
\ No newline at end of file
......