mobile menu working
Signed-off-by: Jeff <jeff@gotenzing.com>
Showing
14 changed files
with
256 additions
and
5 deletions
This diff is collapsed.
Click to expand it.
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) { | ... | @@ -103,4 +103,11 @@ function megamenu_override_default_theme($value) { |
| 103 | return $value; | 103 | return $value; |
| 104 | } | 104 | } |
| 105 | add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme'); | 105 | add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme'); |
| 106 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 106 | |||
| 107 | function fixUlisting() { | ||
| 108 | wp_deregister_script( 'megamenu' ); | ||
| 109 | wp_dequeue_script( 'megamenu' ); | ||
| 110 | |||
| 111 | wp_enqueue_script( 'megamenu', get_stylesheet_directory_uri().'/js/maxmegamenu.js' ); | ||
| 112 | } | ||
| 113 | add_action( 'wp_enqueue_scripts', 'fixUlisting', 100 ); | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff is collapsed.
Click to expand it.
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.
This diff is collapsed.
Click to expand it.
| ... | @@ -4,8 +4,8 @@ | ... | @@ -4,8 +4,8 @@ |
| 4 | "compress": { | 4 | "compress": { |
| 5 | "booleans": true, | 5 | "booleans": true, |
| 6 | "conditionals": true, | 6 | "conditionals": true, |
| 7 | "drop_console": true, | 7 | "drop_console": false, |
| 8 | "drop_debugger": true, | 8 | "drop_debugger": false, |
| 9 | "if_return": true, | 9 | "if_return": true, |
| 10 | "join_vars": true, | 10 | "join_vars": true, |
| 11 | "keep_classnames": false, | 11 | "keep_classnames": false, | ... | ... |
| 1 | // Add your custom JS here. | 1 | // Add your custom JS here. |
| 2 | 2 | ||
| 3 | import "./_header_menu"; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 3 | //import "./_header_menu"; | ||
| 4 | |||
| 5 | |||
| 6 | 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>'; | ||
| 7 | |||
| 8 | const pageHeader = document.querySelector("#main-nav"); | ||
| 9 | const toggleMenu = pageHeader.querySelector(".mega-toggle-block"); | ||
| 10 | const menuWrapper = pageHeader.querySelector("#mega-menu-primary"); | ||
| 11 | menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff; | ||
| 12 | |||
| 13 | const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link"); | ||
| 14 | const listWrapper2 = pageHeader.querySelector(".list-wrapper2"); | ||
| 15 | const listWrapper3 = pageHeader.querySelector(".list-wrapper3"); | ||
| 16 | const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper"); | ||
| 17 | const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper"); | ||
| 18 | const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level"); | ||
| 19 | const isVisibleClass = "is-visible"; | ||
| 20 | const isActiveClass = "is-active"; | ||
| 21 | |||
| 22 | toggleMenu.addEventListener("click", function () { | ||
| 23 | menuWrapper.classList.toggle(isVisibleClass); | ||
| 24 | if (!this.classList.contains(isVisibleClass)) { | ||
| 25 | listWrapper2.classList.remove(isVisibleClass); | ||
| 26 | listWrapper3.classList.remove(isVisibleClass); | ||
| 27 | const menuLinks = menuWrapper.querySelectorAll("a"); | ||
| 28 | for (const menuLink of menuLinks) { | ||
| 29 | menuLink.classList.remove(isActiveClass); | ||
| 30 | } | ||
| 31 | } | ||
| 32 | }); | ||
| 33 | |||
| 34 | for (const level1Link of level1Links) { | ||
| 35 | level1Link.addEventListener("click", function (e) { | ||
| 36 | const siblingList = level1Link.nextElementSibling; | ||
| 37 | console.log('clicked level1Links') | ||
| 38 | if (siblingList) { | ||
| 39 | e.preventDefault(); | ||
| 40 | this.classList.add(isActiveClass); | ||
| 41 | const cloneSiblingList = siblingList.cloneNode(true); | ||
| 42 | subMenuWrapper2.innerHTML = ""; | ||
| 43 | subMenuWrapper2.append(cloneSiblingList); | ||
| 44 | listWrapper2.classList.add(isVisibleClass); | ||
| 45 | } | ||
| 46 | }); | ||
| 47 | } | ||
| 48 | |||
| 49 | listWrapper2.addEventListener("click", function (e) { | ||
| 50 | const target = e.target; | ||
| 51 | const parent = target.closest("a"); | ||
| 52 | if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) { | ||
| 53 | const siblingList = target.nextElementSibling; | ||
| 54 | e.preventDefault(); | ||
| 55 | target.classList.add(isActiveClass); | ||
| 56 | const cloneSiblingList = siblingList.cloneNode(true); | ||
| 57 | subMenuWrapper3.innerHTML = ""; | ||
| 58 | subMenuWrapper3.append(cloneSiblingList); | ||
| 59 | listWrapper3.classList.add(isVisibleClass); | ||
| 60 | }else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) { | ||
| 61 | const siblingList = parent.nextElementSibling; | ||
| 62 | e.preventDefault(); | ||
| 63 | parent.classList.add(isActiveClass); | ||
| 64 | const cloneSiblingList = siblingList.cloneNode(true); | ||
| 65 | subMenuWrapper3.innerHTML = ""; | ||
| 66 | subMenuWrapper3.append(cloneSiblingList); | ||
| 67 | listWrapper3.classList.add(isVisibleClass); | ||
| 68 | } | ||
| 69 | }); | ||
| 70 | |||
| 71 | for (const backOneLevelBtn of backOneLevelBtns) { | ||
| 72 | backOneLevelBtn.addEventListener("click", function () { | ||
| 73 | const parent = this.closest(".list-wrapper"); | ||
| 74 | parent.classList.remove(isVisibleClass); | ||
| 75 | // parent.previousElementSibling | ||
| 76 | // .querySelector(".is-active") | ||
| 77 | // .classList.remove(isActiveClass); | ||
| 78 | }); | ||
| 79 | } | ||
| 80 | ... | ... |
| ... | @@ -14,6 +14,8 @@ | ... | @@ -14,6 +14,8 @@ |
| 14 | 14 | ||
| 15 | } | 15 | } |
| 16 | 16 | ||
| 17 | |||
| 18 | |||
| 17 | .branding{ | 19 | .branding{ |
| 18 | display: flex; | 20 | display: flex; |
| 19 | margin-bottom: 0px; | 21 | margin-bottom: 0px; |
| ... | @@ -27,3 +29,16 @@ | ... | @@ -27,3 +29,16 @@ |
| 27 | align-items: flex-start; | 29 | align-items: flex-start; |
| 28 | margin-bottom: 10px; | 30 | margin-bottom: 10px; |
| 29 | } | 31 | } |
| 32 | |||
| 33 | |||
| 34 | @media only screen and (max-width: 1000px) { | ||
| 35 | .branding{ | ||
| 36 | margin-top: 0px; | ||
| 37 | } | ||
| 38 | .site-title{ | ||
| 39 | font-size: 20px; | ||
| 40 | } | ||
| 41 | .navbar-brand{ | ||
| 42 | width:100px; | ||
| 43 | } | ||
| 44 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | 1 | @media only screen and (min-width: 1000px) { | |
| 2 | 2 | ||
| 3 | #mega-menu-wrap-primary{ | 3 | #mega-menu-wrap-primary{ |
| 4 | width: 100%; | 4 | width: 100%; |
| ... | @@ -116,3 +116,155 @@ | ... | @@ -116,3 +116,155 @@ |
| 116 | line-height: 20px; | 116 | line-height: 20px; |
| 117 | font-family: "PT Sans",sans-serif; | 117 | font-family: "PT Sans",sans-serif; |
| 118 | } | 118 | } |
| 119 | .list-wrapper2, | ||
| 120 | .list-wrapper3 { | ||
| 121 | display: none; | ||
| 122 | } | ||
| 123 | |||
| 124 | } | ||
| 125 | |||
| 126 | @media only screen and (max-width: 1000px) { | ||
| 127 | |||
| 128 | |||
| 129 | #mega-menu-primary{ | ||
| 130 | margin-top: 60px !important; | ||
| 131 | padding-top: 20px !important; | ||
| 132 | padding-bottom: 100px !important; | ||
| 133 | overflow-x: scroll !important; | ||
| 134 | height: calc(100vh - 80px) !important; | ||
| 135 | } | ||
| 136 | #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after{ | ||
| 137 | display: none !important; | ||
| 138 | } | ||
| 139 | #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { | ||
| 140 | width: 100%; | ||
| 141 | max-width: 100%; | ||
| 142 | padding: 0px 10%; | ||
| 143 | margin: auto; | ||
| 144 | } | ||
| 145 | |||
| 146 | #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{ | ||
| 147 | left: -100%; | ||
| 148 | |||
| 149 | } | ||
| 150 | #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{ | ||
| 151 | margin-top: 0px; | ||
| 152 | } | ||
| 153 | |||
| 154 | .sub-mobile-menu{ | ||
| 155 | |||
| 156 | .mega-menu-item{ | ||
| 157 | margin-top: 15px !important; | ||
| 158 | } | ||
| 159 | |||
| 160 | .mega-indicator{ | ||
| 161 | margin-top: -50px !important; | ||
| 162 | position: relative !important; | ||
| 163 | margin-right: 0px !important; | ||
| 164 | width: 30px !important; | ||
| 165 | &:after{ | ||
| 166 | margin-right: 0px !important; | ||
| 167 | } | ||
| 168 | } | ||
| 169 | |||
| 170 | |||
| 171 | } | ||
| 172 | |||
| 173 | #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 { | ||
| 174 | margin-left: 20px; | ||
| 175 | color: #555; | ||
| 176 | font-family: inherit; | ||
| 177 | font-size: 14px; | ||
| 178 | text-transform: uppercase; | ||
| 179 | text-decoration: none; | ||
| 180 | font-weight: bold; | ||
| 181 | text-align: left; | ||
| 182 | vertical-align: top; | ||
| 183 | display: block; | ||
| 184 | border: 0; | ||
| 185 | } | ||
| 186 | #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{ | ||
| 187 | width: 100%; | ||
| 188 | margin: 10px auto 0px auto; | ||
| 189 | color:#fff; | ||
| 190 | background-color: #EE0000; | ||
| 191 | border-radius: 1.25rem; | ||
| 192 | text-align: center; | ||
| 193 | height: 2.5rem; | ||
| 194 | margin-top: 0rem; | ||
| 195 | font-size: 18px; | ||
| 196 | position: relative; | ||
| 197 | font-family: "PT Sans",sans-serif; | ||
| 198 | } | ||
| 199 | #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{ | ||
| 200 | width: 100%; | ||
| 201 | margin: 10px auto 0px auto !important; | ||
| 202 | color:#fff; | ||
| 203 | background-color: #EE0000; | ||
| 204 | border-radius: 1.25rem; | ||
| 205 | text-align: center !important; | ||
| 206 | height: 2.5rem; | ||
| 207 | font-size: 18px; | ||
| 208 | position: relative; | ||
| 209 | font-family: "PT Sans",sans-serif; | ||
| 210 | } | ||
| 211 | #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{ | ||
| 212 | width: 100%; | ||
| 213 | margin: 10px auto 0px auto !important; | ||
| 214 | color:#fff; | ||
| 215 | background-color: #EE0000; | ||
| 216 | border-radius: 1.25rem; | ||
| 217 | text-align: center !important; | ||
| 218 | height: 2.5rem; | ||
| 219 | font-size: 18px; | ||
| 220 | position: relative; | ||
| 221 | font-family: "PT Sans",sans-serif; | ||
| 222 | } | ||
| 223 | |||
| 224 | |||
| 225 | .sub-menu-wrapper{ | ||
| 226 | background-color: #fff; | ||
| 227 | width: 100% !important; | ||
| 228 | padding: 0px 10% !important; | ||
| 229 | margin: auto !important; | ||
| 230 | float: none !important; | ||
| 231 | } | ||
| 232 | |||
| 233 | |||
| 234 | } | ||
| 235 | |||
| 236 | |||
| 237 | @media only screen and (max-width: 1000px) { | ||
| 238 | #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{ | ||
| 239 | display: none !important; | ||
| 240 | } | ||
| 241 | .list-wrapper2, | ||
| 242 | .list-wrapper3 { | ||
| 243 | ul.mega-sub-menu{ | ||
| 244 | display: block !important; | ||
| 245 | } | ||
| 246 | } | ||
| 247 | .list-wrapper2, | ||
| 248 | .list-wrapper3 { | ||
| 249 | position: absolute !important; | ||
| 250 | top: 0 !important; | ||
| 251 | left: 0 !important; | ||
| 252 | right: 0 !important; | ||
| 253 | height: 100vh !important; | ||
| 254 | transform: translateX(100%) !important; | ||
| 255 | backface-visibility: hidden !important; | ||
| 256 | transition: transform 0.5s !important; | ||
| 257 | background-color: #fff !important; | ||
| 258 | } | ||
| 259 | |||
| 260 | |||
| 261 | .list-wrapper2.is-visible, | ||
| 262 | .list-wrapper3.is-visible { | ||
| 263 | transform: none !important; | ||
| 264 | } | ||
| 265 | |||
| 266 | .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{ | ||
| 267 | display: none; | ||
| 268 | } | ||
| 269 | |||
| 270 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment