website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

multilevel-responsive-navigation

Multilevel Responsive Navigation

  • 461
  • 18-Nov-2021
  • Details

    FILE STRUCTURE

    INDEX.HTML

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <title>Multilevel Responsive Navigation</title>
        <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" media="all" href="css/atechnav.css" />
      </head>
      <body>
        <div class="atechnav">
          <ul>
            <li>
              <a href="">Home</a>
            </li>
            <li>
              <a href="">About</a>
            </li>
            <li>
              <a href="">Contact</a>
            </li>
            <li>
              <a href="">Services</a>
            </li>
            <li>
              <a href="">Dropdown Right</a>
              <ul>
                <li>
                  <a href="#">Item 1</a>
                  <ul>
                    <li>
                      <a href="#">Item</a>
                      <ul>
                        <li>
                          <a href="#">Item</a>
                          <ul>
                            <li>
                              <a href="#">Item</a>
                            </li>
                            <li>
                              <a href="#">Item</a>
                            </li>
                            <li>
                              <a href="#">Item</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">Item</a>
                        </li>
                        <li>
                          <a href="#">Item</a>
                        </li>
                        <li>
                          <a href="#">Item</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Item 4</a>
                  <ul>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="mega" data-column="5">
              <a href="">Mega Dropdown</a>
              <ul>
                <li>
                  <a href="#">Item 1</a>
                  <ul>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Item 2</a>
                  <ul>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Item 3</a>
                  <ul>
                    <li>
                      <a href="#">Item</a>
                      <ul>
                        <li>
                        <li>
                          <a href="#">Item</a>
                        </li>
                    </li>
                    <li>
                    <li>
                      <a href="#">Item</a>
                    </li>
                </li>
              </ul>
            </li>
          </ul>
          </li>
          <li>
            <a href="#">Item 4</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Item 5</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Item 6</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Item 7</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Item 8</a>
            <ul>
              <li>
                <a href="#">Item</a>
                <ul>
                  <li>
                  <li>
                    <a href="#">Item</a>
                  </li>
              </li>
              <li>
              <li>
                <a href="#">Item</a>
              </li>
          </li>
          </ul>
          </li>
          </ul>
          </li>
          <li>
            <a href="#">Item 9</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Item 10</a>
            <ul>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
              <li>
                <a href="#">Item</a>
              </li>
            </ul>
          </li>
          </ul>
          </li>
          <li class="drop-left">
            <a href="">Drop Left</a>
            <ul>
              <li>
                <a href="#">Item</a>
                <ul>
                  <li>
                    <a href="#">Item</a>
                    <ul>
                      <li>
                        <a href="#">Item</a>
                        <ul>
                          <li>
                            <a href="#">Item</a>
                          </li>
                          <li>
                            <a href="#">Item</a>
                          </li>
                          <li>
                            <a href="#">Item</a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">Item</a>
                      </li>
                      <li>
                        <a href="#">Item</a>
                      </li>
                      <li>
                        <a href="#">Item</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Item</a>
                  </li>
                  <li>
                    <a href="#">Item</a>
                  </li>
                  <li>
                    <a href="#">Item</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          </ul>
        </div>
        <!-- .atechnav -->
        <!-- required -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/atechnav.js"></script>
        <script type="text/javascript">
          jQuery(document).ready(function($) {
            jQuery(".atechnav").atechnav({
              theme: "light",
              breakpoint: 960,
              position: "right",
              phoneBtn: "9999999999",
              locationBtn: "https://www.google.com/maps",
            });
          });
        </script>
        <script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
      </body>
    </html>

     

    ATECHNAV.CSS

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');* {margin: 0;padding: 0;}body {height: 3200px;font-size: 16px;font-family: 'Montserrat', sans-serif;background: #efefef;color: #555;}.container {max-width: 1200px;margin: 0 auto;}@media only screen and (max-width: 1000px) {.atechnav > ul > li > a {padding: 20px 23px;}}.atechnav {position: relative;width: 100%;z-index: 9900;line-height: normal;}.atechnav a {color: rgb(24, 24, 24);}.atechnav ul {margin: 0;padding: 0;text-align: center;}.atechnav li {list-style: none;display: block;margin: 0;padding: 0;position: relative;line-height: normal;vertical-align: middle;}.atechnav li a {padding: 15px;display: block;text-decoration: none;color: rgb(24, 24, 24);font-size: inherit;font-family: inherit;box-sizing: border-box;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.atechnav > ul > li {display: inline-block;}.atechnav > ul > li > a {padding: 20px 40px;}.atechnav ul ul {top: auto;width: 220px;position: absolute;z-index: 9900;text-align: left;display: none;background: #ddd;}.atechnav li li {display: block;}.atechnav ul ul ul {top: 0;left: 220px;}.atechnav > ul > li:hover > ul > li:hover > ul {opacity: 1;visibility: visible;top: 0;}.atechnav > ul > li.drop-left > ul {right: 0;}.atechnav li.drop-left ul ul {left: auto;right: 220px;}.atechnav.light {background: rgba(255, 255, 255, 1);}.atechnav.light a {color: #000;}.atechnav.light ul ul {background: rgba(255, 255, 255, 1);}.atechnav.light li a {color: #000;}.atechnav.dark {background: rgba(0, 0, 0, 1);}.atechnav.dark a {color: #fff;}.atechnav.dark ul ul {background: rgba(0, 0, 0, 1);}.atechnav.dark li a {color: #fff;}.atechnav.fixed {position: fixed;width: 100%;top: 0;left: 0;z-index: 9999;}body.atechnav-noscroll-x {overflow-x: hidden;}.atechnav li.has-sub > a:after {content: "";margin-left: 10px;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid #000;display: inline-block;}.atechnav li li.has-sub > a:after {margin-left: 10px;float: right;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 6px solid #fff;position: relative;top: 4px;}.atechnav li.drop-left li.has-sub > a:after {float: left;margin-right: 10px;border-left: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-right: 6px solid #fff;}.atechnav.hide-arrows li.has-sub > a:after, .atechnav.hide-arrows li li.has-sub > a:after, .atechnav.hide-arrows li.drop-left li.has-sub > a:after {display: none;}.atechnav .menu-toggle, .atechnav .close-menu, .atechnav .call-btn-mobile, .atechnav .location-btn-mobile {display: none;text-transform: uppercase;text-decoration: none;}.atechnav .dd-toggle {display: none;position: absolute;top: 0;right: 0;padding: 0;width: 48px;height: 48px;text-align: center;z-index: 9999;border: 0;}.atechnav.desktop li.has-sub a {padding-right: 5px;}.atechnav.desktop.hide-arrows li.has-sub a {padding-right: 15px;}.atechnav.mobile > ul > li > a.dd-toggle {padding: 0;}.atechnav li.call-btn-mobile, .atechnav li.location-btn-mobile {display: none;}.atechnav svg {fill: currentColor;width: 1em;height: 1em;position: relative;top: 2px;}.atechnav a.dd-toggle .icon-plus {box-sizing: border-box;transition: transform 0.3s;width: 12px;height: 100%;position: relative;vertical-align: middle;display: inline-block;color: rgb(34, 34, 34);}.atechnav a.dd-toggle .icon-plus:before {content: "";display: block;width: 12px;height: 0px;border-bottom: solid 3px rgb(34, 34, 34);position: absolute;top: 50%;transform: rotate(90deg);transition: width 0.3s;}.atechnav a.dd-toggle .icon-plus:after {content: "";display: block;width: 12px;height: 0px;top: 50%;border-bottom: solid 3px rgb(31, 31, 31);position: absolute;}.atechnav li.open > a.dd-toggle .icon-plus {-webkit-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}.atechnav.light a.dd-toggle .icon-plus:before {border-color: #000;}.atechnav.light a.dd-toggle .icon-plus:after {border-color: #000;}.atechnav.dark a.dd-toggle .icon-plus:before {border-color: #fff;}.atechnav.dark a.dd-toggle .icon-plus:after {border-color: #fff;}.atechnav .icon-close {box-sizing: border-box;width: 12px;height: 12px;position: relative;display: inline-block;}.atechnav .icon-close:before {content: "";display: block;width: 12px;height: 0px;border-bottom: solid 3px rgb(24, 24, 24);position: absolute;top: 50%;transform: rotate(45deg);}.atechnav .icon-close:after {content: "";display: block;width: 12px;height: 0px;top: 50%;border-bottom: solid 3px rgb(24, 24, 24);position: absolute;transform: rotate(-45deg);}.atechnav.light .icon-close:before {border-color: #000;}.atechnav.light .icon-close:after {border-color: #000;}.atechnav.dark .icon-close:before {border-color: #fff;}.atechnav.dark .icon-close:after {border-color: #fff;}.atechnav .menu-toggle, .atechnav .call-btn-mobile, .atechnav .location-btn-mobile, .atechnav .close-menu {padding: 15px;box-sizing: border-box;}.atechnav .menu-toggle span.bars {display: inline-block;margin-right: 7px;position: relative;top: 3px;}.atechnav .menu-toggle span.bars span {display: block;width: 15px;height: 2px;border-radius: 6px;background: rgb(24, 24, 24);margin: 0 0 3px;}.atechnav .full {width: 100%;}.atechnav .half {width: 50%;}.atechnav .third {width: 33%;text-align: center;}.atechnav .location-btn-mobile.third {text-align: center;}.atechnav .location-btn-mobile.half {text-align: right;}.atechnav.light .third, .atechnav.light .half {border-left: 1px solid rgba(0, 0, 0, 0.15);}.atechnav.light.left .third, .atechnav.light.left .half {border-bottom: 1px solid rgba(0, 0, 0, 0.15);}.atechnav.light.right .third, .atechnav.light.right .half {border-bottom: 1px solid rgba(0, 0, 0, 0.15);}.atechnav.light .third:first-child, .atechnav.light .half:first-child {border-left: 0;}.atechnav.dark .third, .atechnav.dark .half {border-left: 1px solid rgba(255, 255, 255, 0.15);}.atechnav.dark.left .third, .atechnav.dark.left .half {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}.atechnav.dark.right .third, .atechnav.dark.right .half {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}.atechnav.light.left .menu-toggle, .atechnav.light.right .menu-toggle {border-bottom: 0;}.atechnav.dark.left .menu-toggle, .atechnav.dark.right .menu-toggle {border-bottom: 0;}.atechnav.dark .third:first-child, .atechnav.dark .half:first-child {border-left: 0;}.atechnav.light .menu-toggle span.bars span {background: #000;}.atechnav.dark .menu-toggle span.bars span {background: #fff;}.atechnav.mobile {position: static;}.atechnav.mobile.fixed {position: static;}.atechnav.mobile ul {position: relative;display: none;}.atechnav.mobile.active {padding-bottom: 0;}.atechnav.mobile.active > ul {display: block;}.atechnav.mobile ul {text-align: left;}.atechnav.mobile > ul > li {display: block;}.atechnav.mobile > ul > li > a {padding: 15px;}.atechnav.mobile ul {background: rgba(221, 221, 221, 1);}.atechnav.mobile ul ul {position: relative;opacity: 1;visibility: visible;width: auto;display: none;-moz-transition: none;-webkit-transition: none;-o-transition: color 0 ease-in;transition: none;}.atechnav.mobile ul ul ul {left: auto;top: auto;}.atechnav.mobile li.drop-left ul ul {right: auto;}.atechnav.mobile li a {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}.atechnav.mobile > ul {border-top: 1px solid rgba(255, 255, 255, 0.15);}.atechnav.mobile.light li a {border-bottom: 1px solid rgba(0, 0, 0, 0.15);}.atechnav.mobile.light > ul {border-top: 1px solid rgba(0, 0, 0, 0.15);}.atechnav.mobile li a.dd-toggle {border: 0;}.atechnav.mobile.light li a.dd-toggle {border: 0;}.atechnav.mobile .menu-toggle, .atechnav.mobile .dd-toggle, .atechnav.mobile .close-menu, .atechnav.mobile .call-btn-mobile, .atechnav.mobile .location-btn-mobile {display: inline-block;}.atechnav.mobile li.call-btn-mobile {border-right: 1px solid rgba(255, 255, 255, 0.1);box-sizing: border-box;}.atechnav.mobile li.call-btn-mobile, .atechnav.mobile li.location-btn-mobile {display: inline-block;width: 50%;text-transform: uppercase;text-align: center;}.atechnav.mobile li.call-btn-mobile.full, .atechnav.mobile li.location-btn-mobile.full {display: block;width: 100%;text-transform: uppercase;border-right: 0;text-align: left;}.atechnav.mobile.light ul {background: rgba(255, 255, 255, 1);}.atechnav.mobile.dark ul {background: rgba(0, 0, 0, 1);}.atechnav.mobile.dark ul ul {background: rgba(255, 255, 255, 0.08);}.atechnav.mobile.light li.call-btn-mobile {border-right: 1px solid rgba(0, 0, 0, 0.1);}.atechnav.mobile.top {position: absolute;width: 100%;top: 0;left: 0;z-index: 9999;}.atechnav.mobile li.has-sub > a:after, .atechnav.mobile li li.has-sub > a:after, .atechnav.mobile li.drop-left li.has-sub > a:after {display: none;}.atechnav.mobile.right > ul, .atechnav.mobile.left > ul {position: fixed;top: 0;bottom: 0;width: 100%;max-width: 280px;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;}.atechnav.mobile.right > ul {right: 0;}.atechnav.mobile.right .close-menu, .atechnav.mobile.left .close-menu {display: inline-block;text-align: right;}.atechnav.mobile.left > ul {left: 0;}.atechnav.mobile.right .location-btn-mobile.half, .atechnav.mobile.right .call-btn-mobile.half, .atechnav.mobile.right .close-menu.half {text-align: center;}.atechnav.mobile.right .location-btn-mobile.third, .atechnav.mobile.right .call-btn-mobile.third, .atechnav.mobile.right .close-menu.third {text-align: center;}.atechnav.mobile.left .location-btn-mobile.half, .atechnav.mobile.left .call-btn-mobile.half, .atechnav.mobile.left .close-menu.half {text-align: center;}.atechnav.mobile.left .location-btn-mobile.third, .atechnav.mobile.left .call-btn-mobile.third, .atechnav.mobile.left .close-menu.third {text-align: center;}.atechnav.mobile.left .menu-toggle.half, .atechnav.mobile.left .menu-toggle.third, .atechnav.mobile.right .menu-toggle.half, .atechnav.mobile.right .menu-toggle.third {text-align: left;}.atechnav.mobile.left .close-menu.third span, .atechnav.mobile.right .close-menu.third span {display: none;}.atechnav.desktop li.mega ul ul {background: none;}.atechnav.desktop li.mega li {display: inline-block;vertical-align: top;margin-left: -4px;}.atechnav.desktop li.mega li li {display: block;position: relative;left: 4px;}.atechnav.desktop li.mega ul ul {width: auto;}.atechnav.desktop > ul > li.mega {position: inherit;}.atechnav.desktop > ul > li.mega > ul {width: 100%;}.atechnav.desktop > ul > li.mega > ul li.has-sub ul {display: block;position: relative;left: auto;}.atechnav.desktop > ul > li.mega > ul > li {padding-bottom: 15px;box-sizing: border-box;}.atechnav.desktop li.mega li li a {padding: 5px 15px;}.atechnav.desktop li.mega li.has-sub a:after {display: none;}.atechnav.desktop > ul > li.mega > ul > li > a {color: #202020;}@media only screen and (max-width: 768px) {.atechnav {overflow: hidden;display: block;}.atechnav ul {position: relative;display: none;}}@media only screen and (max-width: 420px) {.atechnav.mobile .call-btn-mobile.third span, .atechnav.mobile .location-btn-mobile.third span {display: none;}}

     

    ATECHNAV.JS

    !(function (n) {
        n.fn.atechnav = function (e, i, s) {
            (nav = n(this)), (i = n(window).width());
            var t = n.extend(
                {
                    theme: "plain",
                    breakpoint: 768,
                    menuLabel: "Menu",
                    sticky: !1,
                    position: "static",
                    openingSpeed: 250,
                    closingDelay: 250,
                    showArrows: !0,
                    phoneBtn: "",
                    phoneLabel: "Call Us",
                    locationBtn: "",
                    locationLabel: "Location",
                    closeBtn: !1,
                    closeLabel: "Close",
                    mobileMode: !1,
                    scrollbarFix: !1,
                },
                e
            );
            return this.each(function () {
                if (
                    (("light" != t.theme && "dark" != t.theme) || nav.addClass(t.theme),
                    t.breakpoint && (s = t.breakpoint),
                    t.menuLabel ? (menuLabel = t.menuLabel) : (menuLabel = ""),
                    t.phoneLabel ? (phoneLabel = t.phoneLabel) : (phoneLabel = ""),
                    t.locationLabel ? (locationLabel = t.locationLabel) : (locationLabel = ""),
                    t.closeLabel ? (closeLabel = t.closeLabel) : (closeLabel = ""),
                    t.phoneBtn && t.locationBtn)
                )
                    var e = "third";
                else if (t.phoneBtn || t.locationBtn) e = "half";
                else e = "full";
                if (
                    ("right" == t.position || "left" == t.position
                        ? nav.prepend('<a href="#" class="menu-toggle"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + "</a>")
                        : nav.prepend('<a href="#" class="menu-toggle ' + e + '"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + "</a>"),
                    t.phoneBtn && "right" != t.position && "left" != t.position)
                ) {
                    var a = '<a href="tel:' + t.phoneBtn + '" class="call-btn-mobile ' + e + '"><svg id="icon-phone"></svg> <span>' + phoneLabel + "</span></a>";
                    nav.find("a.menu-toggle").after(a);
                }
                if (t.locationBtn && "right" != t.position && "left" != t.position) {
                    a = '<a href="' + t.locationBtn + '" class="location-btn-mobile ' + e + '" target="_blank"><svg id="icon-location"></svg> <span>' + locationLabel + "</span></a>";
                    nav.find("a.menu-toggle").after(a);
                }
                if (
                    (t.sticky &&
                        ((navPos = nav.offset().top),
                        i >= s &&
                            n(window).on("scroll", function () {
                                n(window).scrollTop() > navPos ? nav.addClass("fixed") : nav.removeClass("fixed");
                            })),
                    "top" == t.position && nav.addClass("top"),
                    "left" == t.position || "right" == t.position)
                ) {
                    var l = '<a href="#" class="close-menu ' + e + '"><span class="icon-close"></span>' + closeLabel + "</a>",
                        o = '<a href="tel:' + t.phoneBtn + '" class="call-btn-mobile ' + e + '"><svg id="icon-phone"></svg></a>',
                        c = '<a href="' + t.locationBtn + '" class="location-btn-mobile ' + e + '" target="_blank"><svg id="icon-location"></svg></i></a>';
                    nav.find("ul:first").prepend(l), t.locationBtn && nav.find("ul:first").prepend(c), t.phoneBtn && nav.find("ul:first").prepend(o);
                }
                "right" == t.position && nav.addClass("right"),
                    "left" == t.position && nav.addClass("left"),
                    t.showArrows || nav.addClass("hide-arrows"),
                    t.closeBtn && "right" != t.position && "left" != t.position && nav.find("ul:first").append('<li><a href="#" class="close-menu"><span class="icon-close"></span> ' + closeLabel + "</a></li>"),
                    t.scrollbarFix && n("body").addClass("atechnav-noscroll-x");
                var d = document.getElementById("icon-phone");
                if (d) {
                    d.setAttribute("viewBox", "0 0 480 480");
                    var p = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    p.setAttribute(
                        "d",
                        "M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076 c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257     c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194 C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02     C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876 c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029     C350.631,303.527,350.95,285.795,340.273,275.083z"
                    ),
                        d.appendChild(p);
                }
                var h = document.getElementById("icon-location");
                if (h) {
                    h.setAttribute("viewBox", "0 0 480 480");
                    var r = document.createElementNS("http://www.w3.org/2000/svg", "path");
                    r.setAttribute(
                        "d",
                        "M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825 c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986   c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428 c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106 C365.449,105.825,351.176,71.378,322.621,42.825z M270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411 s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675 C292.355,166.352,285.217,183.575,270.942,197.855z"
                    ),
                        h.appendChild(r);
                }
                n(".menu-toggle, .atechnav-open").on("click", function (e) {
                    e.preventDefault(),
                        "left" == t.position || "right" == t.position
                            ? (nav.find("ul:first").stop(!0, !0).fadeToggle(t.openingSpeed),
                              nav.toggleClass("active"),
                              nav.hasClass("active") &&
                                  nav.hasClass("mobile") &&
                                  n(document).on("click", function (e) {
                                      nav.hasClass("mobile") && (n(e.target).closest(nav).length || (nav.find("ul:first").stop(!0, !0).fadeOut(t.openingSpeed), nav.removeClass("active")));
                                  }))
                            : (nav.find("ul:first").stop(!0, !0).slideToggle(t.openingSpeed), nav.toggleClass("active"));
                }),
                    n(".close-menu, .atechnav-close").on("click", function () {
                        nav.removeClass("active"), "left" == t.position || "right" == t.position ? nav.find("ul:first").stop(!0, !0).fadeToggle(t.openingSpeed) : nav.find("ul:first").stop(!0, !0).slideUp(t.openingSpeed).toggleClass("active");
                    }),
                    nav.find("li a").each(function () {
                        n(this).next().length > 0 && n(this).parent("li").addClass("has-sub").append('<a class="dd-toggle" href="#"><span class="icon-plus"></span></a>');
                    }),
                    nav.find("li .dd-toggle").on("click", function (e) {
                        e.preventDefault(), n(this).parent("li").children("ul").stop(!0, !0).slideToggle(t.openingSpeed), n(this).parent("li").toggleClass("open");
                    });
                var f = function () {
                    nav.find("li").off("mouseenter"), nav.find("li").off("mouseleave");
                };
                parentItems = nav.find("> ul > li");
                function u() {
                    window.innerWidth <= s || t.mobileMode
                        ? (f(),
                          nav.addClass("mobile"),
                          nav.removeClass("desktop"),
                          !nav.hasClass("active") && nav.find("ul:first").is(":visible") && nav.find("ul:first").hide(),
                          nav.find("li.mega").each(function () {
                              n(this).find("ul").first().removeAttr("style"), n(this).find("ul").first().children().removeAttr("style");
                          }))
                        : (nav.addClass("desktop"),
                          nav.removeClass("mobile"),
                          nav.hasClass("active") && nav.removeClass("active"),
                          !nav.hasClass("active") && nav.find("ul:first").is(":hidden") && nav.find("ul:first").show(),
                          n("li.open").removeClass("open").find("ul:visible").hide(),
                          f(),
                          n(parentItems).each(function () {
                              n(this).hasClass("mega")
                                  ? (n(this).on("mouseenter", function () {
                                        n(this).find("ul").first().stop(!0, !0).slideDown(t.openingSpeed);
                                    }),
                                    n(this).on("mouseleave", function () {
                                        n(this).find("ul").first().stop(!0, !0).slideUp(t.openingSpeed);
                                    }))
                                  : (n(this).on("mouseenter", function () {
                                        n(this).children("ul").stop(!0, !0).slideDown(t.openingSpeed);
                                    }),
                                    n(this).on("mouseleave", function () {
                                        n(this).children("ul").stop(!0, !0).delay(t.closingDelay).slideUp(t.openingSpeed);
                                    }),
                                    n(this)
                                        .find("li.has-sub")
                                        .on("mouseenter", function () {
                                            n(this).children("ul").stop(!0, !0).slideDown(t.openingSpeed);
                                        }),
                                    n(this)
                                        .find("li.has-sub")
                                        .on("mouseleave", function () {
                                            n(this).children("ul").stop(!0, !0).delay(t.closingDelay).slideUp(t.openingSpeed);
                                        }));
                          }),
                          (navWidth = 0),
                          n(parentItems).each(function () {
                              (navWidth += n(this)[0].getBoundingClientRect().width),
                                  (navWidth = Math.round(navWidth)),
                                  n(this).hasClass("mega") &&
                                      (n(this).find("ul").first().css({ left: 0, right: 0, margin: "0px auto" }),
                                      (numCols = n(this).attr("data-columns")),
                                      2 == numCols
                                          ? n(this).find("li.has-sub").width("50%")
                                          : 3 == numCols
                                          ? n(this).find("ul").first().children().width("33.33%")
                                          : 4 == numCols
                                          ? n(this).find("ul").first().children().width("25%")
                                          : 5 == numCols
                                          ? n(this).find("ul").first().children().width("20%")
                                          : 6 == numCols
                                          ? n(this).find("ul").first().children().width("16.66%")
                                          : 7 == numCols
                                          ? n(this).find("ul").first().children().width("14.28%")
                                          : 8 == numCols
                                          ? n(this).find("ul").first().children().width("12.5%")
                                          : n(this).find("ul").first().children().width("25%"));
                          }),
                          parentItems.hasClass("mega") && nav.find("li.mega > ul").css({ "max-width": navWidth }));
                }
                u(),
                    n(window).on("resize", function () {
                        u();
                    });
            });
        };
    })(jQuery);
    

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat