[Resolved] Create Mega menu styling

[Elvin]

Hi,

When I check the CSS I think this is made with only CSS right? So if that would be possible, I’m very happy 🙂

It’s using a script. This is what it’s using.
https://17of081nve7ovz5by1aua5a2-wpengine.netdna-ssl.com/wp-content/themes/rey/assets/js/rey.min.js?ver=1.9.1

it’s using a mouseover listener rather than pseudo class :hover.

You can actually check it yourself by inspecting the page and checking the page’s eventlisteners as shown here: https://share.getcloudapp.com/jkuYBpxj

[nik9]

Ahhh cool. Didn’t know that!

So this means, I can reuse the whole script and the CSS classes? Never did that before. If yes, this would be my next steps:

1. Copy the script and hook in via GP elements
2. Add the CSS classes for every menu item

CSS
rey-mainMenu rey-mainMenu--desktop id--mainMenu--desktop

Script
!function(r){"use strict";jQuery.migrateMute=!0;r.reyHelpers=new function(){var e=this;this.$body=r("body"),this.params=r.extend({icons_path:""},"object"==typeof reyParams&&reyParams?reyParams:{}),this.isArray=Array.isArray||function(e){return"[object Array]"===toString.call(e)},this.debounce=function(t,n,i){var s,a,r,o,l,c=function(){var e=Date.now-o;e<n&&0<=e?s=setTimeout(c,n-e):(s=null,i||(l=t.apply(r,a),s||(r=a=null)))};return function(){r=this,a=arguments,o=Date.now;var e=i&&!s;return s||(s=setTimeout(c,n)),e&&(l=t.apply(r,a),r=a=null),l}},this.matchYoutubeUrl=function(e){var t=/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;return!!e.match(t)&&e.match(t)[1]},this.isValidURL=function(e){try{return new URL(e),!0}catch(e){return!1}},this.setProperty=function(e,t,n){n||(n=document.documentElement),n.style.setProperty(e,t)},this.getProperty=function(e,t,n){return t||(t=document.documentElement),!0===n?getComputedStyle(t).getPropertyValue(e):t.style.getPropertyValue(e)},this.doScroll={isDisabled:!1,disable:function(){r("html, body").addClass("--no-scroll").css("overflow","hidden")},enable:function(){r("html, body").removeClass("--no-scroll").css("overflow","")}},this.ls={set:function(e,t,n){if(e&&t&&n){var i={value:t,expires_at:(new Date).getTime()+n/1};localStorage.setItem(e.toString(),JSON.stringify(i))}},get:function(e){if(!e)return null;var t=JSON.parse(localStorage.getItem(e.toString()));if(null!==t){if(!(null!==t.expires_at&&t.expires_at<(new Date).getTime()))return t.value;localStorage.removeItem(e.toString())}return null}},this.expiration={min:6e4,hr:36e5,day:864e5,week:6048e5,month:18144e6,year:217728e6},this.headerOverlayOpened=!1,this.overlay=function(e,t,n,i){var s=e+"-overlay--is-opened";"open"==t?(this.$body.addClass(s),"header"===e&&(this.headerOverlayOpened=!0)):"close"==t&&(this.$body.removeClass(s).removeClass("--overlay-darken").removeClass(i),"header"===e&&(this.headerOverlayOpened=!1)),n&&this.$body.addClass("--overlay-darken"),i&&this.$body.addClass(i)},this.getRandomInt=function(e){return Math.floor(Math.random()*Math.floor(e))},this.sprintf=function(e){var t=Array.prototype.slice.call(arguments,1),n=0;return e.replace(/%s/g,function(){return t[n++]})},this.filters={},this.addFilter=function(e,t,n,i){var s;return n=parseInt(n,10),isNaN(n)&&(n=10),i=parseInt(i,10),isNaN(i)&&(i=1),s=t+"_"+n,this.filters[e]||(this.filters[e]={}),this.filters[e][n]||(this.filters[e][n]={}),this.filters[e][n][s]={func:t,accepted_args:i},!0},this.removeFilter=function(e,t,n){var i;return n=parseInt(n,10),isNaN(n)&&(n=10),i=t+"_"+n,!!(this.filters[e]&&this.filters[e][n]&&this.filters[e][n][i])&&(delete this.filters[e][n][i],!0)},this.applyFilter=function(e,i){var t,s=r.makeArray(arguments);return s.splice(0,1),this.filters[e]&&(t=this.filters[e],r.each(t,function(e,t){r.each(t,function(e,t){var n=t.func;n instanceof Function?i=n.apply(null,s):window[n]&&window[n]instanceof Function&&(i=window[n].apply(null,s))})})),i},this.youTubeApiLoaded=!1,this.elementor_edit_mode=0<r("body.rey-elementor-edit-mode").length,this.customizer_preview=0<r("body.customizer-preview-mode").length,this.is_edit_mode=this.elementor_edit_mode||this.customizer_preview,this.$sitePreloader=r("#rey-site-preloader"),this.$container_size=parseInt(r("html").attr("data-container")||1440),this.is_rtl=!!r("body.rtl").length,this.is_global_section_mode=0<r("body.single-rey-global-sections").length,this.refresh=function(){this.is_touch_device=function(){var e=" -webkit- -moz- -o- -ms- ".split(" ");if("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)return!0;var t,n=["(",e.join("touch-enabled),("),"heartz",")"].join("");return t=n,window.matchMedia(t).matches},this.is_mobile=window.matchMedia("(max-width: 767px)").matches,this.is_tablet=window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches,this.is_desktop=window.matchMedia("(min-width: 1025px)").matches,this.is_desktop_touch=window.matchMedia("(min-width: 1025px)").matches&&this.is_touch_device(),this.adminBar=0<r("body.admin-bar").length?this.is_desktop?32:46:0},this.refresh(),r(window).on("resize",e.debounce(function(){e.refresh()},300))};var e=function(){this.init=function(){r(document).trigger("reytheme/before_init"),this.events(),this.cssJs(),this.checkXl(),this.searchForm(),this.general_html(),this.animateItems(),this.initMainMenus(),this.initSlick(),r(document).trigger("reytheme/init")},this.elements={$body:r(document.body),$header:r(".rey-siteHeader"),$site_overlay:r(".rey-overlay--site"),$cssJsStylesheet:r("style#rey-js-css")},this.cssJs=function(){var e="",t="";this.getScrollbarSize(),t+="--site-width:"+r.reyHelpers.applyFilter("rey/siteWidth",(document.documentElement.clientWidth||document.body.clientWidth)+"px")+";",t+="--scrollbar-width:"+this.scrollbarSize+"px;",this.elements.$header.length&&!this.elements.$header.hasClass("rey-siteHeader--default")&&(t+="--header-default--height:"+r.reyHelpers.applyFilter("rey/headerHeight",this.elements.$header.outerHeight()+"px")+";"),""!==t&&(e+=":root{"+t+";}"),this.elements.$cssJsStylesheet.length||(this.elements.$cssJsStylesheet=r('<style id="rey-js-css" />').appendTo(r("head"))),r(document).trigger("rey/cssjs",[this.elements.$cssJsStylesheet,e,this]),this.elements.$cssJsStylesheet.text(e)},this.events=function(){var n=this;r(document).on("keyup",function(e){27==e.keyCode&&r(document).trigger("rey/close_panels")}),r(".rey-overlay").on("click",function(){r(document).trigger("rey/close_panels")}),r(window).on("resize",r.reyHelpers.debounce(function(){n.cssJs(),n.checkXl()},50)),this.elements.$header.on("lazyloaded",function(e){n.cssJs()}),r(".rey-header-dropPanel-btn").on("click",function(e){if(e.preventDefault(),!r.reyHelpers.is_global_section_mode){var t=r(this),n=t.parent();t.closest(".--dp-hover").length||(n.hasClass("--active")?n.removeClass("--active"):(r(document).trigger("rey/close_panels",["drop-panel"]),t.hasClass("--no-overlay")||r.reyHelpers.overlay("header","open"),n.addClass("--active")))}}),r(document).on("rey/close_panels",function(e,t){"drop-panel"!==t&&r(".rey-header-dropPanel").removeClass("--active")}),r(document).on("click",".js-copy-url",function(e){e.preventDefault();var t=r("<input>");r("body").append(t),t.val(r(this).attr("data-url")).select(),document.execCommand("copy"),t.remove(),r(this).addClass("--copied")}),r(document).on("rey/site_loaded",function(){n.elements.$body.addClass("site-preloader--loaded")}),r(document).on("rey/close_panels",function(e,t){"main-menu"!==t&&(r.reyHelpers.overlay("site","close"),r.reyHelpers.overlay("header","close"),r.reyHelpers.scrollDisabled&&r.reyHelpers.doScroll.enable())}),r(document).on("rey/post/loaded",function(e,t){n.general_html(t)}),r(document).on("rey/refresh_html",function(e,t){n.blogColumns(t)}),function(e){var a=function(e,t){var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,!0,!0,e.target),e.target.dispatchEvent(n),n=null,!1},r=!0,o={x:0,y:0},l={x:0,y:0},t={touchstart:function(e){o={x:e.touches[0].pageX,y:e.touches[0].pageY}},touchmove:function(e){r=!1,l={x:e.touches[0].pageX,y:e.touches[0].pageY}},touchend:function(e){if(r)a(e,"fc");else{var t=l.x-o.x,n=Math.abs(t),i=l.y-o.y,s=Math.abs(i);20<Math.max(n,s)&&a(e,s<n?t<0?"swl":"swr":i<0?"swu":"swd")}r=!0},touchcancel:function(e){r=!1}};for(var n in t)e.addEventListener(n,t[n],!1)}(document)},this.getScrollbarSize=function(){var e=document.createElement("div");e.setAttribute("style","width: 100px; height: 100px; overflow: scroll; position: absolute; left: -200vw;"),document.body.appendChild(e),this.scrollbarSize=e.offsetWidth-e.clientWidth,document.body.removeChild(e)},this.checkXl=function(){var n=r(window).width(),i=r.reyHelpers.$container_size,s=this;r("html").attr("data-xl",function(){var e,t=1025;return navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)||(t-=s.scrollbarSize),n<i&&n<t?e=0:i<n?e=2:n<i&&t<=n&&(e=1),e})},this.searchForm=function(){var e=r(".js-rey-headerSearch-form"),t=e.parent(),n=function(){t.removeClass("--active")};e.on("click",function(){t.hasClass("--active")?n():(r(document).trigger("rey/close_panels",["header-search-form"]),r.reyHelpers.overlay("header","open"),t.addClass("--active"))}),r(document).on("rey/close_panels",function(e,t){"header-search-form"!==t&&n()})},this.initMainMenus=function(e){e=e||r(document);var n=this;r(".rey-mainNavigation.rey-mainNavigation--desktop",e).each(function(e,t){Object.create(n.main_menu).init(r(t),n)})},this.main_menu={windowEdge:r(window).width(),init:function(e,t){this.$mainMenu=e,this.$mainMenu.length&&(this.$mobileBtn=this.$mainMenu.prevAll(".rey-mainNavigation-mobileBtn"),this.$mobileNav=this.$mainMenu.nextAll(".rey-mainNavigation.rey-mainNavigation--mobile"),this.id=this.$mainMenu.attr("data-id"),this.$t=t,this.delays=!r.reyHelpers.is_edit_mode&&r.reyHelpers.params.theme_js_params.menu_prevent_delays,this.createSubmenuIndicators(),this.createBadges(),this.makeAcc(),this.events())},createBadges:function(){r([".menu-item.--badge-green",".menu-item.--badge-red",".menu-item.--badge-orange",".menu-item.--badge-blue",".menu-item.--badge-accent"].join(","),this.$mainMenu).each(function(e,t){var n=r(t).children("a");r('<i class="--menu-badge"></i>').text(n.attr("title")).prependTo(n.children("span"))})},createSubmenuIndicators:function(){var a=this;r.each(r(".menu-item-has-children",this.$mainMenu),function(e,t){if(!r(".--submenu-indicator",t).length){var n=t,i=a.$mainMenu.attr("data-sm-indicator"),s=r(t).hasClass("depth--0");s||(n=r(" > a",t)),r('<i class="--submenu-indicator --submenu-indicator-'+i+'"></i>').appendTo(n),s&&a.$mainMenu.children("ul").hasClass("--submenu-top")&&r('<i class="__submenu-top-indicator"></i>').appendTo(n),"none"!==i&&r(" > a",t).addClass("--has-indicator")}}),r.each(r(".menu-item-has-children > a > span",this.$mobileNav),function(e,t){r('<i class="--submenu-indicator --submenu-indicator-'+a.$mainMenu.attr("data-sm-indicator")+'"></i>').prependTo(t)})},events:function(){var i=this;r(document).on("rey/close_panels",function(e,t){t!=="mobile-menu"+i.id&&i.closeMobileMenu()});var s,t,n=function(){r.reyHelpers.overlay("header","close",!1,"--src-menu")};r(".rey-mainMenu.rey-mainMenu--desktop > .menu-item-has-children",this.$mainMenu).on("mouseenter",function(e){var t=r(this);r(document).trigger("rey/close_panels",["main-menu"]);var n=function(){r.reyHelpers.params.theme_js_params.menu_hover_overlay&&!r.reyHelpers.headerOverlayOpened&&r.reyHelpers.overlay("header","open",!1,"--src-menu"),t.addClass("--hover").attr("aria-expanded","true")};i.delays?n():s=setTimeout(function(){n()},parseFloat(r.reyHelpers.params.theme_js_params.menu_items_hover_timer))}).on("mouseleave",function(e){clearTimeout(s),r(this).removeClass("--hover"),r(this).attr("aria-expanded","false")}),r(".rey-mainMenu.rey-mainMenu--desktop > .menu-item:not(.menu-item-has-children)",this.$mainMenu).on("mouseenter",function(e){n()}),r(".rey-mainMenu.rey-mainMenu--desktop",this.$mainMenu).on("mouseleave",function(e){n()}),r(".rey-mainMenu.rey-mainMenu--desktop > .menu-item .menu-item-has-children",this.$mainMenu).on("mouseenter",function(e){r(e.currentTarget).addClass("--hover")}).on("mouseleave",function(e){r(e.currentTarget).removeClass("--hover")}),r(".rey-mainMenu.rey-mainMenu--desktop",this.$mainMenu).on("mouseenter",function(e){t=setTimeout(function(){i.$mainMenu.addClass("--active")},parseFloat(r.reyHelpers.params.theme_js_params.menu_hover_timer))}).on("mouseleave",function(e){clearTimeout(t),i.$mainMenu.removeClass("--active")}),this.$mobileBtn.on("click",function(e){r.reyHelpers.is_global_section_mode||(e.preventDefault(),r(document).trigger("rey/close_panels",["mobile-menu"+i.id]),r.reyHelpers.overlay("header","open"),r.reyHelpers.doScroll.disable(),i.$mobileNav.addClass("--is-active"),i.$t.elements.$body.addClass("--mobileNav--active"))}),r(".rey-mobileMenu-close",this.$mobileNav).on("click",function(e){r.reyHelpers.is_global_section_mode||(e.preventDefault(),i.closeMobileMenu())}),r(".rey-mainMenu-mobile .menu-item-has-children > a",this.$mobileNav).on("click",function(e){if(!r.reyHelpers.is_global_section_mode){var t=r(this);t.siblings().is(".sub-menu")&&(e.preventDefault(),t.next().slideToggle())}}),r(".rey-mainMenu--desktop .sub-menu",this.$mainMenu).each(function(e,t){r("> li > a > span",t).each(function(e,t){r(t).css({"transition-delay":.03*e+"s"})})}),r("ul.rey-mainMenu-mobile",this.$mobileNav).each(function(e,t){r("> li > a > span",t).each(function(e,t){r(t).css({"transition-delay":.03*e+.3+"s"})})}),r(".rey-mainMenu.rey-mainMenu--desktop .menu-item-has-children",this.$mainMenu).on("mouseenter",function(e){var t=r(e.currentTarget).children(".sub-menu");0!==t.length&&(t.removeClass("--reached-end"),t.offset().left+t.width()>i.windowEdge&&t.addClass("--reached-end"))}),r(".menu-item > a[href*='#']:not([href='#'])",this.$mobileNav).on("click",function(e){if(!r.reyHelpers.is_global_section_mode){var t=r(this).attr("href");t.substring(0,t.indexOf("#"))===window.location.origin+window.location.pathname&&e.preventDefault(),i.closeMobileMenu()}}),r(window).on("resize",r.reyHelpers.debounce(function(){i.windowEdge=r(window).width()},500)),r(document).on("keyup",function(e){27==e.keyCode&&r(".rey-mainMenu.rey-mainMenu--desktop > .menu-item-has-children",i.$mainMenu).removeClass("--hover")})},makeAcc:function(){if(r.reyHelpers.applyFilter("rey/main_menu/a11y",!0)){var n=this;this.$popupItems=r(".menu-item-has-children.depth--0, .menu-item-has-children.--is-regular .menu-item-has-children",this.$mainMenu),this.$popupItems.attr({"aria-haspopup":"true","aria-expanded":"false"}),r(".rey-mega-gs a, .sub-menu a",this.$popupItems).attr("tabindex","-1"),r(document).on("keydown",function(e){if(9!==e.keyCode){if(-1!==[13,32].indexOf(e.keyCode)){var t=r('.menu-item[aria-haspopup="true"] > a:focus',n.$mainMenu).parent("li");t.length&&(e.preventDefault(),t.each(function(e,t){r(t).attr("aria-expanded","true").trigger("mouseenter"),r(".rey-mega-gs a, > .sub-menu > li > a",t).removeAttr("tabindex")}))}27==e.keyCode&&i()}});var e=!1;r(".depth--0 > a",this.$mainMenu).on("mousedown",function(){e=!0}).on("focusin",function(){e||i(),e=!1});var i=function(){var e=r('.menu-item[aria-haspopup="true"][aria-expanded="true"]',n.$mainMenu);e.length&&(e.attr("aria-expanded","false").trigger("mouseleave"),r(".rey-mega-gs a, .sub-menu a",e).attr("tabindex","-1"))}}},closeMobileMenu:function(){r.reyHelpers.is_desktop||r.reyHelpers.overlay("header","close"),this.$mobileNav.removeClass("--is-active"),r.reyHelpers.doScroll.enable(),this.$t.elements.$body.removeClass("--mobileNav--active")}},this.initSlick=function(){r(".rey-slick[data-slick]").slick({dotsClass:"rey-slick__dots",rows:0,rtl:r.reyHelpers.is_rtl})},this.general_html=function(e){var t=r(e||document);r(".rey-postContent p > iframe",t).wrap("<div class='embed-responsive embed-responsive-16by9'></div>");var n=r(".rey-header-dropPanel",t);n.length&&n.offset().left<r(window).width()/2&&n.addClass("--left"),r(".u-toggle-text").each(function(e,t){var n=r(t);t.style.setProperty("--toggle-height",n.css("line-height")),n.children("button").on("click",function(e){e.preventDefault(),n.toggleClass("--collapsed")})}),r(".u-toggle-text-next-btn").each(function(e,t){var n=r(t);n.next(".btn").on("click",function(e){e.preventDefault(),n.toggleClass("--expanded")})}),r(document).on("click",".js-toggle-target",function(){var e=r(this),t=r(e.attr("data-target")),n=r(e.attr("data-target-class"));t.length&&(e.toggleClass("--toggled"),t.slideToggle("fast")),n.length&&(e.toggleClass("--toggled"),n.toggleClass("--toggled"))}),r(".js-check-empty").each(function(e,t){0===r(t).children().length&&r(t).addClass("--empty")}),r.each({".tabs.wc-tabs":"rey-wcTabs-wrapper"},function(e,t){r(e).wrap('<div class="'+t+'" />')}),r(document).trigger("rey/refresh_html",[e,this])},this.$blogColumnsMasonry=!1,this.blogColumns=function(e){var t=this;if(void 0!==r.fn.masonry&&void 0!==r.fn.imagesLoaded){var n=r(".rey-siteMain[class*='blog--columns-']:not(.blog--columns-1) .rey-postList");n.length&&!r.reyHelpers.is_mobile&&n.imagesLoaded(function(){t.$blogColumnsMasonry?t.$blogColumnsMasonry.masonry("appended",e):(t.$blogColumnsMasonry=n.masonry({itemSelector:".rey-postItem",percentPosition:!0,isInitLayout:!1,originLeft:!r.reyHelpers.is_rtl}),t.$blogColumnsMasonry.on("layoutComplete",function(){t.animateItems(e)}),t.$blogColumnsMasonry.masonry())})}},this.animateItems=function(e){var i=".is-animated-entry";"undefined"!=typeof ScrollOut?setTimeout(function(){var n;ScrollOut({targets:(n=[],void 0!==e&&!1!==e?e.each(function(e,t){r(t).hasClass(i)||n.push(t)}):n=document.querySelectorAll(i),n),once:!0,onShown:function(e,t,n){r(e).addClass("--animated-in").css("transition-delay",.05*t.index+"s")}})},10):void 0!==e&&e.addClass("--animated-in")},this.init()};r(document).ready(function(){r.reyTheme=new e}),r(window).load(function(){0<r.reyHelpers.$sitePreloader.length&&!r.reyHelpers.is_edit_mode&&r.reyHelpers.$sitePreloader.fadeOut("fast",function(){r(document).trigger("rey/site_loaded")})})}(jQuery);

[Elvin]

Not exactly sure if it will work.

And I believe you’re better of writing something for this from scratch rather than trying to make this work as there’s too many things in it to fully parse what it totally does for the site.

There are multiple ways of doing this. While the reference site seems to be doing it with scripts, I believe you can do it with only CSS as well.

A quick Google search should give you ideas on how to do this.

I did one and I’ve already found a few.

CSS approach.
https://stackoverflow.com/questions/54616139/how-to-animate-underline-from-left-to-right
https://stackoverflow.com/questions/40242378/underline-from-left-to-right-on-hover-in-and-out

You just need to change the selector to match the menu-items on your site.

[nik9]

Oh yeah! perfect. Even better with only CSS!

I was able to implement it! I didn’t check for a CSS solutions because I thought we need js because we was only talking about js to do this! haha Thanks elvin. Next time I will search first for a CSS solution!

Its actually working good. I only have a small issue…

The underline should end at the last letter from the word. But it fills the whole span tag when the class dropdown-menu-toggle is applied.

https://ibb.co/f0mxpB9

.secondary-navigation .main-nav ul li a span {
  padding-bottom:5px;
  background-image: linear-gradient(#000, #000);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.secondary-navigation .main-nav ul li a span:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
} 

[Elvin]

The underline should end at the last letter from the word. But it fills the whole span tag when the class dropdown-menu-toggle is applied.

I’m afraid we can’t do anything about this without removing or hiding the icon as it’s a part of the menu-item.

The next best thing we could do is to reduce the dropdown menu toggle’s padding-right so the underline atleast stops exactly where the arrow ends.

We can do it with this CSS:

.secondary-navigation .menu-item-has-children .dropdown-menu-toggle {
    padding-right: 0;
}

Or we can just completely hide the arrow since you’re using dropdown on hover anyway.

span.dropdown-menu-toggle, span.dropdown-menu-toggle:before {
    display: none;
    padding: 0 !important;
}

[nik9]

Hey Elvin,

Okey.. so then I would hide the arrow’s.

Thanks a lot to get this to work! 🙂

Cheers

[Elvin]

No problem. 😀

[Author]

Posts