Vebego Component Library

Submenu 

<div class="mol-submenu">
    <div class="atm-heading h5">Meer over bouwreizen</div>

    <div class="submenu-wrapper">
        <div class="submenu-viewport">
            <ul class="submenu-list">
                <li class="active">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Meld je aan</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Planning</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Sri Lanka</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Marokko</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Ghana</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Zuid-Afrika</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
                <li class="">
                    <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Noord-Afrika</a>

                    <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                </li>
            </ul>
        </div>
        <a class="inactive submenu-prev"><span class="atm-icon text-blue far fa-chevron-left   "></span></a>
        <a class="inactive submenu-next"><span class="atm-icon text-blue far fa-chevron-right   "></span></a>
    </div>
</div>
 
<div class="mol-submenu">
    {{render "@heading" heading}}
    <div class="submenu-wrapper">
        <div class="submenu-viewport">
            <ul class="submenu-list">
                {{#each items}}
                <li class="{{#if active}}active{{/if}}">
                    {{render '@nav-link' this merge=true}}
                    {{render '@slash'}}
                </li>
                {{/each}}
            </ul>
        </div>
        <a class="inactive submenu-prev">{{render "@icon" iconPrev}}</a>
        <a class="inactive submenu-next">{{render "@icon" iconNext}}</a>
    </div>
</div>
 
{
  "heading": {
    "text": "Meer over bouwreizen",
    "tag": "div",
    "modifier": "h5"
  },
  "items": [
    {
      "text": "Meld je aan",
      "active": true,
      "href": "#"
    },
    {
      "text": "Planning",
      "href": "#"
    },
    {
      "text": "Sri Lanka",
      "href": "#"
    },
    {
      "text": "Marokko",
      "href": "#"
    },
    {
      "text": "Ghana",
      "href": "#"
    },
    {
      "text": "Zuid-Afrika",
      "href": "#"
    },
    {
      "text": "Noord-Afrika",
      "href": "#"
    }
  ],
  "iconPrev": {
    "icon": "fa-chevron-left",
    "style": "far",
    "modifier": "text-blue"
  },
  "iconNext": {
    "icon": "fa-chevron-right",
    "style": "far",
    "modifier": "text-blue"
  }
}
  • Content: 
    .mol-submenu {
    .atm-heading {
        @apply mb-6;
    }

    .submenu-wrapper {
        @apply relative;
        @apply font-display font-semibold text-md;
    }

    .submenu-viewport {
        @apply relative overflow-x-scroll overflow-y-auto;

        /* -webkit-overflow-scrolling: touch;
        -ms-scroll-chaining: chained;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none; */
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .submenu-list {
        @apply flex;

        li {
            @apply relative flex flex-shrink-0 items-center;

            /* scroll-snap-align: start; */

            .atm-slash {
                @apply mx-4;
            }

            &:last-child {
                .atm-slash {
                    @apply hidden;
                }
            }

            .atm-nav-link {
                @apply inline-block text-black hover:no-underline hover:text-cta;
            }

            &.active {
                .atm-nav-link {
                    @apply text-cta;
                }
            }
        }
    }

    .submenu-prev,
    .submenu-next {
        @apply flex absolute transform top-1/2 -translate-y-1/2 py-2 px-3 cursor-pointer;

        &.inactive {
            @apply hidden;
        }
    }

    .submenu-prev {
        @apply -left-4;
        background-image: linear-gradient(to right, #fff 60%, transparent);
    }

    .submenu-next {
        @apply -right-4;
        background-image: linear-gradient(to left, #fff 60%, transparent);
    }
}
  • URL: /components/raw/submenu/submenu.css
  • Filesystem Path: src\components\03-molecules\submenu\submenu.css
  • Size: 1.7 KB
  • Content: 
    (function () {

  "use strict";

  var submenus = document.querySelectorAll(".mol-submenu");

  submenus.forEach((el, i) => {
    var viewport = submenus[i].querySelector(".submenu-viewport");
    var list = submenus[i].querySelector(".submenu-list");
    var prevLink = submenus[i].querySelector(".submenu-prev");
    var nextLink = submenus[i].querySelector(".submenu-next");

    prevLink.addEventListener("click", function (e) {
      viewportScrollTo(-100);
    });

    nextLink.addEventListener("click", (event) => {
      viewportScrollTo(100);
    });

    viewport.addEventListener("scroll", function (e) {
      var x = this.scrollLeft;
      var w = this.scrollWidth - this.offsetWidth;

      prevLink.classList.toggle("inactive", x <= 0);
      nextLink.classList.toggle("inactive", x >= w);
    });

    window.addEventListener("load", viewportRecalculate);
    window.addEventListener("resize", viewportRecalculate);

    function viewportScrollTo(scrollDiff) {
      viewport.scrollTo({
        left: viewport.scrollLeft + scrollDiff,
        behavior: "smooth",
      });
    }

    function viewportRecalculate() {
      var lw = list.offsetWidth;
      var vw = viewport.scrollWidth;

      prevLink.classList.toggle("inactive", lw >= vw);
      nextLink.classList.toggle("inactive", lw >= vw);

      viewport.dispatchEvent(new Event("scroll"));
    }
  });
})();
  • URL: /components/raw/submenu/submenu.js
  • Filesystem Path: src\components\03-molecules\submenu\submenu.js
  • Size: 1.4 KB

No notes defined.