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

Need an Eye-caching Website - Contact Me Today !

  2. Snippets
  3. Multilevel Responsive Navigation
multilevel-responsive-navigation

Multilevel Responsive Navigation

  • 472
  • 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;

      }

      }

    /* all nav */

    .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;

    }

     

    /* main level */

    .atechnav > ul > li {

      display: inline-block;

    }

    .atechnav > ul > li > a {

      padding: 20px 40px;

    }

     

    /* first level dd */

    .atechnav ul ul {

      top: auto;

      width: 220px;

      position: absolute;

      z-index: 9900;

      text-align: left;

      display: none;

      background: #ddd;

    }

    .atechnav li li {

      display: block;

    }

     

    /* second level dd */

    .atechnav ul ul ul {

      top: 0; /* dd animtion - change to auto to remove */

      left: 220px;

    }

    .atechnav > ul > li:hover > ul > li:hover > ul {

      opacity: 1;

      visibility: visible;

      top: 0;

    }

     

    /* .drop-left */

    .atechnav > ul > li.drop-left > ul {

      right: 0;

    }

    .atechnav li.drop-left ul ul {

      left: auto;

      right: 220px;

    }

     

    /* light theme */

    .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;

    }

     

    /* dark theme */

    .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;

    }

    /* sticky nav */

    .atechnav.fixed {

      position: fixed;

      width: 100%;

      top: 0;

      left: 0;

      z-index: 9999;

    }

     

    /* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/

    body.atechnav-noscroll-x {

      overflow-x: hidden;

    }

     

    /* general styling */

    .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;

    }

     

    /* svg icons */

    .atechnav svg {

      fill: currentColor;

      width: 1em;

      height: 1em;

      position: relative;

      top: 2px;

    }

    /* svg icons */

     

    .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;

    }

     

    /* mobile nav */

    .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;

    }

     

    /* left and right positions */

    .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;

    }

    /* left and right positions */

     

    /* mega dd */

    .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;

    }

    /* mega dd */

     

    /* Fallback for slow javascript load */

    @media only screen and (max-width: 768px) {

      .atechnav {

        overflow: hidden;

        display: block;

      }

      .atechnav ul {

        position: relative;

        display: none;

      }

    }

     

    /* mobile nav */

    @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($) {
        $.fn.atechnav = function(options, width, breakpoint) {

            var $nav, $width, $breakpoint, $parentItems;
            nav = $(this);
            width = $(window).width();

            // default settings
            var settings = $.extend( {
                theme: 'plain', // adds default color to nav. (light, dark)
                breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly
                menuLabel: 'Menu', // label for the mobile nav
                sticky: false, // makes nav sticky on scroll (desktop only)
                position: 'static', // 'static', 'top', 'left', 'right' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
                openingSpeed: 250, // how fast the dropdown should open in milliseconds
                closingDelay: 250, // controls how long the dropdowns stay open for in milliseconds
                showArrows: true, // shows dropdown arrows next to the items that have sub menus
                phoneBtn: '', // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
                phoneLabel: 'Call Us', // label for the phone button
                locationBtn: '', // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
                locationLabel: 'Location', // label for the location button
                closeBtn: false, // adds a close button to the end of nav
                closeLabel: 'Close', // label for the close button
                mobileMode: false,
                scrollbarFix: false // fixes horizontal scrollbar issue on very long navs
            }, options );

            return this.each( function() {

                // defines black or white themes
                if (settings.theme == 'light' || settings.theme == 'dark') {
                    nav.addClass(settings.theme);
                }

                if (settings.breakpoint) {
                    breakpoint = settings.breakpoint;
                }

                if (settings.menuLabel) {
                    menuLabel = settings.menuLabel;
                } else {
                    menuLabel = '';
                }

                if (settings.phoneLabel) {
                    phoneLabel = settings.phoneLabel;
                } else {
                    phoneLabel = '';
                }

                if (settings.locationLabel) {
                    locationLabel = settings.locationLabel;
                } else {
                    locationLabel = '';
                }

                if (settings.closeLabel) {
                    closeLabel = settings.closeLabel;
                } else {
                    closeLabel = '';
                }

                // css classes for main menu mobile buttons
                if( settings.phoneBtn && settings.locationBtn ) {
                    var cssClass = 'third';
                } else if( settings.phoneBtn || settings.locationBtn ) {
                    var cssClass = 'half';
                } else {
                    var cssClass = 'full';
                }

                // adds the toggle button to open and close nav
                if ( settings.position == 'right' || settings.position == 'left' ) {
                    nav.prepend('<a href="#" class="menu-toggle"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + '</a>');
                } else {
                    nav.prepend('<a href="#" class="menu-toggle ' + cssClass + '"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + '</a>');
                }

                // adds a click-to-call link
                if (settings.phoneBtn && !(settings.position == 'right' || settings.position == 'left')) {
                    var btn = '<a href="tel:'+ settings.phoneBtn +'" class="call-btn-mobile ' + cssClass + '"><svg id="icon-phone"></svg> <span>' + phoneLabel + '</span></a>';
                    nav.find('a.menu-toggle').after(btn);
                }

                // adds a location page link to the beginning of nav
                if (settings.locationBtn && !(settings.position == 'right' || settings.position == 'left')) {
                    var btn = '<a href="'+ settings.locationBtn +'" class="location-btn-mobile ' + cssClass + '" target="_blank"><svg id="icon-location"></svg> <span>' + locationLabel + '</span></a>';
                    nav.find('a.menu-toggle').after(btn);
                }

                // Makes nav sticky on scroll
                if (settings.sticky) {
                    navPos = nav.offset().top;
                    if(width >= breakpoint) {
                        $(window).on('scroll', function() {
                     if ($(window).scrollTop() > navPos) {
                         nav.addClass('fixed');
                     }
                     else {
                         nav.removeClass('fixed');
                     }
                    });
                    }
                }

                if (settings.position == 'top') {
                    nav.addClass('top');
                }

                if (settings.position == 'left' || settings.position == 'right') {
                    var closeBtn = '<a href="#" class="close-menu ' + cssClass + '"><span class="icon-close"></span>' + closeLabel + '</a>';
                    var phoneBtn = '<a href="tel:'+ settings.phoneBtn +'" class="call-btn-mobile ' + cssClass + '"><svg id="icon-phone"></svg></a>';
                    var locationBtn = '<a href="'+ settings.locationBtn +'" class="location-btn-mobile ' + cssClass + '" target="_blank"><svg id="icon-location"></svg></i></a>';

                    nav.find('ul:first').prepend(closeBtn);

                    if (settings.locationBtn) {
                        nav.find('ul:first').prepend(locationBtn);
                    }
                    if (settings.phoneBtn) {
                        nav.find('ul:first').prepend(phoneBtn);
                    }
                }

                if (settings.position == 'right') {
                    nav.addClass('right');
                }

                if (settings.position == 'left') {
                    nav.addClass('left');
                }

                if (!settings.showArrows) {
                    nav.addClass('hide-arrows');
                }

                if (settings.closeBtn && !(settings.position == 'right' || settings.position == 'left')) {
                    // adds a link to end of nav to close it
                    nav.find('ul:first').append('<li><a href="#" class="close-menu"><span class="icon-close"></span> ' + closeLabel + '</a></li>');
                }

                if (settings.scrollbarFix) {
                    $('body').addClass('atechnav-noscroll-x');
                }

                // svg graphics
                // phone icon
                var phoneIcon = document.getElementById('icon-phone'); // Gets phone icon element
                if( phoneIcon ) {
                    phoneIcon.setAttribute('viewBox','0 0 480 480');
                    var newPhoneIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace
                    newPhoneIcon.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'); // Sets path's data
                    phoneIcon.appendChild(newPhoneIcon);
                }

                // location icon
                var locationIcon = document.getElementById('icon-location'); //Gets phone icon element
                if( locationIcon ) {
                    locationIcon.setAttribute('viewBox','0 0 480 480');
                    var newLocationIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace
                    newLocationIcon.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'); // Sets path's data
                    locationIcon.appendChild(newLocationIcon);
                }

                // opens and closes menu
                $('.menu-toggle, .atechnav-open').on('click', function(e) {
                    e.preventDefault();

                    // if nav position is left or right, uses fadeToggle instead of slideToggle
                    if (settings.position == 'left' || settings.position == 'right') {
                        nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
                        nav.toggleClass('active');

                        if(nav.hasClass('active') && nav.hasClass('mobile')) {
                            // closes the menu when clicked outside of it
                            $(document).on('click', function(event) {
                                // ensures menu hides only on mobile nav
                                if(nav.hasClass('mobile')) {
                                    if (!$(event.target).closest(nav).length) {
                                        nav.find('ul:first').stop(true, true).fadeOut(settings.openingSpeed);
                                        nav.removeClass('active');
                                    }
                                }
                            });
                        }

                    } else {
                        // static position - normal open and close animation
                        nav.find('ul:first').stop(true, true).slideToggle(settings.openingSpeed);
                        nav.toggleClass('active');
                    }
                });

                // activates the close button
                $('.close-menu, .atechnav-close').on('click', function() {

                    nav.removeClass('active');

                    if (settings.position == 'left' || settings.position == 'right') {
                        nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
                    } else {
                        nav.find('ul:first').stop(true, true).slideUp(settings.openingSpeed).toggleClass('active');
                    }
                });


                // adds toggle button to li items that have children
                nav.find('li a').each(function() {
                    if ($(this).next().length > 0) {
                        $(this).parent('li').addClass('has-sub').append('<a class="dd-toggle" href="#"><span class="icon-plus"></span></a>');
                    }
                });

                // expands the dropdown menu on each click
                nav.find('li .dd-toggle').on('click', function(e) {
                    e.preventDefault();
                    $(this).parent('li').children('ul').stop(true, true).slideToggle(settings.openingSpeed);
                    $(this).parent('li').toggleClass('open');
                });

                var resetTriggers = function() {
                    nav.find('li').off('mouseenter');
                    nav.find('li').off('mouseleave');
                }

                // defines top level items
                parentItems = nav.find('> ul > li');

                var setTriggers = function() {
                    $(parentItems).each(function() {
                        if( $(this).hasClass('mega') ) {
                            // mega dropdown
                            $(this).on('mouseenter', function(){
                                $(this).find('ul').first().stop(true, true).slideDown(settings.openingSpeed);
                            });
                            $(this).on('mouseleave', function(){
                                $(this).find('ul').first().stop(true, true).slideUp(settings.openingSpeed);
                            });
                        } else {
                            // normal dropdown
                            // first-level
                            $(this).on('mouseenter', function(){
                                $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed);
                            });
                            $(this).on('mouseleave', function(){
                                $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed);
                            });

                            // second level and below
                            $(this).find('li.has-sub').on('mouseenter', function(){
                                $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed);
                            });
                            $(this).find('li.has-sub').on('mouseleave', function(){
                                $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed);
                            });
                        }
                    });
                }

                windowCheck();

                // check browser width in real-time
                function windowCheck() {
                    var browserWidth = window.innerWidth;

                    if(browserWidth <= breakpoint || settings.mobileMode) {
                        // mobile/tablet nav

                        resetTriggers();
                        nav.addClass('mobile');
                        nav.removeClass('desktop');

                        // closes the menu when resizing window back to desktop
                        if( !nav.hasClass('active') && nav.find('ul:first').is(':visible') ) {
                            nav.find('ul:first').hide();
                        }

                        // resets all the styles back to normal that are added on the desktop for the mega dropdown
                        nav.find('li.mega').each(function() {
                            $(this).find('ul').first().removeAttr('style');
                            $(this).find('ul').first().children().removeAttr('style');
                        });

                    } else {
                        // desktop nav
                        nav.addClass('desktop');
                        nav.removeClass('mobile');

                        if(nav.hasClass('active')) {
                            nav.removeClass('active');
                        }

                        // ensures atechnav is visible after resizing window
                        if( !nav.hasClass('active') && nav.find('ul:first').is(':hidden') ) {
                            nav.find('ul:first').show();
                        }

                        // hides items that were open on mobile
                        $('li.open').removeClass('open').find('ul:visible').hide();

                        resetTriggers();
                        setTriggers();

                        // mega dropdown
                        navWidth = 0;

                        $(parentItems).each(function() {
                        // calculates the nav width based on the sum of all top-level items
                        navWidth += $(this)[0].getBoundingClientRect().width;
                            navWidth = Math.round(navWidth);

                            if($(this).hasClass('mega')) {
                                // left aligns mega dropdown with nav
                                $(this).find('ul').first().css({'left': 0, 'right': 0, 'margin': '0px auto'});

                                // gets the data-column attribute and divides the columns equally
                                numCols = $(this).attr('data-columns');
                                if(numCols==2) {
                                    $(this).find('li.has-sub').width('50%');
                                } else if (numCols==3) {
                                    $(this).find('ul').first().children().width('33.33%');
                                } else if (numCols==4) {
                                    $(this).find('ul').first().children().width('25%');
                                } else if (numCols==5) {
                                    $(this).find('ul').first().children().width('20%');
                                } else if (numCols==6) {
                                    $(this).find('ul').first().children().width('16.66%');
                                } else if (numCols==7) {
                                    $(this).find('ul').first().children().width('14.28%');
                                } else if (numCols==8) {
                                    $(this).find('ul').first().children().width('12.5%');
                                } else {
                                    // defaults to 4 column
                                    $(this).find('ul').first().children().width('25%');
                                }
                            }

                        });

                        // defines the mega dropdown width to be the same as nav width
                        if(parentItems.hasClass('mega')) {
                            nav.find('li.mega > ul').css({'max-width':navWidth});
                        }
                        // end mega dropdown

                    } // end desktop nav
                } // windowCheck()

                $(window).on('resize', function() {
                    windowCheck();
                });
            });
        }
    }(jQuery));


whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat