Bootstrap Snippet menu three level using HTML CSS jQuery

/* menu */ .header-inner { margin: 0px -12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .custom-menu-wrapper { padding: 0px 12px; } .header-logo { padding: 0px 12px; } .header-logo a { display: inline-block; } .header-logo img { max-width: 200px; width: 100%; } .custom-menu-primary ul li { position: relative; } .custom-menu-primary .menu-lavel-1 { margin: 0; padding: 0; list-style-type: none; } .custom-menu-primary .menu-lavel-1 ul { margin: 0; list-style-type: none; } .custom-menu-primary ul li a { display: block; color: #0d2436; text-decoration: none; transition: color .3s; font-size: 14px; line-height: 1.3; padding: 9px 14px; text-transform: uppercase; position: relative; } .custom-menu-primary ul li.active>a, .custom-menu-primary ul li:hover>a { color: #0071dc; } .custom-menu-primary .menu-lavel-1 ul li a { line-height: 1.2; padding: 8px 14px; font-size: 16px; white-space: nowrap; text-transform: none; } .header-button { border: 0px; background-color: #0071dc; color: #ffffff; display: block; transition: background-color .3s; padding: 9px 12px; font-size: 15px; line-height: 1.5; } .header-button:hover { background-color: #0069cd; } .custom-header { padding: 0px 0px; box-shadow: 0px 0px 10px -1px #c9c9c9d1; } .custom-menu-primary { position: fixed; transform: translateX(-330px); } @media (min-width: 992px) { .menu-trigger { display: none; } .custom-menu-primary { position: static; transform: none; } .header-button-wrap { padding-left: 10px; } .custom-menu-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .custom-menu-primary .menu-lavel-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .custom-menu-primary .menu-lavel-1 ul { position: absolute; left: 0px; top: 100%; padding: 5px 0px; min-width: 170px; background-color: #ffffff; box-shadow: 0px 2px 5px 0px #dddddd; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s; z-index: 9; display: block !important; } .custom-menu-primary ul li a { padding: 24px 14px; } .custom-menu-primary .menu-lavel-1 ul ul { left: 100%; top: 0px; box-shadow: 0px 0px 5px 0px #dddddd; } .custom-menu-primary .menu-lavel-1 li:last-child>ul { left: auto; right: 0; } .custom-menu-primary .menu-lavel-1 li:last-child>ul ul { left: auto; right: 100%; } .custom-menu-primary ul li.has-submenu:hover>ul { opacity: 1; visibility: visible; pointer-events: auto; } /* about */ .counter-content-heading { font-size: 35px; } .counter-content-text { font-size: 18px; } .counter-widgets-single { padding-left: 0px; padding-right: 0px; } .feature-content-image { margin-right: 30px; } .feature-counter { left: -25%; min-width: 120%; } } @media (min-width: 1200px) { .feature-content-unstyled { margin-bottom: 65px; } .counter-content-heading { font-size: 42px; } } @media (min-width: 1600px) { .counter-widgets-single { padding-left: 10px; padding-right: 10px; } } @media (max-width: 1199px) and (min-width: 992px) { .about-tab li { padding: 10px 16px; } } @media (max-width: 1050px) and (min-width: 992px) { .custom-menu-primary .menu-lavel-1 li:nth-last-child(2)>ul ul, .custom-menu-primary .menu-lavel-1 li:nth-last-child(1)>ul ul { left: auto; right: 100%; } } @media (max-width: 991px) { .help-us-content { margin-top: 60px; } .custom-header { padding: 5px 0px; } .header-button-wrap { padding-right: 10px; } .custom-menu-wrapper { display: flex; align-items: center; } .mobile-trigger { display: inline-block; cursor: pointer; font-size: 14px; width: 30px; height: 30px; line-height: 50px; text-align: center; top: 0px; padding: 7px 10px 8px 10px; -webkit-transition: opacity 0.2s 0.2s ease, top 0.4s ease; -o-transition: opacity 0.2s 0.2s ease, top 0.4s ease; transition: opacity 0.2s 0.2s ease, top 0.4s ease; padding: 3px 0px; position: relative; z-index: 9; } .mobile-trigger .line { width: 25px; height: 2px; background-color: #0d2436; display: block; margin: 5px auto; border-top: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mobile-trigger:hover .line { background-color: #0071dc; } .mobile-open .mobile-trigger .line { background-color: #ffffff; } .mobile-open .mobile-trigger .line:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } .mobile-open .mobile-trigger .line:nth-child(2) { opacity: 0; } .mobile-open .mobile-trigger .line:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } .custom-menu-primary { position: fixed; left: 0px; background-color: #ffffff; top: 0px; height: 100vh; width: 300px; max-width: calc(100% - 50px); transform: translateX(-330px); transition: all .3s; padding: 20px 3px; overflow: hidden; z-index: 8; } .mobile-open .custom-menu-primary { transform: translateX(0px); } .custom-menu-wrapper:after { content: ""; position: fixed; height: 100%; width: 100%; visibility: hidden; pointer-events: none; background-color: #00000069; top: 0px; left: 0px; right: 0px; bottom: 0px; display: block; z-index: 5; transition: all .3s; } .mobile-open .custom-menu-wrapper:after { opacity: 1; visibility: visible; pointer-events: all; } .custom-menu-primary .menu-lavel-1 ul { display: none; } .header-logo { max-width: calc(100% - 176px); padding-right: 0px; } .child-trigger { position: absolute; right: 0; top: 0; height: 37px; width: 40px; font-size: 14px; font-weight: 700; font-family: Raleway, sans-serif; z-index: 9; cursor: pointer } .child-trigger:after { content: ""; height: 2px; width: 10px; background: #000; display: block; margin: 0 auto; position: absolute; top: 18px; left: 13px; } .child-trigger:before { content: ""; height: 2px; width: 10px; background: #000; display: block; margin: 0 auto; transform: rotate(90deg); position: absolute; top: 18px; left: 13px; } .child-trigger.child-open:before { opacity: 0; } .custom-menu-primary .menu-lavel-1 ul { padding: 0px; } .custom-menu-primary ul li a { border-bottom: 1px solid rgb(221 221 221 / 35%); } .custom-menu-primary .menu-lavel-1 { max-height: calc(100vh - 40px); overflow-y: auto; } /* about */ .about-left-side { padding-bottom: 40px; } .addres-ico { height: 45px; width: 45px; } .news-letter h4 { font-size: 18px; } .newsletter-mxw { border-radius: 5px; } } @media (max-width: 767px) { .cm-d-none { display: none; } .popup-form-title { margin-bottom: 23px; margin-top: 13px; } .popup-form-style { padding: 20px 7px; } .help-us-content { padding-left: 65px; } .help-us-content ul li:after { left: -70px; height: 45px; width: 45px; line-height: 45px; font-size: 18px; top: 20px; } .hover-line { left: -48px; } .help-us-content ul li { padding: 15px 15px; } .help-us-content ul li p { font-size: 16px; line-height: 1.5; margin-bottom: 7px; } .section-title h2 { font-size: 35px; } .section-title h6 { font-size: 20px; } .copyright { text-align: center; padding: 10px 0px; } .footer-social-links { text-align: center; padding: 15px 0px; } .testimonial { max-width: calc(100% - 90px); } .testimonial-controls .carousel-control-prev, .testimonial-controls .carousel-control-next { width: 35px; height: 35px; top: calc(50% - 20px); font-size: 12px; } .project-count { font-size: 25px; } .project-counter-item p { font-size: 13px; } .work-process-item-wrap:nth-child(odd) { padding-right: 0px; padding-left: 57px; } .work-process-item-wrap:nth-child(even) { padding-left: 57px; } .work-process .work-process-item { width: 100%; } .work-process .work-process-item { width: 100%; } .work-process-item-wrap:nth-child(odd) .work-process-item { text-align: left; padding-right: 15px; padding-left: 55px; } .work-process-item-wrap:nth-child(even) .work-process-item { padding-left: 55px; } .work-process-item-wrap { margin-bottom: 25px; } .work-process .work-process-item:before { right: auto; left: 8px; height: 35px; width: 35px; font-size: 17px; line-height: 35px; top: 24px; } .work-process-item-wrap:nth-child(even) .work-process-item:before { left: 8px; } .work-process-item-wrap .circle-scroll { left: -5px; height: 40px; width: 40px; } .work-process-item-wrap .circle-scroll:after { margin: 10.3px; height: 15px; width: 15px; position: relative; top: 1px; left: 1px; } .work-process:before { left: 16px; } .banner-content h1 { font-size: calc(3vw + 2vh); line-height: 1.2; } .banner-content h3 { font-size: calc(2vw + 1.5vh); } .section-space { padding: 50px 0px; } /* about */ .about-banner-content { padding: 50px 0px; } .about-tab li { padding: 11px 15px; } .new-letter-form { display: flex; padding-right: 15px; padding-top: 25px; padding-left: 15px; } } @media (max-width: 600px) { .custom-row .custom-row-item { width: 100%; margin-top: 20px; } .custom-row .custom-row-item:nth-child(even) { margin-top: 20px; } .project-count { font-size: 17px; } .project-counter-item { padding: 0px 5px; } /* about */ .about-tab { border: 1px solid #dddddd; border-radius: 7px 7px 0px 0px; overflow: hidden; } .about-tab li { float: none; width: 100%; text-align: center; border-left: 0px; border: 0px; border-bottom: 1px solid #dddddd !important; margin: 0; padding: 10px 15px; } .about-tab li.current { color: #ffffff; background-color: #019cf8; } .about-tab li:last-child { border-bottom: 0px !important; } .about-tab-wrap { border-top: 0px; } .about-right-side { padding-right: 15px; } .about-right-side:before { right: 15px; transform: translate3d(18px, -20px, 28px); } .hs-form-item { width: 100%; } } @media (max-width: 500px) { .news-letter { flex-wrap: wrap; text-align: center; justify-content: center; margin-top: -40px; padding-right: 15px; } .news-letter h4 { padding-left: 0px; width: 100%; margin-top: 20px; } .news-letter i { border: 1px solid; } .new-letter-form { flex-wrap: wrap; } .new-letter-form .newsletter-input { width: 100%; flex: auto; margin-right: 0px; } .new-letter-form .newsletter-btn { margin-top: 18px; width: 100%; } } @media (max-width: 360px) { .project-counter-item p { font-size: 12px; font-weight: 600; } }

$(document).ready(function() { // menu js $(".mobile-trigger").click(function(event) { event.stopPropagation(); $("body").toggleClass("mobile-open"); $(".child-trigger").removeClass("child-open"); $(".has-submenu .submenu ").slideUp(250); }); $('body').click(function() { $('body').removeClass('mobile-open'); $(".child-trigger").removeClass("child-open"); $(".has-submenu .submenu ").slideUp(250); }); $(".custom-menu-primary").click(function(event) { event.stopPropagation(); }); $('.menu-item.has-submenu > a').append('<span class="child-trigger"></span>'); $(".child-trigger").click(function() { $(this).parent().parent().siblings(".has-submenu.menu-item").find(".child-trigger").removeClass("child-open"); $(this).parent().parent().siblings(".has-submenu.menu-item").find(".submenu").slideUp(250); $(this).parent().next(".submenu").slideToggle(250); $(this).parent().next(".submenu").children(".has-submenu.menu-item").find(".submenu").slideUp(250); $(this).parent().next(".submenu").children(".has-submenu.menu-item").find(".child-trigger").removeClass("child-open"); $(this).toggleClass("child-open"); return false; }); });