Tab Nav

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="uhasselt-container">
    <div class="tab-nav">
        <ul>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Bachelor</span>

                </a>

            </li>
            <li>
                <a href="#" class="link active" aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Master</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Voor wie?</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

            </li>
        </ul>
    </div>
    <div class="dropdown-nav">
        <details>
            <summary>
                <div class="wrapper">
                    <div>
                        Bekijk de inhoud van deze pagina
                    </div>
                    <span class="icon fal fa-angle-down  fa-lg icon-open" aria-hidden="true"></span>
                    <span class="icon fal fa-angle-up  fa-lg icon-close" aria-hidden="true"></span>
                </div>
            </summary>
            <div class="dropdown-content">
                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Bachelor</span>

                </a>

                <a href="#" class="link active" aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Master</span>

                </a>

                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Voor wie?</span>

                </a>

                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

                <a href="#" class="link " aria-label="" title="">
                    <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                    <span class="text">Wanneer heb je les?</span>

                </a>

            </div>
        </details>
    </div>
</div>


        <div class="uhasselt-container">
    <div class="tab-nav">
        <ul>
            {{#each items}}
                <li>
                    {{render '@link' this}}
                </li>
            {{/each}}
        </ul>
    </div>
    <div class="dropdown-nav">
        <details>
            <summary>
                <div class="wrapper">
                    <div>
                        Bekijk de inhoud van deze pagina
                    </div>
                    {{render '@icon' @root.icon-open}}
                    {{render '@icon' @root.icon-close}}
                </div>
            </summary>
            <div class="dropdown-content">
                {{#each items}}
                    {{render '@link' this}}
                {{/each}}
            </div>
        </details>
    </div>
</div>


        
            
            {
  "icon-open": {
    "style": "fal",
    "icon": "fa-angle-down",
    "modifier": "icon-open",
    "size": "fa-lg"
  },
  "icon-close": {
    "style": "fal",
    "icon": "fa-angle-up",
    "modifier": "icon-close",
    "size": "fa-lg"
  },
  "items": [
    {
      "text": "Bachelor",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Master",
      "href": "#",
      "modifier": "active",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Voor wie?",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Wanneer heb je les?",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Wanneer heb je les?",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Wanneer heb je les?",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    },
    {
      "text": "Wanneer heb je les?",
      "href": "#",
      "iconBefore": {
        "style": "fas",
        "icon": "fa-caret-right"
      }
    }
  ]
}

File:

Content:


                                .tab-nav {
    z-index: 100;
    @apply shadow-sm relative hidden lg:block;
    > ul {
        @apply flex;

        > li {
            flex-grow: 1;
            flex-basis: 0;
            @apply border-r border-red-400;

            .link {
                @apply flex items-center justify-center w-full h-full text-center text-white bg-red text-intro py-5 px-2;

                &:hover,
                &.active {
                    @apply bg-red-600;

                    &,
                    span {
                        @apply no-underline;
                    }
                }

                .icon {
                    @apply hidden;
                }
            }

            &.active .link {
                @apply bg-red-600;

                &,
                span {
                    @apply no-underline;
                }
            }
        }
    }
}

.dropdown-nav {
    z-index: 10000;
    display: block;
    position: relative;
    @apply lg:hidden mb-8;

    @media only screen and (max-height: 575px) {
        display: block;
      }

    details {
        .wrapper {
            @apply cursor-pointer bg-red text-white shadow-sm border-0 text-md p-4 flex justify-between text-left w-full items-center;
        }
        summary {
        }

        .icon-open {
            @apply inline;
        }

        .icon-close {
            @apply hidden;
        }

        &[open] {
            .icon-open {
                @apply hidden;
            }

            .icon-close {
                @apply inline;
            }
        }
    }

    .dropdown-content {
        @apply bg-red w-full shadow-sm overflow-y-auto max-h-60;
        z-index: 1000;

        &::-webkit-scrollbar {
            width: 10px;
        }

        &::-webkit-scrollbar-track {
            @apply bg-red-600;
        }

        &::-webkit-scrollbar-thumb {
            @apply bg-red-800;
        }

        &::-webkit-scrollbar-thumb:hover {
            @apply bg-black;
        }

        a {
            @apply text-white p-4 block;

            &:hover {
                @apply bg-red-600 no-underline;
            }

            .text {
                @apply no-underline;
            }
        }
    }
}

URL: /components/raw/tab-nav/tab-nav.css
Filesystem Path: src\components\03-molecules\tab-nav\tab-nav.css
Size: 2.3 KB

Content:


                                (function () {

    'use strict';

    let tabNav = document.querySelector('.tab-nav');
    var mainNav = document.querySelector('.nav-desktop-wrapper');

    if ($('.tab-nav')[0]) {
        const tabSpy = new Gumshoe('.tab-nav a[href^="#"]', {
            reflow: true,
            offset: function () {
                return (
                    document.querySelector('.tab-nav').offsetTop +
                    document.querySelector('.tab-nav').offsetHeight +
                    32
                );
            },
        });
    }

    var lastScrollTop = 0;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (st > lastScrollTop) {
            var stickyTab = new Sticky('.tab-nav', {
                marginTop: 16,
            });
        } else {
            var stickyTab = new Sticky('.tab-nav', {
                marginTop: 90,
            });
        }
        lastScrollTop = st;
    });

    $('.tab-nav a[href^="#anch-"]').on('click', function (e) {
        e.preventDefault();

        const $target = $($(this).attr('href'));

        if ($target.length == 0) {
            return;
        }

        var curScrollPos = $(document).scrollTop();
        let newScrollPos = $target.offset().top - 30;

        const $tabnav = $('.tab-nav');
        if ($tabnav.length > 0) {
            newScrollPos -= $tabnav.height();
        }

        if (newScrollPos <= curScrollPos) {
            // Substract sticky menu height if scrolling up

            const $mainNav = $('.nav-desktop-wrapper');
            if ($mainNav.length > 0) {
                newScrollPos -= $mainNav.height();
            }

            newScrollPos = Math.max(newScrollPos, 0);
        }
        if ($('.tab-nav').css('position') == 'relative') {
            $('html, body').animate({ scrollTop: newScrollPos - 80 });
        } else {
            $('html, body').animate({ scrollTop: newScrollPos });
        }

        let hash = this.hash;
        history.pushState(null, null, hash);
    });
})();

URL: /components/raw/tab-nav/tab-nav.js
Filesystem Path: src\components\03-molecules\tab-nav\tab-nav.js
Size: 2.1 KB

Handle: @tab-nav
Preview:
- With layout
- Component only
Filesystem Path: src\components\03-molecules\tab-nav\tab-nav.hbs
References (2): @link, @icon

No notes defined.