nav-footer

Done

HTML
View
Context
Assets
Info
Notes


        
        <nav class="footerNav">
    <div class="footerNav__content">
        <h3 class="footerNav__title heading heading--4">
            <a href="https://pioneerdj.com/en/product/" class="footerNav__title__link">Products</a>

            <span class="footerNav__trigger footerNav__triggerIcon"></span>
        </h3>

        <div class="footerNav__menu" style="height: 264px;">
            <ul class="footerNav__list">
                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/player/" class="footerNav__link">DJ players</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/mixer/" class="footerNav__link">DJ mixers</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/controller/" class="footerNav__link">DJ controllers</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/turntable/" class="footerNav__link">Turntables</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/all-in-one-system/" class="footerNav__link">All-in-one DJ systems</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/effector/" class="footerNav__link">Remix stations</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/dj-sampler/" class="footerNav__link">DJ samplers</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/production/" class="footerNav__link">Music production</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/headphones/" class="footerNav__link">Headphones</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/monitor-speakers/" class="footerNav__link">Monitor speakers</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/pa-speakers/" class="footerNav__link">PA speakers</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/software/" class="footerNav__link">DJ software &amp; Interfaces</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/product/accessories/" class="footerNav__link">Accessories</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="footerNav__content">
        <h3 class="footerNav__title heading heading--4">
            <a href="https://pioneerdj.com/en/support/" class="footerNav__title__link">Support</a>

            <span class="footerNav__trigger footerNav__triggerIcon"></span>
        </h3>

        <div class="footerNav__menu" style="height: 192px;">
            <ul class="footerNav__list">
                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/support/contact/" class="footerNav__link" title="Contact">Contact</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/support/documents/" class="footerNav__link">Manuals</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/support/software/" class="footerNav__link">Software &amp; firmware</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/support/software-information/" class="footerNav__link">Software information</a>
                </li>

                <li class="footerNav__item">
                    <a href="http://faq.pioneerdj.com" class="footerNav__link" target="_blank">FAQ
                        <span class="footerNav__icon">
                            <svg class="icon-external" viewBox="0 0 32 32">
                                <path fill="currentColor" d="M20 0l3.2 3.2H1.6C.8 3.2 0 4 0 4.96V30.4c0 .8.8 1.6 1.6 1.6h24.8c.96 0 1.6-.8 1.6-1.76V8.48l.16-.16 3.84 4V0H20zm4.8 28.64H3.36V6.56h17.76l-12 12.32 4.48 4.48 11.2-11.52v16.8z" />
                            </svg>

                        </span>
                    </a>
                </li>

                <li class="footerNav__item">
                    <a href="http://forums.pioneerdj.com/home" class="footerNav__link" target="_blank">Forum
                        <span class="footerNav__icon">
                            <svg class="icon-external" viewBox="0 0 32 32">
                                <path fill="currentColor" d="M20 0l3.2 3.2H1.6C.8 3.2 0 4 0 4.96V30.4c0 .8.8 1.6 1.6 1.6h24.8c.96 0 1.6-.8 1.6-1.76V8.48l.16-.16 3.84 4V0H20zm4.8 28.64H3.36V6.56h17.76l-12 12.32 4.48 4.48 11.2-11.52v16.8z" />
                            </svg>

                        </span>
                    </a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/landing/pioneer-dj-certified/" class="footerNav__link">Certification program</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/account/about/" class="footerNav__link">About your account</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/support/important-product-notice/" class="footerNav__link">Important product notices</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="footerNav__content">
        <h3 class="footerNav__title heading heading--4">
            <a href="https://pioneerdj.com/en/news/" class="footerNav__title__link" title="News">News</a>
        </h3>

        <h3 class="footerNav__title heading heading--4">
            <a href="https://pioneerdj.com/en/shops/search/" class="footerNav__title__link">Where to buy</a>
        </h3>

        <h3 class="footerNav__title heading heading--4">
            <a href="https://pioneerdj.com/en/company/company-info/" class="footerNav__title__link">About us</a>

            <span class="footerNav__trigger footerNav__triggerIcon"></span>
        </h3>

        <div class="footerNav__menu" style="height: 48px;">
            <ul class="footerNav__list">
                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/company/company-info" class="footerNav__link">Company info</a>
                </li>

                <li class="footerNav__item">
                    <a href="https://pioneerdj.com/en/corporate-contact/" class="footerNav__link">Corporate contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


        <nav class="footerNav">
  <div class="footerNav__content">
    <h3 class="footerNav__title heading heading--4">
      <a href="https://pioneerdj.com/en/product/" class="footerNav__title__link">Products</a>

      <span class="footerNav__trigger footerNav__triggerIcon"></span>
    </h3>

    <div class="footerNav__menu" style="height: 264px;">
      <ul class="footerNav__list">
        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/player/" class="footerNav__link">DJ players</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/mixer/" class="footerNav__link">DJ mixers</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/controller/" class="footerNav__link">DJ controllers</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/turntable/" class="footerNav__link">Turntables</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/all-in-one-system/" class="footerNav__link">All-in-one DJ systems</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/effector/" class="footerNav__link">Remix stations</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/dj-sampler/" class="footerNav__link">DJ samplers</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/production/" class="footerNav__link">Music production</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/headphones/" class="footerNav__link">Headphones</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/monitor-speakers/" class="footerNav__link">Monitor speakers</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/pa-speakers/" class="footerNav__link">PA speakers</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/software/" class="footerNav__link">DJ software &amp; Interfaces</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/product/accessories/" class="footerNav__link">Accessories</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="footerNav__content">
    <h3 class="footerNav__title heading heading--4">
      <a href="https://pioneerdj.com/en/support/" class="footerNav__title__link">Support</a>

      <span class="footerNav__trigger footerNav__triggerIcon"></span>
    </h3>

    <div class="footerNav__menu" style="height: 192px;">
      <ul class="footerNav__list">
        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/support/contact/" class="footerNav__link" title="Contact">Contact</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/support/documents/" class="footerNav__link">Manuals</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/support/software/" class="footerNav__link">Software &amp; firmware</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/support/software-information/" class="footerNav__link">Software information</a>
        </li>

        <li class="footerNav__item">
          <a href="http://faq.pioneerdj.com" class="footerNav__link" target="_blank">FAQ
            <span class="footerNav__icon">
              {{render '@icon-external' }}
            </span>
          </a>
        </li>

        <li class="footerNav__item">
          <a href="http://forums.pioneerdj.com/home" class="footerNav__link" target="_blank">Forum
            <span class="footerNav__icon">
              {{render '@icon-external' }}
            </span>
          </a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/landing/pioneer-dj-certified/" class="footerNav__link">Certification program</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/account/about/" class="footerNav__link">About your account</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/support/important-product-notice/" class="footerNav__link">Important product notices</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="footerNav__content">
    <h3 class="footerNav__title heading heading--4">
      <a href="https://pioneerdj.com/en/news/" class="footerNav__title__link" title="News">News</a>
    </h3>

    <h3 class="footerNav__title heading heading--4">
      <a href="https://pioneerdj.com/en/shops/search/" class="footerNav__title__link">Where to buy</a>
    </h3>

    <h3 class="footerNav__title heading heading--4">
      <a href="https://pioneerdj.com/en/company/company-info/" class="footerNav__title__link">About us</a>

      <span class="footerNav__trigger footerNav__triggerIcon"></span>
    </h3>

    <div class="footerNav__menu" style="height: 48px;">
      <ul class="footerNav__list">
        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/company/company-info" class="footerNav__link">Company info</a>
        </li>

        <li class="footerNav__item">
          <a href="https://pioneerdj.com/en/corporate-contact/" class="footerNav__link">Corporate contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


        
            
            /* No context defined. */

File:

Content:


                                var footerNav = function(n, t, i) {
    "use strict";
    var r = {
        selectors: {
            theWrap: ".footerNav",
            theParent: ".footerNav__content",
            theTrigger: ".footerNav__trigger",
            theTarget: ".footerNav__menu",
            theInner: ".footerNav__list",
            theVisibles: ".menu-is-visible"
        },
        classes: {
            menuIsVisible: "menu-is-visible"
        },
        theOffset: 20,
        theWindowWidth: null
    }
      , u = {}
      , o = function() {
        if (!i) {
            console.log("jQuery is not loaded!");
            return
        }
        u.theWrap = i(r.selectors.theWrap);
        u.theTrigger = i(r.selectors.theTrigger);
        u.theTarget = i(r.selectors.theTarget);
        u.theInner = i(r.selectors.theInner);
        r.theWindowWidth = n.innerWidth;
        u.theTrigger.on("click", function(n) {
            n.preventDefault();
            h(i(this))
        });
        n.addEventListener("resize", s);
        f()
    }
      , s = function() {
        clearTimeout(r.theTimer);
        r.theTimer = setTimeout(function() {
            r.theWindowWidth !== n.innerWidth && (r.theWindowWidth = n.innerWidth,
            e(),
            f())
        }, 300)
    }
      , f = function() {
        u.theInner.each(function() {
            i(this).parents(r.selectors.theTarget)[0].style.height = this.offsetHeight + "px"
        })
    }
      , h = function(n) {
        var t;
        n && (t = n.parents(r.selectors.theParent),
        t[0].classList.contains(r.classes.menuIsVisible) ? l(n) : c(n))
    }
      , c = function(n) {
        var t;
        n && (t = n.parents(r.selectors.theParent),
        e(),
        t[0].classList.add(r.classes.menuIsVisible),
        setTimeout(function() {
            a(n)
        }, 200))
    }
      , l = function(n) {
        var t;
        n && (t = n.parents(r.selectors.theParent),
        t[0].classList.remove(r.classes.menuIsVisible))
    }
      , e = function() {
        var n = i(r.selectors.theVisibles);
        n.length && n.removeClass(r.classes.menuIsVisible)
    }
      , a = function(n) {
        var t = 0;
        n && (t = n ? n.offset().top - u.theWrap[0].scrollTop : 0,
        t -= r.theOffset,
        u.theWrap.animate({
            scrollTop: t
        }, 300))
    };
    n.addEventListener("DOMContentLoaded", o)
}(window, window.document, window.jQuery);

URL: /components/raw/nav-footer/_nav-footer.back.js
Filesystem Path: ../src/03_molecules/nav-footer/_nav-footer.back.js
Size: 2.4 KB

Content:


                                // disabled footerNav because it's included in https://preprod.pioneerdj.com/Bundles/JsHeader/?v=BMne-U6Vgal8q3NFbvZfdgOMUnIfzy_RdwlKQDCSjtg1
/*
if (!window.footerNav) {
  var footerNav = function (w, d, $, undefined) {

    'use strict';

    var s = {
      selectors: {
        theWrap: '.footerNav',
        theParent: '.footerNav__content',
        theTrigger: '.footerNav__trigger',
        theTarget: '.footerNav__menu',
        theInner: '.footerNav__list',
        theVisibles: '.menu-is-visible'
      },
      classes: {
        menuIsVisible: 'menu-is-visible'
      },
      theOffset: 20,
      theWindowWidth: null
    },
    els = {},
    init = function () {

      // no jQuery
      if (!$) {
        console.log('jQuery is not loaded!');return;
      }

      // define elements
      els.theWrap = $(s.selectors.theWrap);
      els.theTrigger = $(s.selectors.theTrigger);
      els.theTarget = $(s.selectors.theTarget);
      els.theInner = $(s.selectors.theInner);

      // define settings
      s.theWindowWidth = w.innerWidth;

      // bind events
      els.theTrigger.on('click', function (e) {
        e.preventDefault();
        toggleIt($(this));
      });
      w.addEventListener('resize', resizeIt);

      // do stuff on init
      setHeight();
    },
    resizeIt = function () {

      // close mega menu on resize
      clearTimeout(s.theTimer);
      s.theTimer = setTimeout(function () {

        // ANDROID FIX:
        // change of window height triggers window resize
        // only check if window width changes to trigger resize
        if (s.theWindowWidth === w.innerWidth) {
          return;
        }

        // update the window width var
        s.theWindowWidth = w.innerWidth;

        // do stuff on resize
        hideAll();
        setHeight();
      }, 300);
    },
    setHeight = function () {

      // set height for css transitioning
      els.theInner.each(function () {

        $(this).parents(s.selectors.theTarget)[0].style.height = this.offsetHeight + 'px';
      });
    },
    toggleIt = function (el) {

      // define variables
      var theParent;

      // no param
      if (!el) {
        return;
      }

      // define the parent
      theParent = el.parents(s.selectors.theParent);

      // toggle class
      theParent[0].classList.contains(s.classes.menuIsVisible) ? hideIt(el) : showIt(el);
    },
    showIt = function (el) {

      // define variables
      var theParent;

      // no param
      if (!el) {
        return;
      }

      // define the parent
      theParent = el.parents(s.selectors.theParent);

      // close all menus
      hideAll();

      // add class
      theParent[0].classList.add(s.classes.menuIsVisible);

      setTimeout(function () {

        // scroll header nav to clicked item
        scrollToIt(el);
      }, 200);
    },
    hideIt = function (el) {

      // define variables
      var theParent;

      // no param
      if (!el) {
        return;
      }

      // define the parent
      theParent = el.parents(s.selectors.theParent);

      // remove class
      theParent[0].classList.remove(s.classes.menuIsVisible);
    },
    hideAll = function () {

      // define variables
      var theVisibles = $(s.selectors.theVisibles);

      // remove the class from it
      theVisibles.length && theVisibles.removeClass(s.classes.menuIsVisible);
    },
    scrollToIt = function (el) {

      // define variables
      var theTop = 0;

      // no param
      if (!el) {
        return;
      }

      // define the point to scroll to
      theTop = el ? el.offset().top - els.theWrap[0].scrollTop : 0;
      theTop -= s.theOffset;

      // scroll when opening
      els.theWrap.animate({
        scrollTop: theTop
      }, 300);
    };

    w.addEventListener('DOMContentLoaded', init);
  }(window, window.document, window.jQuery);
}
*/

URL: /components/raw/nav-footer/nav-footer.js
Filesystem Path: ../src/03_molecules/nav-footer/nav-footer.js
Size: 3.9 KB

Content:


                                .footerNav {
  position: relative;
  display: block;
  width: 100%;
  background-color: #2A2937;

  @media all and (min-width: 1024px) {
    display: flex;
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: var(--gap--4);
    border: 1px solid #3B3B53;

    .theme-2020 & {
      max-width: var(--section--9);
      border: 1px solid var(--color--neutrals-7);
    }
  }

  .theme-2020 & {
    background-color: transparent;
  }
}

.footerNav__content {
  display: block;

  @media all and (min-width: 1024px) {
    flex: 1 1 auto;
    padding-right: 92px;
    border: none;
  }

  &:nth-child(3) {
    padding-right: 0;
    flex-basis: 20%;
  }
}

.footerNav__title {
  transition: color 300ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gap--4) var(--gap--4) var(--gap--4) !important;
  color: #FFF;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;

  @media all and (min-width: 1024px) {
    justify-content: flex-start;
    margin-bottom: var(--gap--4);
    padding: 0 !important;
    font-size: 14px;
    font-weight: 700;
  }

  .footerNav__trigger:hover & {
    @media(hover: hover) {
      text-decoration: underline;
    }
  }

  .theme-2020 &,
  #wrapper & {
    margin-bottom: 0;
    color: var(--color--neutrals-0);
    text-transform: uppercase;
    font-family: var(--font--main);

    @media all and (min-width: 1024px) {
      margin-bottom: var(--gap--4) !important;
      font-size: 14px !important;
      color: inherit;
      font-weight: 500;
    }
  }
}

.footerNav__title__link {
  @media all and (min-width: 1024px) {
    border-bottom: 4px solid #395EE2;
  }

  .theme-2020 & {
    transition: color 300ms;
    text-transform: uppercase !important;

    @media all and (min-width: 1024px) {
      border-bottom: none;
    }

    &:hover,
    &:active,
    &:focus {
      color: var(--color--neutrals-0) !important;
      text-decoration: none;
    }
  }
}

.footerNav__triggerIcon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: #3B3B53;
  cursor: pointer;

  @media all and (min-width: 1024px) {
    display: none;
  }

  .theme-2020 & {
    color: var(--color--action);
    background-color: var(--color--neutrals-10);
  }
}

.footerNav__triggerIcon:before,
.footerNav__triggerIcon:after {
  display: block;
  flex: 0 0 auto;
  width: var(--gap--4);
  height: 2px;
  background-color: #FFF;
  content: '';

  .theme-2020 & {
    background-color: currentColor;
  }
}

.footerNav__triggerIcon:after {
  transition: transform 200ms, opacity 200ms;
  transform: scale(1) rotate(-90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: calc(var(--gap--2) * -1);
  opacity: 1;

  .menu-is-visible & {
    transform: scale(0) rotate(-90deg);
    opacity: 0;
  }
}

.footerNav__menu {
  transition: height 300ms;
  overflow: hidden;

  @media all and (min-width: 1024px) {
    display: block;
    width: 100%;
    margin-bottom: var(--gap--4);

    column-count: 3;
    column-gap: var(--gap--8);
  }

  .footerNav__content:not(.menu-is-visible) & {
    height: 0 !important;
  }

  .footerNav__content:not(.menu-is-visible) & {
    @media all and (min-width: 1024px) {
      height: auto !important;
    }
  }

  .footerNav__content:nth-child(2) & {
    @media all and (min-width: 1024px) {
      column-count: 2;
    }
  }

  .footerNav__content:nth-child(3) & {
    @media all and (min-width: 1024px) {
      column-count: 1;
    }
  }
}

.footerNav__list {
  display: block;
  margin: 0 !important;
  padding: 0 var(--gap--8) var(--gap--4);
  list-style-type: none;

  @media all and (min-width: 1024px) {
    padding: 0;
    background-color: transparent;
  }
}

.footerNav__item {
  break-inside: avoid;
}

.footerNav__link {
  transition: color 300ms;
  display: inline-flex;
  align-items: center;
  height: 40px;
  color: #FFF;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;

  @media all and (min-width: 1024px) {
    height: auto;
    padding: 4px 0;
    color: #C1C1C1;
    font-size: 12px;
  }

  .theme-2020 & {
    color: inherit;
  }

  &:hover {
    text-decoration: underline !important;
    color: var(--color--neutrals-0) !important;

    @media all and (min-width: 1024px) {
      color: #FFF;
    }
  }
}

.footerNav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: var(--gap--2);

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

URL: /components/raw/nav-footer/nav-footer.scss
Filesystem Path: ../src/03_molecules/nav-footer/nav-footer.scss
Size: 4.7 KB

Handle: @nav-footer
Preview:
- With layout
- Component only
Filesystem Path: ../src/03_molecules/nav-footer/nav-footer.hbs
References (1): @icon-external
Referenced by (2): @footer, @footer--old

No notes defined.