2 Frame Tabbed Menu

Ei Mega Menu ta ektu complicated chilo. Eita Max Mega Menu plugin diyei kora hoyeche. Main challenge ta chilo Mega Menu ta k 2 frame e enable kora.

2 frame means, jokhon user top label Menu Item (Example: Programs) e hover korbe, tokhn sub item gula niche submenu akare asbe. But jokhn user ei sub items (Example: HVAC, Boiler etc) e hover korbe tokhn right side e full size Mega Menu enable hobe.

And Shudhu 1st item chara baki menu item gular normal dropdown hobe, kono mega menu hobe na and sei dropdown gular design o different.

What we did actually:
1st menu item ta jehetu onek ta tab er moto, so amra mega menu enable kore Mega Menu Mode ‘Mega Menu – Tabbed’ select kore diyechi. Then prottekta mega menu item er jonno alada kore library te layout create kore oigular shortcode bosiye diyechi and properly styling korechi css and Mega Menur Backend theme settings theke. Now the Mega Menu is ready but that’s not a 2 framed mega menu as client’s requirement, so we had to do a few css tweaks.

We have used some cool features of css such as :has(), :not(). These pseudo classes allow to apply conditional properties based on childrens or siblings. Comment box e shob css diye dicchi, so that you can easily use them. Thanks

/**Mega Menu**/
body .mega_menu_btn{
    text-transform: capitalize !important;
}
body .mega_menu_btn:after{
    display: inline !important;
}
body #page-container .mega_menu_titl p{
    margin-bottom: 0 !important;
}
body .main_mega_menu ul.mega-menu{
    display: flex !important;
    justify-content: right !important;
}
body #page-container #et-boc .main_menu_Section ul > li > a{
    min-height: unset !important;
	padding: 0 !important;
}
body #page-container #et-boc .main_menu_Section ul li.menu_btn{
	padding: 0 !important;
}
/******Menu Button CSS*****/
body #page-container #et-boc .main_menu_Section ul li.menu_btn a{
    padding: 12px 32px !important;
	font-size: 20px;
	line-height: 1em;
	font-weight: 700 !important;
	background: rgba(0, 118, 191, 0.2);
	border: 3px solid #0076BF !important;
	border-radius: 30px;
	top: unset;
	color: #fff !important;
}
body #page-container #et-boc .main_secondary_menu ul li.menu_tagline{
	display: none;
}
body #page-container #et-boc .main_menu_Section ul.mega-menu li.menu_btn{
	margin-left: 40px !important;
}
body #page-container #et-boc .main_menu_Section ul li.menu_btn a:hover{
	background: #0076BF;
}
body #page-container #et-boc .main_menu_Section ul.mega-menu > li:not(:first-child){
	margin-left: 60px;
}

body #page-container .main_menu_r{
    display: grid;
    grid-template-columns: auto 1fr;
}
body #page-container .main_menu_r > .et_pb_column{
    width: 100%;
    order: unset;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item{
    width: calc(20% - 6px) !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item > a{
    width: 100%;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu{
    padding: 22.5px 10px !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li:first-child .mega-sub-menu{
    border: none !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item a.mega-menu-link{
    padding: 3px 8px !important;
	border-bottom: 1px solid #fff;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item:last-child a.mega-menu-link{
	border-bottom: none;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu .mega-sub-menu:before{
    content: '';
    width: 2px;
    height: calc(100% - 40px);
    position: absolute;
    left: 0;
    top: 50%;
	transform: translateY(-50%);
    background: #fff;
    display: block;
	z-index: 1;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu .mega-sub-menu{
    width: 80% !important;
	left: 20%;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item{
    padding: 0 20px;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu .mega-sub-menu > li{
	transform: unset !important;
	padding: 0 !important;
}
body #page-container #et-boc .main_menu_Section ul.mega-menu > li > a > .mega-indicator {
    display: none !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-flyout ul{
	width: fit-content;
	left: -3vw;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-flyout ul li{
	width: max-content !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-flyout ul li a{
	padding: 5px 12px !important;
	width: initial;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-flyout ul li a{
    line-height: 1.14em;
}
body .main_secondary_menu #menu-secondary-menu li{
    margin-top: 0;
}
body .main_secondary_menu #menu-secondary-menu li a{
    padding-bottom: 0;
}
body #page-container .main_mobile_menu ul li a{
    opacity: 1 !important;
	background: transparent;
}
body #page-container .main_mobile_menu ul.et_mobile_menu li{
    margin: 10px 0;
}
body #page-container .main_mobile_menu ul.et_mobile_menu > li:first-child{
	margin-top: 0;
}
body #page-container .main_mobile_menu ul.et_mobile_menu > li:last-child{
	margin-bottom: 0;
}
body #page-container .main_mobile_menu ul.et_mobile_menu li .sub-menu-toggle {
    background: #2C2C2C;
    height: 25px;
    width: 25px;
}
body #page-container .main_mobile_menu ul.et_mobile_menu li .sub-menu-toggle:before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -53%);
}
body #page-container .main_mobile_menu ul.et_mobile_menu li ul{
    margin-left: 10px;
}
body #page-container .main_mobile_menu .et_pb_menu__logo {
    margin-bottom: 15px;
    margin-right: 0 !important;
}
/**1st phase of Mega Menu**/
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu{
	min-height: 338px !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu{
    width: fit-content;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:has(li:hover) {
    width: 100%;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu > li ul{
	opacity: 0 !important;
	max-width: 0;
	transition: max-width .3s ease-in-out;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu > li:hover ul{
	opacity: 1 !important;
	max-width: 100%;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:not(:has(li:hover)) > li{
	min-width: 222px;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:not(:has(> li:hover)){
    margin-left: 20vw;
    transition: .5s ease-in-out;
}
body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item > .mega-sub-menu {
	top: 100%;
}
body #page-container #et-boc .main_menu_Section ul.mega-menu > li:not(:last-child){
    padding: 38.2px 0; 
}
body .main_mega_menu .mega-sticky.mega-stuck{
	top: unset !important;
}
body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item:not(:hover) a.mega-menu-link{
	background: transparent !important;
}
@media (min-width: 981px) and (max-width: 1350px){
	body #page-container #et-boc .main_menu_Section ul.mega-menu > li:not(:first-child){
		margin-left: 30px;
	}
	body #page-container #et-boc .main_menu_Section .mega-menu ul li a,
	body .mega_menu_titl{
		font-size: 16px !important;
	}
	body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:has(li:hover){
		width: calc(100% + 160px);
		right: 0;
		left: unset;
	}
	body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu > .mega-menu-item{
		width: calc(25% - 6px) !important;
	}
	body #page-container #et-boc .main_menu_Section .mega-menu li.mega-menu-tabbed > .mega-sub-menu .mega-sub-menu{
		width: 75% !important;
		left: 25%;
	}
}
@media (min-width: 981px) and (max-width: 1150px){
	body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:not(:has(> li:hover)){
		margin-left: 15vw;
	}
}
@media (min-width: 981px) and (max-width: 1050px){
	body #page-container #et-boc .main_menu_Section .mega-menu-wrap > .mega-menu > .mega-menu-item:not(.mega-menu-flyout) > .mega-sub-menu:not(:has(> li:hover)){
		margin-left: 5vw;
	}
}
@media (max-width: 980px){
	body #page-container #et-boc .main_menu_Section ul li.menu_btn a{
		font-size: 16px;
		padding: 10px 20px !important;
		text-align: center !important;
	}
}