Sliding Dropdown Menu Inspired By Stripe.com

Category: Javascript , Menu & Navigation | August 9, 2021
Author:fernandofas
Views Total:432 views
Official Page:Go to website
Last Update:August 9, 2021
License:MIT

Preview:

Sliding Dropdown Menu Inspired By Stripe.com

Description:

A good-looking sliding dropdown mega menu inspired by Stripe.com.

Create with Vanilla JavaScript and CSS/CSS3.

See Also:

How to use it:

1. Create the HTML for the menu.

<nav class="topnavBar">
  <div class="dropdownBackground">
    <span class="arrow"></span>
  </div>
  <ul class="nav-bar">
    <li>
      <a href="#">Products</a>
      <div class="dropdown products">
        <section class="cols-wrapper">
          <section class="cols-sections">
            <ul class="list-container">
              <span class="col-title">Payments</span>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" viewBox="0 0 40 40" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <title>Payments logo</title>
                  <path
                    d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
                    fill="url(#product-icon-payments-SiteMenu-a)"></path>
                  <path
                    d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
                    fill="#96F"></path>
                  <path
                    d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
                    fill="url(#product-icon-payments-SiteMenu-b)"></path>
                  <defs>
                    <linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#11EFE3"></stop>
                      <stop offset="1" stop-color="#21CFE0"></stop>
                    </linearGradient>
                    <linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#0048E5"></stop>
                      <stop offset="1" stop-color="#9B66FF"></stop>
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
                </a>
              </li>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" viewBox="0 0 40 40" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <title>Payments logo</title>
                  <path
                    d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
                    fill="url(#product-icon-payments-SiteMenu-a)"></path>
                  <path
                    d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
                    fill="#96F"></path>
                  <path
                    d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
                    fill="url(#product-icon-payments-SiteMenu-b)"></path>
                  <defs>
                    <linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#11EFE3"></stop>
                      <stop offset="1" stop-color="#21CFE0"></stop>
                    </linearGradient>
                    <linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#0048E5"></stop>
                      <stop offset="1" stop-color="#9B66FF"></stop>
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
                </a>
              </li>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" xmlns="http://www.w3.org/2000/svg" fill="none">
                  <path fill="url(#product-icon-payment-links-SiteMenu-a)"
                    d="M1.001 0a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L.07 16.634A1 1 0 001.001 18h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0017.633 0H1z" />
                  <path fill="url(#product-icon-payment-links-SiteMenu-b)"
                    d="M1.001 0a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L.07 16.634A1 1 0 001.001 18h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0017.633 0H1z"
                    opacity=".25" />
                  <path fill="#96F"
                    d="M10.001 9a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L9.07 25.634A1 1 0 0010.001 27h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0026.633 9H10z" />
                  <path fill="#0048E5"
                    d="M22.384 9a2 2 0 01-.138.732l-2.753 7A2 2 0 0117.633 18h-5.636a1 1 0 00-.07-.366L9.07 10.366A1 1 0 0110.001 9h12.383z" />
                  <path fill="url(#product-icon-payment-links-SiteMenu-c)"
                    d="M10.001 9a1 1 0 00-.93 1.366l2.857 7.268a1 1 0 010 .732L9.07 25.634A1 1 0 0010.001 27h16.631a2 2 0 001.861-1.268l2.753-7a2 2 0 000-1.464l-2.753-7A2 2 0 0026.633 9H10z" />
                  <defs>
                    <linearGradient id="product-icon-payment-links-SiteMenu-a" x1="11.377" x2="11.258" y1=".294"
                      y2="18" gradientUnits="userSpaceOnUse">
                      <stop offset=".226" stop-color="#11EFE3" />
                      <stop offset="1" stop-color="#21CFE0" />
                    </linearGradient>
                    <linearGradient id="product-icon-payment-links-SiteMenu-c" x1="24.033" x2="11.648" y1="16.5"
                      y2="5.719" gradientUnits="userSpaceOnUse">
                      <stop stop-color="#96F" />
                      <stop offset="1" stop-color="#96F" stop-opacity="0" />
                    </linearGradient>
                    <radialGradient id="product-icon-payment-links-SiteMenu-b" cx="0" cy="0" r="1"
                      gradientTransform="matrix(-7.0001 -13.49994 16.78746 -8.70477 14.033 13.5)"
                      gradientUnits="userSpaceOnUse">
                      <stop offset=".094" stop-color="#fff" />
                      <stop offset="1" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Payments Links<br /><span class="sub-link-menu">No-code
                payments</span>
                </a>
              </li>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12.5 1A2.5 2.5 0 0010 3.5v32.831a2.5 2.5 0 01-1.853 2.415l28-7.506A2.5 2.5 0 0038 28.825V3.5A2.5 2.5 0 0035.5 1h-23z"
                    fill="#00D924" />
                  <path
                    d="M1.253 24.548a2.5 2.5 0 00-.915 3.415l5.477 9.486a2.5 2.5 0 002.812 1.165l26.147-7.006-10.187-17.645a2.5 2.5 0 00-3.415-.915l-19.919 11.5z"
                    fill="url(#product-icon-invoicing-SiteMenu-a)" />
                  <path
                    d="M8.402 38.663c.075-.013.15-.03.225-.05l26.147-7.005-10.187-17.645a2.5 2.5 0 00-3.415-.915L10 19.498V36.33a2.5 2.5 0 01-1.598 2.332z"
                    fill="url(#product-icon-invoicing-SiteMenu-b)" />
                  <defs>
                    <linearGradient id="product-icon-invoicing-SiteMenu-a" x1="17.39" y1="20.25" x2="17.389" y2="38"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#FFD748" />
                      <stop offset="1" stop-color="#FFC148" />
                    </linearGradient>
                    <linearGradient id="product-icon-invoicing-SiteMenu-b" x1="21.589" y1="12.712" x2="21.588"
                      y2="38.663" gradientUnits="userSpaceOnUse">
                      <stop stop-color="#00A600" />
                      <stop offset="1" stop-color="#00D924" />
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Invoicing<br /><span class="sub-link-menu">Online
                invoices</span>
                </a>
              </li>
            </ul>
          </section>
          <section class="cols-sections">
            <ul class="list-container">
              <span class="col-title">Financial services</span>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7.62 26.48l-.02-.03a2.44 2.44 0 01-.7-1.48 2.49 2.49 0 01.11-1.05c.05-.28.13-.54.24-.77l.08-.17L14.67 10h21.85A2.52 2.52 0 0139 12.37l.01.16v22.92A2.52 2.52 0 0136.67 38l-.16.01H19a2.5 2.5 0 00.64-1.97c-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1v-.01l.14.1a2.52 2.52 0 01-.27-.21l-.03-.03z"
                    fill="url(#product-icon-issuing-SiteMenu-a)" />
                  <path
                    d="M22.05 2.1c.7-.15 1.41 0 1.99.41l6.56 4.72a2.5 2.5 0 01.92 2.8V10l-8.5 26-.05.2-.03.08-.03.09-.15.32-.02.04-.19.29-.03.04a2.9 2.9 0 01-.23.25l-.03.02a2.24 2.24 0 01-.58.4l-.03.03c-.1.05-.2.1-.31.13h-.05l-.33.08h-.05a2.3 2.3 0 01-.36.03H3.53A2.53 2.53 0 011 35.45v-22.9C1 11.14 2.13 10 3.53 10H16.6l3.8-6.7a2.5 2.5 0 011.46-1.15l.18-.05z"
                    fill="#0073E6" />
                  <path
                    d="M31.38 10l-8.37 26-.02.1-.02.1-.03.08-.03.09-.07.16-.08.16-.02.04-.1.15-.09.14-.03.04-.11.13-.12.12-.03.02c-.08.09-.17.16-.26.23l-.15.1-.17.08-.03.02-.15.07-.16.06h-.05l-.16.05-.1.01.1-.1c.4-.51.59-1.17.51-1.82-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1a2.54 2.54 0 01-.26-.26l-.04-.05a2.48 2.48 0 01-.12-.14l-.02-.04-.03-.04a2.43 2.43 0 01-.17-.3l-.03-.06a2.5 2.5 0 01-.15-.42l-.01-.07-.02-.1-.01-.06a2.51 2.51 0 01.05-1.01l.02-.09a2.5 2.5 0 01.04-.1c.03-.25.1-.5.21-.74l.1-.17L16.66 10h14.71z"
                    fill="url(#product-icon-issuing-SiteMenu-b)" />
                  <defs>
                    <linearGradient id="product-icon-issuing-SiteMenu-a" x1="22.92" y1="11.68" x2="22.92" y2="39.68"
                      gradientUnits="userSpaceOnUse">
                      <stop offset=".1" stop-color="#FF80FF" />
                      <stop offset=".39" stop-color="#FF7BF9" />
                      <stop offset=".77" stop-color="#FF6EEA" />
                      <stop offset="1" stop-color="#FF62DC" />
                    </linearGradient>
                    <linearGradient id="product-icon-issuing-SiteMenu-b" x1="31.38" y1="27.93" x2="11.62" y2="27.93"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#0073E6" />
                      <stop offset="1" stop-color="#00299C" />
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Issuing<br /><span class="sub-link-menu">Card creation</span>
                </a>
              </li>
            </ul>
          </section>
          <section class="cols-sections">
            <ul class="list-container">
              <span class="col-title">Financial services</span>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7.62 26.48l-.02-.03a2.44 2.44 0 01-.7-1.48 2.49 2.49 0 01.11-1.05c.05-.28.13-.54.24-.77l.08-.17L14.67 10h21.85A2.52 2.52 0 0139 12.37l.01.16v22.92A2.52 2.52 0 0136.67 38l-.16.01H19a2.5 2.5 0 00.64-1.97c-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1v-.01l.14.1a2.52 2.52 0 01-.27-.21l-.03-.03z"
                    fill="url(#product-icon-issuing-SiteMenu-a)" />
                  <path
                    d="M22.05 2.1c.7-.15 1.41 0 1.99.41l6.56 4.72a2.5 2.5 0 01.92 2.8V10l-8.5 26-.05.2-.03.08-.03.09-.15.32-.02.04-.19.29-.03.04a2.9 2.9 0 01-.23.25l-.03.02a2.24 2.24 0 01-.58.4l-.03.03c-.1.05-.2.1-.31.13h-.05l-.33.08h-.05a2.3 2.3 0 01-.36.03H3.53A2.53 2.53 0 011 35.45v-22.9C1 11.14 2.13 10 3.53 10H16.6l3.8-6.7a2.5 2.5 0 011.46-1.15l.18-.05z"
                    fill="#0073E6" />
                  <path
                    d="M31.38 10l-8.37 26-.02.1-.02.1-.03.08-.03.09-.07.16-.08.16-.02.04-.1.15-.09.14-.03.04-.11.13-.12.12-.03.02c-.08.09-.17.16-.26.23l-.15.1-.17.08-.03.02-.15.07-.16.06h-.05l-.16.05-.1.01.1-.1c.4-.51.59-1.17.51-1.82-.07-.66-.43-1.09-.95-1.47l-.15-.1-10.62-7.73-.14-.1a2.54 2.54 0 01-.26-.26l-.04-.05a2.48 2.48 0 01-.12-.14l-.02-.04-.03-.04a2.43 2.43 0 01-.17-.3l-.03-.06a2.5 2.5 0 01-.15-.42l-.01-.07-.02-.1-.01-.06a2.51 2.51 0 01.05-1.01l.02-.09a2.5 2.5 0 01.04-.1c.03-.25.1-.5.21-.74l.1-.17L16.66 10h14.71z"
                    fill="url(#product-icon-issuing-SiteMenu-b)" />
                  <defs>
                    <linearGradient id="product-icon-issuing-SiteMenu-a" x1="22.92" y1="11.68" x2="22.92" y2="39.68"
                      gradientUnits="userSpaceOnUse">
                      <stop offset=".1" stop-color="#FF80FF" />
                      <stop offset=".39" stop-color="#FF7BF9" />
                      <stop offset=".77" stop-color="#FF6EEA" />
                      <stop offset="1" stop-color="#FF62DC" />
                    </linearGradient>
                    <linearGradient id="product-icon-issuing-SiteMenu-b" x1="31.38" y1="27.93" x2="11.62" y2="27.93"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#0073E6" />
                      <stop offset="1" stop-color="#00299C" />
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Issuing<br /><span class="sub-link-menu">Card creation</span>
                </a>
              </li>
            </ul>
          </section>
          <section class="cols-sections">
            <ul class="list-container">
              <span class="col-title">Business operations</span>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M24.87 4.46a1.26 1.26 0 00-1.8.2l-4.6 5.82L3.42 29.45c.27.22.54.45.78.7a9.42 9.42 0 011.13 1.32l.1.13a9.15 9.15 0 01.8 1.43c.29.62.5 1.28.65 1.95a2.5 2.5 0 002.45 1.93H38.7a1.27 1.27 0 001.27-1.3 42.43 42.43 0 00-15.1-31.15z"
                    fill="#9A66FF" />
                  <path
                    d="M27.8 21.98A33.82 33.82 0 005.95 4.28a1.29 1.29 0 00-1.56.98L.1 25.4a2.54 2.54 0 001.4 2.88 9.48 9.48 0 012.72 1.87l.17.17c.35.36.67.74.96 1.15l.1.13a9.15 9.15 0 01.8 1.43l20.94-9.31a1.29 1.29 0 00.62-1.74z"
                    fill="url(#product-icon-radar-SiteMenu-a)" />
                  <path
                    d="M18.46 10.48l.47.38a33.82 33.82 0 018.87 11.12 1.29 1.29 0 01-.62 1.74L6.25 33.03a9.15 9.15 0 00-.8-1.43l-.1-.13-.23-.3a8.5 8.5 0 00-.74-.85 9.7 9.7 0 00-.95-.86l15.03-18.98z"
                    fill="url(#product-icon-radar-SiteMenu-b)" />
                  <defs>
                    <linearGradient id="product-icon-radar-SiteMenu-a" x1="13.98" y1="4.24" x2="13.98" y2="33.03"
                      gradientUnits="userSpaceOnUse">
                      <stop offset=".26" stop-color="#FF5091" />
                      <stop offset=".91" stop-color="#E03071" />
                    </linearGradient>
                    <linearGradient id="product-icon-radar-SiteMenu-b" x1="15.68" y1="10.48" x2="15.68" y2="33.03"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#6E00F5" />
                      <stop offset="1" stop-color="#9860FE" />
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Radar<br /><span class="sub-link-menu">Fraud &amp; risk
                management</span>
                </a>
              </li>
              <li class="list-item">
                <svg class="menu-sub-icon" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 35V7a3 3 0 015.48-1.69L21.2 21 9.32 38H8a3 3 0 01-3-3z"
                    fill="url(#product-icon-sigma-SiteMenu-a)" />
                  <path d="M8.06 4h25.16a1.5 1.5 0 011.1 2.51L21.15 21 5.84 4.92A3 3 0 018.05 4z"
                    fill="url(#product-icon-sigma-SiteMenu-b)" />
                  <path d="M7.88 38H33.2a1.5 1.5 0 001.11-2.51L21.11 21 7.14 36.33A1 1 0 007.88 38z" fill="#9A66FF" />
                  <defs>
                    <linearGradient id="product-icon-sigma-SiteMenu-a" x1="13.1" y1="38" x2="13.1" y2="12.99"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#9860FE" />
                      <stop offset="1" stop-color="#6E00F5" />
                    </linearGradient>
                    <linearGradient id="product-icon-sigma-SiteMenu-b" x1="20.28" y1="8.42" x2="20.28" y2="19.47"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#FF5091" />
                      <stop offset="1" stop-color="#E03071" />
                    </linearGradient>
                  </defs>
                </svg>
                <a href="#" class="nav-link-dropdown">Payments<br /><span class="sub-link-menu">Online payments</span>
                </a>
              </li>
              <li class="list-item">
                <svg class="menu-sub-icon " width="40" height="40" viewBox="0 0 40 40" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <title>Payments logo</title>
                  <path
                    d="M34.61 11.28a2.56 2.56 0 0 0-1.22-1.04L8.54.2A2.57 2.57 0 0 0 5 2.6V15c0 1.05.64 2 1.61 2.4l6.44 2.6 21.56 8.72c.26-.4.4-.88.39-1.36V12.64c0-.48-.13-.96-.39-1.37z"
                    fill="url(#product-icon-payments-SiteMenu-a)"></path>
                  <path
                    d="M34.63 11.28L13.06 20l-6.45 2.6A2.58 2.58 0 0 0 5 25v12.42a2.58 2.58 0 0 0 3.54 2.39L33.4 29.76c.5-.21.93-.57 1.21-1.04.26-.41.4-.88.39-1.36V12.64c0-.48-.12-.95-.37-1.36z"
                    fill="#96F"></path>
                  <path
                    d="M34.62 11.28l.1.17c.18.37.28.77.28 1.19v-.03 14.75c0 .48-.13.95-.39 1.36L13.06 20l21.56-8.72z"
                    fill="url(#product-icon-payments-SiteMenu-b)"></path>
                  <defs>
                    <linearGradient id="product-icon-payments-SiteMenu-a" x1="20" y1="4.13" x2="20" y2="21.13"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#11EFE3"></stop>
                      <stop offset="1" stop-color="#21CFE0"></stop>
                    </linearGradient>
                    <linearGradient id="product-icon-payments-SiteMenu-b" x1="35" y1="11.28" x2="35" y2="28.72"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#0048E5"></stop>
                      <stop offset="1" stop-color="#9B66FF"></stop>
                    </linearGradient>
                  </defs>
                </svg>
                <a class="nav-link-dropdown" href="#">Sigma<br /><span class="sub-link-menu">Custom reports</span>
                </a>
              </li>
            </ul>
          </section>
        </section>
      </div>
    </li>
    <li>
      <a href="#">Use cases</a>
      <ul class="dropdown usecases">
        <li>
          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <path fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd"
              d="M5.43 6L5.1 7.22a3 3 0 005.8 1.56L11.64 6H15a1 1 0 010 2l-.9 7.11a1 1 0 01-1 .89H2.9a1 1 0 01-1-.89L1 8a1 1 0 110-2h4.43zM9.61.02l.97.26a.5.5 0 01.35.6L9.57 6l-.6 2.26a1 1 0 01-1.94-.52l2-7.45a.5.5 0 01.58-.27z" />
          </svg>
          <a class="nav-link-dropdown" href="#">E-commerce&nbsp;<br /><span class="sub-link-menu sub-pad">Unity online
          and in-person payments</span></a>
        </li>
        <li>
          <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M1.88 0h11.25C14.15 0 15 .84 15 1.88v11.25c0 1.03-.84 1.87-1.88 1.87H1.88A1.88 1.88 0 010 13.12V1.88C0 .83.84 0 1.88 0zm8.97 4.22h.63a.7.7 0 000-1.4H8.2a.7.7 0 00-.7.7v2.34a.7.7 0 001.4 0V4.53a3.28 3.28 0 01.47 5.66v1.6a4.69 4.69 0 001.48-7.57zm-6.7 6.64h-.63a.7.7 0 000 1.4H6.8a.7.7 0 00.7-.7V9.22a.7.7 0 00-1.4 0v1.32a3.28 3.28 0 01-.47-5.65v-1.6a4.69 4.69 0 00-1.48 7.57z"
              fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd" />
          </svg>
          <a class="nav-link-dropdown" href="#">SaaS&nbsp;<br /><span class="sub-link-menu sub-pad">Managing
          recurrinbg billing and subscriptions</a>
        </li>
        <li>
          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M13.57 7.65c-.71 0-1.4-.27-1.94-.74-.52.46-1.2.74-1.93.74s-1.42-.27-1.94-.74c-.54.46-1.23.74-1.94.74-.74 0-1.43-.27-1.95-.74a3.02 3.02 0 01-2.86.59 1.86 1.86 0 01-.49-.21v7.17c0 .32.28.6.6.6h7.55V9.8c0-.11.1-.2.2-.2h3.14c.11 0 .2.1.2.2v5.26h2.15c.33 0 .6-.28.6-.6V7.29c-.14.1-.3.16-.49.2-.27.1-.58.16-.9.16zM6.83 11.7c0 .12-.1.2-.2.2H3.51a.2.2 0 01-.2-.2V9.8c0-.12.1-.2.2-.2h3.1c.12 0 .2.1.2.2v1.9h.02zm8.31-8.32L13.04.42c-.2-.26-.5-.42-.82-.42h-8.9a1 1 0 00-.82.42L.38 3.38c-.25.34-.38.77-.38 1.2 0 .86.5 1.7 1.32 1.94.92.28 1.78-.1 2.24-.79.15-.22.47-.22.64 0 .34.53.95.89 1.62.89a1.9 1.9 0 001.61-.89c.15-.22.48-.22.64 0 .34.53.95.89 1.62.89a1.9 1.9 0 001.61-.89c.15-.22.48-.22.64 0 .44.69 1.3 1.07 2.24.79.82-.25 1.32-1.1 1.32-1.95.02-.42-.11-.83-.36-1.19z"
              fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" fill-rule="evenodd" />
          </svg>
          <a class="nav-link-dropdown" href="#">Marketplaces&nbsp;<br /><span class="sub-link-menu sub-pad">Pay out
          globally and facilitate multipart payments</a>
        </li>
        <li>
          <svg width="14" height="16" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.98 0a.52.52 0 00-.25.08L.24 4.03a.5.5 0 00-.24.43c0 .17.1.33.24.42l6.49 3.95c.17.1.37.1.54 0l6.49-3.95a.5.5 0 00.24-.42.5.5 0 00-.24-.43L7.27.08a.52.52 0 00-.3-.08zm-5.5 6.82l-1.24.76A.5.5 0 000 8c0 .17.1.33.24.42l6.49 3.96c.17.1.37.1.54 0l6.49-3.96A.5.5 0 0014 8a.5.5 0 00-.24-.42l-1.25-.76-4.7 2.86a1.58 1.58 0 01-1.62 0l-4.7-2.86zm0 3.54l-1.24.76a.5.5 0 00-.24.43c0 .17.1.33.24.42l6.49 3.95c.17.1.37.1.54 0l6.49-3.95a.5.5 0 00.24-.42.5.5 0 00-.24-.43l-1.25-.76-4.7 2.87a1.58 1.58 0 01-1.62 0l-4.7-2.87z"
              fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" />
          </svg>
          <a class="nav-link-dropdown" href="#">Platforms&nbsp;<br /><span class="sub-link-menu sub-pad">Lets customer
          accept payments within our platform</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Pricing</a>
      <ul class="dropdown pricing">
        <li>
          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M8 16A8 8 0 118 0a8 8 0 010 16zm.17-10.25c.71 0 1.62.26 2.34.65V4.18a6.28 6.28 0 00-2.34-.47c-1.9 0-3.21 1-3.21 2.66 0 2.61 3.58 2.19 3.58 3.3 0 .44-.35.59-.88.59-.78 0-1.76-.35-2.55-.78v2.25c.88.37 1.74.56 2.55.56 1.96 0 3.28-.97 3.28-2.67 0-2.8-3.6-2.3-3.6-3.36 0-.36.33-.5.83-.5z"
              fill="var(--iconLightColor, var(--iconHoverLightColor, #0A2540))" />
          </svg>
          <a class="nav-link-dropdown" href="#">Free</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

2. The necessary CSS styles.

/*General settings*/

html {
  box-sizing: border-box;
  font-family: "Roboto", Arial, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
}


/*nav bar settings*/

nav {
  position: relative;
  perspective: 600px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav-bar>li {
  position: relative;
  display: flex;
  justify-content: center;
}

.nav-bar>li>a {
  color: #000;
  font-size: 1em;
  padding: 10px 20px;
  margin: 20px;
  text-decoration: none;
  display: inline-block;
}

.nav-link-dropdown,
.sub-link-menu {
  padding-left: 15px;
}

.sub-link-menu {
  color: #afafaf;
  white-space: nowrap;
}

.sub-link-menu:hover {
  color: #565656;
}

.dropdown {
  opacity: 0;
  display: none;
  position: absolute;
  overflow: hidden;
  padding: 20px;
  top: -20px;
  border-radius: 2px;
  transition: all 0.5s;
  transform: translateY(100px);
  will-change: opacity;
}


/*general link settings*/

.dropdown a {
  text-decoration: none;
  color: #000;
}

a.button {
  background: black;
  display: block;
  padding: 10px;
  color: white;
  margin-bottom: 10px;
}


/*first submenu settings*/

.menu-sub-icon {
  width: 40px;
  height: 40px;
  float: left;
}

.menu-sub-main-text {
  margin-left: 15px;
}

.cols-wrapper {
  display: flex;
}

.cols-sections>.list-container>.col-title {
  font-size: 0.8em !important;
  float: left !important;
  text-transform: uppercase;
  display: block;
  margin-bottom: 50px;
  text-align: left !important;
}

.cols-wrapper>.cols-sections {
  display: inline-block !important;
  padding: 0;
}

.list-container {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  display: inline-block;
}

.list-item {
  padding: 10px 0 10px 0;
  width: 260px;
  height: auto;
  margin: 0 auto;
  line-height: 20px;
  color: #000;
  font-size: 0.8em;
  text-align: left;
  float: left;
}


/*trigger events settings*/

.trigger-enter .dropdown {
  display: block;
}

.trigger-enter-active .dropdown {
  opacity: 1;
}

.dropdownBackground {
  width: 100px;
  height: 100px;
  position: absolute;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s, opacity 0.1s, transform 0.2s;
  transform-origin: 50% 0;
  display: flex;
  justify-content: center;
  opacity: 0;
}

.dropdownBackground.open {
  opacity: 1;
}

.arrow {
  position: absolute;
  width: 15px;
  height: 15px;
  display: block;
  background: white;
  transform: translateY(-50%) rotate(45deg);
}


/*second and third submenu settings*/

.usecases {
  min-width: 260px;
}

.usecases li,
.pricing li {
  font-size: 0.8em;
  line-height: 20px;
  padding: 10px 0 10px 0;
  display: block;
}

.sub-pad {
  padding-left: 34px;
  line-height: 25px;
}

3. The JavaScript (Vanilla) to activate the menu.

const submenutrigger = document.querySelectorAll(".nav-bar > li");
const dropBackground = document.querySelector(".dropdownBackground");
const nav = document.querySelector(".topnavBar");
/*activate submenu*/
function activeSub() {
  this.classList.add("trigger-enter");
  setTimeout(
    () =>
    this.classList.contains("trigger-enter") &&
    this.classList.add("trigger-enter-active"),
    100
  );
  dropBackground.classList.add("open");
  /*get position on mouseover*/
  const dropdown = this.querySelector(".dropdown");
  // console.log(dropdown);
  const dropdownPos = dropdown.getBoundingClientRect();
  // console.log(dropdownPos);
  const navPos = nav.getBoundingClientRect();
  // console.log(navPos);
  const pos = {
    height: dropdownPos.height,
    width: dropdownPos.width,
    top: dropdownPos.top - navPos.top,
    left: dropdownPos.left - navPos.left,
  };
  /*set position of the arrow and submenu on mouseover*/
  dropBackground.style.setProperty("width", `${pos.width}px`);
  dropBackground.style.setProperty("height", `${pos.height}px`);
  dropBackground.style.setProperty(
    "transform",
    `translate(${pos.left}px, ${pos.top}px)`
  );
}
/*deactivate submenu*/
function deactiveSub() {
  this.classList.remove("trigger-enter", "trigger-enter-active");
  dropBackground.classList.remove("open");
}
/*mouse events*/
submenutrigger.forEach((trigger) =>
  trigger.addEventListener("mouseenter", activeSub)
);
submenutrigger.forEach((trigger) =>
  trigger.addEventListener("mouseleave", deactiveSub)
);

You Might Be Interested In:


Leave a Reply