jQuery点击打开超级菜单+滚动到点击发生的位置

Question

在移动视口中，从菜单中选择"产品"，然后向下滚动并选择"解决方案"时，页面不会自动向上滚动以查看解决方案及其超级菜单的顶部。

我试着通过添加来调整function showMenu(self)

$([document.documentElement, document.body]).animate({
scrollTop: $(self).offset().top
}, 500);

然而，这次编辑并没有改变任何事情。

window.addEventListener('load', () => { 
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})    
window.addEventListener('resize', () => { 
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});

$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".exo-menu").toggleClass("display");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});

function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$([document.documentElement, document.body]).animate({
scrollTop: $(self).offset().top
}, 500);
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}

.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}

/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}

/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}

/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome 5 Free';
content: 'f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome 5 Free';
content: 'f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
@media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
@media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
@media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
@media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 32px;
}
}
@media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
@media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
@media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
@media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
@media (max-width: 991px) {
.empty {
display: none;
}
}
@media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
@media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none !important;
}
}
@media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
@media (max-width: 768px) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
transform: rotate(90deg);
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: fixed;
right: 2px;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover,
a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome 5 Free';
content: 'f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 10px;
margin-right: -6px;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><span>Product</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li><a href="#">Hardware</a></li>
<li><a href="#">Player Software</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Solutions</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair &amp; Beauty</a> <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More</a> <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li><a href="#">Digital Menu Boards</a></li>
<li><a href="#">Window Signage</a></li>
<li><a href="#">In-Store Signage</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Partner Program</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Resources</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules &amp; more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white"><a href="/pricing/software-only-pricing/">Pricing</a></li>
<a href="#" class="toggle-menu visible-xs-block"><span>|||</span></a>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="#" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="#" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>  
</ul>
</div>
</div>

Answer 1

您需要在单击事件处理程序中使用this.scrollIntoView(true)。这将使mega-drop-down接触视口的顶部边缘
您可以使用输入的参数来获得不同的结果。

window.addEventListener('load', () => { 
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})    
window.addEventListener('resize', () => { 
document.querySelector(':root').style
.setProperty('--vh', window.innerHeight/100 + 'px');
})
$(document).ready(function() {
$(".mega-drop-down").hover(function() {
if (window.innerWidth > 768) {
showMenu(this);
}
});

$(".mega-drop-down").on("click", function() {
if (window.innerWidth <= 768) {
showMenu(this);
this.scrollIntoView(true);  // <---- fix
}
});
$(".toggle-menu").click(function() {
$("#mm-logo").toggleClass("fixed");
$(".exo-menu").toggleClass("display");
$("#mm-button-group").toggle();
$(".mega-menu").addClass("hide-block");
});
});

function showMenu(self) {
$(".mega-menu")
.not($(self).children(".mega-menu").toggleClass("hide-block"))
.addClass("hide-block");
$(self).find("a span").toggleClass("hover");
$([document.documentElement, document.body]).animate({
scrollTop: $(self).offset().top
}, 500);
$(".exo-menu")
.find("a span")
.not($(self).find("a span"))
.removeClass("hover");
}

.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
z-index: 1000;
}
ul.exo-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.cabeza,
ul.manos,
ul.corporal {
list-style-type: none;
padding: 0;
}
.content {
margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.exo-menu {
float: none;
margin: auto;
list-style: none;
position: relative;
}
.exo-menu>li {
display: inline-block;
float: left;
position: relative;
}
.exo-menu>li>a {
color: black;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.exo-menu>li>a:hover {
color: #23ADF8;
}
.exo-menu i {
float: left;
font-size: 18px;
margin-right: 6px;
line-height: 20px !important;
}
li.drop-down:before {
content: "f103";
color: #fff;
font-family: FontAwesome;
font-style: normal;
display: inline;
position: absolute;
right: 6px;
top: 20px;
font-size: 14px;
}
li.drop-down>ul {
left: 0px;
min-width: 230px;
}
.drop-down-ul {
display: none;
}
.flyout-right>ul,
.flyout-left>ul {
top: 0;
min-width: 230px;
display: none;
border-left: 1px solid #365670;
}
.flyout-mega-wrap {
top: 0;
right: 0;
left: 100%;
width: 100%;
display: none;
height: 100%;
padding: 15px;
min-width: 742px;
}
h4.row.mega-title {
color: #838383;
margin-top: 0px;
font-size: 15px;
padding-bottom: 13px;
}
.flyout-mega ul>li>a {
font-size: 90%;
line-height: 25px;
color: #fff;
font-family: inherit;
}
.animated.fadeIn.mega-menu {
margin-top: 8px;
}
.mega-menu {
left: 0;
right: 0;
width: 100vw;
/*display: none;*/
position: fixed;
padding-top: 0;
/*padding-top: 10px;*/
}
.mega-menu-wrap {
background-color: white;
}
.mega-menu ul li a {
line-height: 25px;
font-size: 15px;
color: black;
font-weight: 600;
display: block;
}
/*Blog DropDown*/
.Blog {
left: 0;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Blog .blog-title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
.Blog .blog-des {
color: #ccc;
font-size: 90%;
margin-top: 15px;
}
.Blog a.view-more {
margin-top: 0px;
}

/*Images*/
.Images {
left: 0;
width: 100%;
display: none;
color: #fefefe;
padding-top: 15px;
background: #547787;
padding-bottom: 15px;
}
.Images h4 {
font-size: 15px;
margin-top: 0px;
text-transform: uppercase;
}

/*common*/
.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
background-color: white;
}

/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
display: block;
}
a.toggle-menu {
position: absolute;
right: 10px;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 0px;
transform: rotate(90deg);
margin-top: -13px;
}
.fl-node-5dafd29034e78 {
z-index: 210 !important;
position: relative;
}
.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
z-index: 200;
}
.circle_image02 {
opacity: 1.0 !important;
filter: alpha(opacity=50) !important;
/* For IE8 and earlier */
}
.circle_image02:hover {
opacity: 0.5 !important;
filter: alpha(opacity=100) !important;
/* For IE8 and earlier */
}
.mega-menu-wrap li {
margin-bottom: 22px;
padding-right: 30px;
}
.mm-mm-icon {
vertical-align: top;
margin-right: 14px;
width: 32;
height: 32;
}
.mm-mm-subtext {
display: inline-block;
margin-left: 46px;
font-size: 13px;
}
.mega-drop-down>a>span::after {
font-family: 'Font Awesome 5 Free';
content: 'f107';
padding-left: 5px;
}
.mega-drop-down>a>span.hover::after {
font-family: 'Font Awesome 5 Free';
content: 'f106';
}
.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
color: #23ADF8;
}
.mm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
padding: 10px 10px 10px 35px;
}
.mm-mm-video {
display: inline-block;
background-color: white;
border: 2px solid #EDEDED;
margin-top: 17px;
padding: 13px;
border-radius: 24px;
height: 47px;
width: 161px;
}
.mm-mm-video:hover {
background-color: #23ADF8;
border-color: #23ADF8;
}
.mm-mm-video a {
color: #23ADF8;
}
.mm-mm-video:hover a {
color: white;
}
.mm-mm-video:hover img {
filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover+.mega-menu.hide-block {
display: none;
}
.mm-mm-flyout {
display: inline-block;
width: 100%;
font-size: 15px;
}
.animated.mega-menu {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
color: #23ADF8;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.mm-grid {
width: 400px;
max-width: 100%;
}
h4.row.mega-title {
padding-left: 0;
}
.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1349px) {
.fl-node-5dafd29034e79 {
width: 16%;
}
.fl-node-g84bp2nweskf {
width: 3%;
}
}
@media (min-width: 1300px) {
.mega-menu-wrap {
width: 1280px;
margin: auto;
}
}
@media (max-width: 1299px) {
.mega-menu-wrap {
width: 100%;
}
}
@media (min-width: 1252px) {
.exo-menu>li>a {
display: block;
padding: 30px 22px 32px;
}
}
@media (max-width: 1251px) {
.exo-menu>li>a {
padding: 30px 15px 32px;
}
}
@media (min-width: 769px) and (max-width: 1251px) {
.animated.fadeIn.mega-menu {
padding-top: 32px;
}
}
@media (max-width: 1199px) {
.mega-menu {
width: 100vw;
}
}
@media (max-width: 1151px) {
.fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
display: none;
}
}
@media (max-width: 1025px) {
.fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
display: none;
}
}
@media (min-width: 992px) {
.exo-menu>li:nth-child(1)>a {
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
float: left;
}
.col-md-3 {
width: 25%;
float: left;
padding-left: 0;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
}
@media (max-width: 991px) {
.empty {
display: none;
}
}
@media (min-width: 789px) and (max-width: 800px) {
.exo-menu>li>a {
padding: 30px 12px 32px;
}
}
@media (min-width: 769px) {
.mm-grid {
margin-bottom: 27px;
}
#mm-button-group {
display: none !important;
}
}
@media (min-width: 768px) {
.mega-menu,
.flyout-mega-wrap,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: fixed;
margin-top: 0;
}
.flyout-right>ul {
left: 100%;
}
.flyout-left>ul {
right: 100%;
}
.mega-menu-wrap .row {
margin-right: 0;
margin-left: 0;
padding: 0 15px;
}
}
.mega-menu.hide-block {
display: none !important;
}
@media (max-width: 768px) {
#mm-logo {
position: fixed;
top: 0;
left: 0;
background-color: white;
padding-left: 23px;
}
#mm-logo.fixed {
position: fixed;
top: 0;
background: white;
/*left: 23px;*/
z-index: 55;
}
.admin-bar #mm-logo {
position: fixed;
top: 46px;
}
.fl-page header.fl-builder-content {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.fl-builder-content .fl-node-5dafd29034e79 {
width: calc(100vw - 130px) !important;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 130px !important;
}
.fl-builder-content .fl-node-g84bp2nweskf {
display: none;
}
.fl-module.fl-module-html.fl-node-3p7sb46cwvqu {
position: absolute;
top: 20px;
}
.fl-node-5dafd2ede7f58>.fl-module-content {
margin-left: 0;
}
.exo-menu {
min-height: 58px;
width: 100%;
}
.mega-menu {
padding: 15px;
}
.animated.mega-menu {
padding-left: 22px;
padding-right: 22px;
margin-left: -22px;
margin-right: -22px;
}
.animated.fadeIn.mega-menu {
z-index: 0;
}
.mm-mega-menu-wrap {
box-shadow: none;
}
.mega-menu-wrap {
background-color: transparent;
}
ul.exo-menu.display {
left: 0;
top: 0px;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
min-height: calc((100 * var(--vh)) - 210px);
z-index: 0;
}
.admin-bar ul.exo-menu.display {
min-height: calc(100vh - 256px);
}
a.toggle-menu {
position: fixed;
right: 0;
padding: 8px 20px;
font-size: 27px;
color: black;
top: 14px;
transform: rotate(90deg);
}
.mega-drop-down,
.bg-white {
background-color: white;
}
.mega-drop-down>a>span::after {
float: right;
padding-right: 6px;
}
.exo-menu.display a.toggle-menu span {
display: none;
}
.exo-menu.display a.toggle-menu {
position: fixed;
right: 2px;
padding: 4px 22px;
font-size: 27px;
z-index: 55;
color: #212121;
}
.exo-menu.display a.toggle-menu:hover,
a.toggle-menu:hover {
color: #212121;
}
.exo-menu.display a.toggle-menu::before {
display: block !important;
font-family: 'Font Awesome 5 Free';
content: 'f00d';
transform: rotate(90deg);
color: #B2B2B2;
font-weight: 900;
margin-top: 10px;
margin-right: -6px;
}
.exo-menu>li>a {
display: none;
padding: 30px 8px 32px;
}
.exo-menu>li {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #EDEDED;
}
.exo-menu>li.mm-li-button {
border-bottom: none;
}
.display.exo-menu>li {
width: calc(100vw - 44px);
display: block;
float: none;
}
.display.exo-menu>li>a {
display: block;
padding: 20px 0;
font-size: 24px;
}
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
position: relative;
}
.mega-menu {
background-color: #F8F8F8;
}
#menu-item-1225 {
margin-top: -5px;
}
.fl-builder-content .fl-node-5dafd29034e7a {
width: 40px !important;
}
#see-all-features {
content: url('/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
}
#just-4-steps {
content: url('/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
}
#mm-button-group {
display: none;
}
#mm-button-group .mm-mm-button a.fl-button {
font-family: Poppins, sans-serif;
font-weight: 600;
font-size: 16px;
border: 1px solid #23ADF8 !important;
background-color: white !important;
background-clip: border-box;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
text-align: center;
/*margin: 10px 0;*/
}
.fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
border: 1px solid #EDEDED !important;
}
.fl-page .mm-mm-button a.fl-button span {
color: #23ADF8 !important;
}
#mm-button-group {
position: relative;
/*bottom: 5px;*/
list-style-type: none;
padding-left: 0;
width: 100%;
background-color: white;
padding: 10px 22px 20px 22px;
/*margin-bottom: 22px;*/
}
#mm-button-group li {
padding: 10px 0 0 0;
background-color: white;
}
.container-fluid.megamenusip {
display: flex;
flex-wrap: wrap;
top: 66px;
position: fixed;
left: 0;
width: 100vw;
height: calc(100% - 56px);
padding-left: 0;
padding-right: 0;
justify-content: stretch;
overflow-y: scroll;
}
header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
display: -webkit-box;
display: -webkit-flex;
background: white;
position: fixed;
display: -ms-flexbox;
display: flex;
}
h4.row.mega-title {
padding-top: 11px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
<div class="container-fluid megamenusip">
<ul class="exo-menu">
<li class="mega-drop-down"><a href="#"><span>Product</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Instant Digital Signage Platform</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get the Player</h4>
<ul class="manos">
<li><a href="#">Hardware</a></li>
<li><a href="#">Player Software</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">What is Instant Digital Signage?</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
<div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
<button class="mm-mm-video">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Solutions</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Industries</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair &amp; Beauty</a> <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More</a> <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">Use Cases</h4>
<ul class="manos">
<li><a href="#">Digital Menu Boards</a></li>
<li><a href="#">Window Signage</a></li>
<li><a href="#">In-Store Signage</a></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title">About Mandoe</h4>
<ul class="manos">
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Partner Program</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="mega-drop-down"><a href="#"><span>Resources</span></a>
<div class="animated fadeIn mega-menu hide-block">
<div class="mm-mega-menu-wrap">
<div class="mega-menu-wrap">
<div class="row">
<div class="col-md-3">
<h4 class="row mega-title">Learn about the product</h4>
<ul class="cabeza">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
</ul>
</div>
<div class="col-md-3">
<h4 class="row mega-title empty">&nbsp;</h4>
<ul class="corporal">
<li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules &amp; more.</span></li>
</ul>
</div>
<div class="col-md-2">
<h4 class="row mega-title">Get in Touch</h4>
<ul class="manos">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="row mega-title">Learn how it works</h4>
<div class="mm-grid">
<div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
<div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
<button class="mm-mm-video">
<a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bg-white"><a href="/pricing/software-only-pricing/">Pricing</a></li>
<a href="#" class="toggle-menu visible-xs-block"><span>|||</span></a>
</ul>
<ul id="mm-button-group">
<li class="mm-li-button" id="mm-mm-button-1">
<div class="fl-button-wrap mm-mm-button">
<a href="#" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Start Free Trial</span>
</a>
</div>
</li>
<li class="mm-li-button" id="mm-mm-button-2">
<div class="fl-button-wrap mm-mm-button">
<a href="#" target="_self" class="fl-button" role="button">
<span class="fl-button-text">Log In</span>
</a>
</div>
</li>  
</ul>
</div>
</div>