BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Menu: 6 Levels 

<script>
    /* The script is creating demo environment
            overflow-x: hidden; //Must have
            height: 101vh; //The webpage has always scrollbar
        */
    var bodyTag = document.getElementsByTagName("BODY")[0];
    bodyTag.setAttribute("style", "padding: 0; overflow-x: hidden; height: 101vh;");
</script>

<div id="rh-menu-main-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large" tabindex="0">
    <span class="icon-menu rh-button-circle__icon"></span>
</div id="rh-menu-main-button">

<!-- 6 levels version -->
<div class="rh-menu__overlay rh-dp--none"></div>
<div id="rh-menu-body" class="rh-menu__body rh-pos--fixed">
    <div class="rh-menu__top-bar">
        <div id="rh-menu-close-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-menu__button-close">
            <span class="icon-x rh-button-circle__icon"></span>
        </div>
    </div>

    <div class="rh-menu__offset-top"></div>

    <div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Halland – bästa livsplatsen
            </a>

        </div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Utveckling och tillväxt
            </a>

            <div id="7" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
        </div>

        <div id="sub7" class="rh-menu__item-sub-container">
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Samhällsplanering och trafik
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Stöd och finansiering
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Vårt utvecklingsuppdrag
                </a>

                <div id="10" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                    <span class="icon-plus"></span>
                </div>
            </div>

            <div id="sub10" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-1">
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Hållbar utveckling
                    </a>

                </div>

                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Tillväxtstrategi 2014–2020
                    </a>

                    <div id="12" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                        <span class="icon-plus"></span>
                    </div>
                </div>

                <div id="sub12" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-2">
                    <div class="rh-menu__item rh-menu__item-sub-item rh-pl-4">
                        <a href="#" class="rh-link--navigation rh-menu__link">
                        Uppföljning av tillväxtstrategin
                        </a>

                        <div id="13" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                            <span class="icon-plus"></span>
                        </div>
                    </div>

                    <div id="sub13" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-3">
                        <div class="rh-menu__item rh-menu__item-sub-item rh-pl-5">
                            <a href="#" class="rh-link--navigation rh-menu__link">
                            Uppföljning 2018
                            </a>

                            <div id="15" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                                <span class="icon-plus"></span>
                            </div>
                        </div>

                        <div id="sub15" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-3">
                            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-6">
                                <a href="#" class="rh-link--navigation rh-menu__link">
                                Grundfakta Halland
                                </a>

                            </div>
                            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-6">
                                <a href="#" class="rh-link--navigation rh-menu__link">
                                Hög attraktivitet
                                </a>

                            </div>
                            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-6">
                                <a href="#" class="rh-link--navigation rh-menu__link">
                                Stark konkurrenskraft
                                </a>

                            </div>
                        </div>

                        <div class="rh-menu__item rh-menu__item-sub-item rh-pl-5">
                            <a href="#" class="rh-link--navigation rh-menu__link">
                            Uppföljning 2017
                            </a>

                        </div>

                        <div class="rh-menu__item rh-menu__item-sub-item rh-pl-5">
                            <a href="#" class="rh-link--navigation rh-menu__link">
                            Uppföljning 2016
                            </a>

                        </div>

                    </div>

                    <div class="rh-menu__item rh-menu__item-sub-item rh-pl-4">
                        <a href="#" class="rh-link--navigation rh-menu__link">
                        Halländska styrkeområden
                        </a>

                    </div>

                </div>

            </div>

        </div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Om Region Halland
            </a>

            <div id="2" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
        </div>

        <div id="sub2" class="rh-menu__item-sub-container">
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Region Hallands organisation
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Vision, mål och uppdrag
                </a>

                <div id="4" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                    <span class="icon-plus"></span>
                </div>
            </div>

            <div id="sub4" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-1">
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Regional utvecklingsstrategi 2035
                    </a>

                </div>

                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Regional utvecklingsstrategi 2050
                    </a>

                </div>

            </div>

        </div>

    </div>

    <div class="rh-menu__offset-bottom"></div>
</div>
 
<script>
    /* The script is creating demo environment
        overflow-x: hidden; //Must have
        height: 101vh; //The webpage has always scrollbar
    */
    var bodyTag = document.getElementsByTagName("BODY")[0];
    bodyTag.setAttribute("style", "padding: 0; overflow-x: hidden; height: 101vh;");
</script>

{{!-- Menu button --}}
<div id="rh-menu-main-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large" tabindex="0">
    <span class="icon-menu rh-button-circle__icon"></span>
</div id="rh-menu-main-button">

{{!-- Menu body group--}}
{{#if isDefault}}
<!-- Standard version (3 levels) -->
<div class="rh-menu__overlay rh-dp--none"></div>
<div id="rh-menu-body" class="rh-menu__body rh-pos--fixed">
    <div class="rh-menu__top-bar">
        <div id="rh-menu-close-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-menu__button-close">
            <span class="icon-x rh-button-circle__icon"></span>
        </div>
    </div>

    <div class="rh-menu__offset-top"></div>

    {{!-- Body --}}
    <div>
        {{#each items}}{{!-- Level 1 - Root --}}
        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                {{title}}
            </a>

            {{#if subItems}}
            <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
            {{/if}}
        </div>

        {{#if subItems}}{{!-- Level 2 --}}
        <div id="sub{{id}}" class="rh-menu__item-sub-container">
            {{#each subItems}}
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    {{title}}
                </a>

                {{#if subItems}}
                <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                    <span class="icon-plus"></span>
                </div>
                {{/if}}
            </div>

            {{#if subItems}}{{!-- Level 3 --}}
            <div id="sub{{id}}" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-1">
                {{#each subItems}}
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        {{title}}
                    </a>
                </div>
                {{/each}}
            </div>
            {{/if}}{{!-- End of level 3 --}}
            {{/each}}
        </div>
        {{/if}}{{!-- End of level 2 --}}
        {{/each}}{{!-- End of level 1 --}}
    </div>

    <div class="rh-menu__offset-bottom"></div>
</div>

{{else}}
<!-- 6 levels version -->
<div class="rh-menu__overlay rh-dp--none"></div>
<div id="rh-menu-body" class="rh-menu__body rh-pos--fixed">
    <div class="rh-menu__top-bar">
        <div id="rh-menu-close-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-menu__button-close">
            <span class="icon-x rh-button-circle__icon"></span>
        </div>
    </div>

    <div class="rh-menu__offset-top"></div>

    {{!-- Body --}}
    <div>
        {{#each items}}{{!-- Level 1 - Root --}}
        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                {{title}}
            </a>

            {{#if subItems}}
            <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
            {{/if}}
        </div>

        {{#if subItems}}{{!-- Level 2 --}}
        <div id="sub{{id}}" class="rh-menu__item-sub-container">
            {{#each subItems}}
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    {{title}}
                </a>

                {{#if subItems}}
                <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                    <span class="icon-plus"></span>
                </div>
                {{/if}}
            </div>

            {{#if subItems}}{{!-- Level 3 --}}
            <div id="sub{{id}}" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-1">
                {{#each subItems}}
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        {{title}}
                    </a>

                    {{#if subItems}}
                    <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                        <span class="icon-plus"></span>
                    </div>
                    {{/if}}
                </div>

                {{#if subItems}}{{!-- Level 4 --}}
                <div id="sub{{id}}" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-2">
                    {{#each subItems}}
                    <div class="rh-menu__item rh-menu__item-sub-item rh-pl-4">
                        <a href="#" class="rh-link--navigation rh-menu__link">
                        {{title}}
                        </a>

                        {{#if subItems}}
                        <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                            <span class="icon-plus"></span>
                        </div>
                        {{/if}}
                    </div>

                    {{#if subItems}}{{!-- Level 5 --}}
                    <div id="sub{{id}}" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-3">
                        {{#each subItems}}
                        <div class="rh-menu__item rh-menu__item-sub-item rh-pl-5">
                            <a href="#" class="rh-link--navigation rh-menu__link">
                            {{title}}
                            </a>

                            {{#if subItems}}
                            <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                                <span class="icon-plus"></span>
                            </div>
                            {{/if}}
                        </div>

                        {{#if subItems}}{{!-- Level 6 --}}
                        <div id="sub{{id}}" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-3">
                            {{#each subItems}}
                            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-6">
                                <a href="#" class="rh-link--navigation rh-menu__link">
                                {{title}}
                                </a>

                                {{#if subItems}}
                                <div id="{{id}}" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                                    <span class="icon-plus"></span>
                                </div>
                                {{/if}}
                            </div>
                            {{/each}}
                        </div>
                        {{/if}}{{!-- End of level 6 --}}
                        {{/each}}
                    </div>
                    {{/if}}{{!-- End of level 5 --}}
                    {{/each}}
                </div>
                {{/if}}{{!-- End of level 4 --}}
                {{/each}}
            </div>
            {{/if}}{{!-- End of level 3 --}}
            {{/each}}
        </div>
        {{/if}}{{!-- End of level 2 --}}
        {{/each}}{{!-- End of level 1 --}}
    </div>

    <div class="rh-menu__offset-bottom"></div>
</div>
{{/if}}
 
{
  "name": "default",
  "status": "rework",
  "isDefault": false,
  "items": [
    {
      "id": 1,
      "title": "Halland – bästa livsplatsen",
      "subItems": []
    },
    {
      "id": 7,
      "title": "Utveckling och tillväxt",
      "subItems": [
        {
          "id": 8,
          "title": "Samhällsplanering och trafik"
        },
        {
          "id": 9,
          "title": "Stöd och finansiering"
        },
        {
          "id": 10,
          "title": "Vårt utvecklingsuppdrag",
          "subItems": [
            {
              "id": 11,
              "title": "Hållbar utveckling"
            },
            {
              "id": 12,
              "title": "Tillväxtstrategi 2014–2020",
              "subItems": [
                {
                  "id": 13,
                  "title": "Uppföljning av tillväxtstrategin",
                  "subItems": [
                    {
                      "id": 15,
                      "title": "Uppföljning 2018",
                      "subItems": [
                        {
                          "id": 18,
                          "title": "Grundfakta Halland"
                        },
                        {
                          "id": 19,
                          "title": "Hög attraktivitet"
                        },
                        {
                          "id": 20,
                          "title": "Stark konkurrenskraft"
                        }
                      ]
                    },
                    {
                      "id": 16,
                      "title": "Uppföljning 2017"
                    },
                    {
                      "id": 17,
                      "title": "Uppföljning 2016"
                    }
                  ]
                },
                {
                  "id": 14,
                  "title": "Halländska styrkeområden"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "title": "Om Region Halland",
      "subItems": [
        {
          "id": 3,
          "title": "Region Hallands organisation"
        },
        {
          "id": 4,
          "title": "Vision, mål och uppdrag",
          "subItems": [
            {
              "id": 5,
              "title": "Regional utvecklingsstrategi 2035"
            },
            {
              "id": 6,
              "title": "Regional utvecklingsstrategi 2050"
            }
          ]
        }
      ]
    }
  ]
}
  • Content: 
    /* Menu */
/* It's needed for the menu
body { overflow-x: hidden; } */

.rh-menu {

    &__button {

        &-close {
            /* Box-modell/beteende */
            margin-left: auto;

            /* Visuellt */
            @if $menu-button-close--border {
                border: $menu-button-close--border;
            }

            @if $menu-button-close--background-color {
                background-color: $menu-button-close--background-color;
            }

            /* Typografi */
            @if $menu-button-close--color {
                color: $menu-button-close--color;
            }

            /* Blandat/övrigt */
            cursor: pointer;

            @if $menu-button-close--hover-active {

                &:hover,
                &:active {

                    /* Visuellt */
                    @if $menu-button-close--border-hover-active {
                        border: $menu-button-close--border-hover-active;
                    }

                    @if $menu-button-close--background-color-hover-active {
                        background-color: $menu-button-close--background-color-hover-active;
                    }

                    /* Typografi */
                    @if $menu-button-close--color-hover-active {
                        color: $menu-button-close--color-hover-active;
                    }
                }
            }
        }
    }

    &__top-bar {
        /* Positionering */
        top: 0;

        /* Box-modell/beteende */
        display: flex;
        align-items: center;
        height: $menu-top-bar__height;
        padding-right: 0.71875em; //11.5px
        background-color: $menu-top-bar--background-color;

        /* Visuellt */
        box-shadow: $menu-top-bar--box-shadow;
    }

    &__body {
        /* Positionering */
        z-index: $menu-body--z-index;
        top: 0;
        right: -$menu-body--max-width;

        /* Box-modell/beteende */
        height: 100vh;
        width: 100%;
        min-width: $menu-body--min-width;
        max-width: $menu-body--max-width;

        background-color: #ffffff;

        transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;

        scroll-behavior: smooth; // Useful on mobile

        // iOS
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        &--show {
            right: 0;
        }
    }

    &__overlay {
        /* Positionering */
        z-index: $menu-overlay--z-index;
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        /* Box-modell/beteende */
        height: 100%;
        width: 100%;

        background-color: $menu-overlay--background-color;
    }

    &__link {
        /* Typografi */
        color: $menu-item-link--color;
        line-height: $menu-item-link--line-height;

        &-level-1 {
            font-size: $menu-item-link__level-1--font-size;
            font-weight: $menu-item-link__level-1--font-weight;
            color: $menu-item-link__level-1--color;
        }

        &--active {
            font-weight: $menu-item-link--font-weight-active;
        }
    }

    &__item {
        /* Box-modell/beteende */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;

        padding-top: .9em;
        padding-right: 1em;
        padding-bottom: .9em;

        min-height: $menu-item--min-height;

        border-bottom: $menu-item--border-bottom; //#9CB8C8;

        &-button {
            /* Box-modell/beteende */
            border-color: $menu-color-main;

            /* Blandat/övrigt */
            cursor: pointer;

            &-parent {
                /* Visuellt */
                background-color: $menu-item-button-parent--background-color;

                /* Typografi */
                color: $menu-item-button-parent--color;

                @if $menu-item-button-parent-hover-active {

                    &:active,
                    &:hover {
                        @if $menu-item-button-parent--background-color-hover-active {
                            background-color: $menu-item-button-parent--background-color-hover-active;
                        }

                        @if $menu-item-button-parent--color-hover-active {
                            color: $menu-item-button-parent--color-hover-active;
                        }
                    }
                }
            }

            &-sub-item {
                /* Visuellt */
                background-color: $menu-sub-item-button--background-color;
                border: $menu-sub-item-button--border;

                /* Typografi */
                color: $menu-sub-item-button--color;

                @if $menu-sub-item-button-hover-active {

                    &:active,
                    &:hover {

                        /* Visuellt */
                        @if $menu-sub-item-button--border-hover-active {
                            border: $menu-sub-item-button--border-hover-active;
                        }

                        @if $menu-sub-item-button--background-color-hover-active {
                            background-color: $menu-sub-item-button--background-color-hover-active;
                        }

                        /* Typografi */
                        @if $menu-sub-item-button--color-hover-active {
                            color: $menu-sub-item-button--color-hover-active;
                        }
                    }
                }

                &--active {
                    /* Visuellt */
                    border: $menu-sub-item-button-active--border;
                    background-color: $menu-sub-item-button-active--background-color;

                    /* Typografi */
                    color: $menu-sub-item-button-active--color;

                    @if $menu-sub-item-button-active-hover-active {

                        &:active,
                        &:hover {
                            /* Visuellt */
                            @if $menu-sub-item-button-active--border-hover-active {
                                border: $menu-sub-item-button-active--border-hover-active;
                            }

                            @if $menu-sub-item-button-active--background-color-hover-active {
                                background-color: $menu-sub-item-button-active--background-color-hover-active;
                            }

                            /* Typografi */
                            @if $menu-sub-item-button-active--color-hover-active {
                                color: $menu-sub-item-button-active--color-hover-active;
                            }
                        }
                    }
                }
            }
        }

        &-level-1 {
            /* Box-modell/beteende */
            padding-left: 1em;

            /* Visuellt */
            background-color: $menu-item__level-1--background-color;

            /* Typografi */
            color: $menu-item__level-1--color;
        }

        &-sub-container {
            /* Box-modell/beteende */
            max-height: 0;
            overflow: hidden;

            transition: max-height 0.25s ease-out;
            -webkit-transition: max-height 0.25s ease-out;
            -moz-transition: max-height 0.25s ease-out;
            -o-transition: max-height 0.25s ease-out;

            /* Visuellt */
            &-style-1 {
                background-color: $menu-color__sub-style-1--background-color;
            }

            &-style-2 {
                background-color: $menu-color__sub-style-2--background-color;
            }

            &-style-3 {
                background-color: $menu-color__sub-style-3--background-color;
            }

            &--open {
                max-height: 800vh; //It's only a trick for sub container's expansion
            }
        }
    }

    &__offset {
        &-top {
            background-color: $menu-color-main;
        }

        &-bottom {
            /* Box-modell/beteende */
            height: $menu-body__offset-bottom;

            /* Visuellt */
            background-color: $menu-color-main;
        }
    }
}
  • URL: /components/raw/menu/_menu.scss
  • Filesystem Path: components/Molecules/menu/_menu.scss
  • Size: 8.4 KB
  • Content: 
    {
    "name": "regionhalland/menu",
    "description": "menu",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/menu/composer.json
  • Filesystem Path: components/Molecules/menu/composer.json
  • Size: 277 Bytes
  • Content: 
    /* Slide menu (from right) */
/* Needed helpers in /public/library.js
    throttle()
    calculateScrollbarWidth()
    isMobileDevice()

    Needed library: bodyScrollLock-2.6.3.min.js
*/

$(document).ready(function () {
    var scrollbarWidth = calculateScrollbarWidth(),
        isIDevice = isMobileDevice();

    var $body = $('body'),
        $menuMainButton = $('#rh-menu-main-button'),
        $menuCloseButton = $('#rh-menu-close-button'),
        $menuBody = $('#rh-menu-body');

    var $menuOverlay = $('.rh-menu__overlay'),
        $menuTopBar = $('.rh-menu__top-bar'),
        $menuBodyOffsetTop = $('.rh-menu__offset-top');

    var $menuMainButtonDefaultPaddingRight = "0.71875em", // 11.5px - View more in CSS
        $menuBodySpaceTop = 30;

    // Initial state
    $menuBody.addClass('rh-pos--fixed rh-dp--none').css({ "top": $(window).scrollTop() });
    $menuTopBar.css({ "max-width": $menuBody.width() });

    $(window).resize(throttle(function () {
        scrollbarWidth = calculateScrollbarWidth();
        $menuTopBar.css({ "max-width": $menuBody.width() });
    }, 80));

    // Update menu's body position when scrolling
    $(document).scroll(throttle(function () {
        $menuBody.css({ "top": $(window).scrollTop() });
    }, 200));

    $menuMainButton.click(function (e) {
        e.stopPropagation();
        e.preventDefault();

        menuLockBodyScrolling(true);

        $menuOverlay.toggleClass('rh-dp--none rh-dp--show');

        $menuTopBar
            .addClass('rh-pos--fixed')
            .css({
                "width": "100%",
                "max-width": $menuBody.width(),
                "padding-right": parseInt($menuTopBar.css('padding-right')) + scrollbarWidth
            });

        $menuBody
            .removeClass('rh-dp--none')
            .addClass('rh-dp--show')
            .removeClass('rh-pos--fixed')
            .addClass('rh-pos--absolute')// Using the position "absolute" for iOS performance
            .css({ "top": $(window).scrollTop() })
            .addClass('rh-menu__body--show');

        $menuBodyOffsetTop.css({ "height": parseInt($menuTopBar.height() + $menuBodySpaceTop) });
    });

    $menuCloseButton.click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        closeMenu();
    });

    // Press Escape key to close menu
    $(document).keyup(function (e) {
        e.stopPropagation();
        e.preventDefault();
        var isMenuOpen = $menuBody.hasClass("rh-menu__body--show");

        if (e.key && e.key === "Escape" && isMenuOpen) { //Escape key maps to keycode `27`
            closeMenu();
        } else if (e.keyCode && e.keyCode === 27 && isMenuOpen) { //Support IE11
            closeMenu();
        }
    });

    $menuBody.on("click", ".rh-menu__item-button", function (e) {
        e.stopPropagation();

        var $menuItemButton = $(this),
            $menuItemSubContainer = $("#sub" + $menuItemButton.attr('id')),  // Menu item's sub container ID
            $menuItemIsLevel1 = false,
            $menuItemLink = $(this).closest("div[class^='rh-menu__item']").find("a");

        if ($menuItemButton.hasClass("rh-menu__item-button-parent")) {
            $menuItemIsLevel1 = true;
        }

        $menuItemButton.find("span").toggleClass("icon-plus icon-minus");

        if (!$menuItemIsLevel1) {
            $menuItemButton.toggleClass("rh-menu__item-button-sub-item rh-menu__item-button-sub-item--active");
            $menuItemLink.toggleClass("rh-menu__link--active");
        }

        // Slide down
        if ($menuItemSubContainer.length) {
            $menuItemSubContainer.toggleClass("rh-menu__item-sub-container--open");
        }
    });

    // When the user clicks outside of the menu
    $(document).on('mouseup touchstart', function (e) {
        e.stopPropagation();

        if ($(e.target).closest($menuBody).length === 0 &&
            $menuOverlay.hasClass('rh-dp--show')) {
            closeMenu();
        }
    });

    function closeMenu() {
        $menuTopBar
            .removeClass('rh-pos--fixed')
            .css({
                "width": "",
                "max-width": "",
                "padding-right": $menuMainButtonDefaultPaddingRight
            });

        $('#rh-menu-body').removeClass('rh-menu__body--show');
        hideMenuBody();

        $menuBodyOffsetTop.css({ "height": $menuBodySpaceTop });
        $menuOverlay.toggleClass('rh-dp--none rh-dp--show');
    }

    var menuBodyHiddenTimer;
    var menuScrollbarShowingTimer;
    function hideMenuBody() {
        menuScrollbarShowingTimer && clearTimeout(menuScrollbarShowingTimer);
        menuScrollbarShowingTimer = setTimeout(function () {
            menuLockBodyScrolling(false);
        }, 160);

        menuBodyHiddenTimer && clearTimeout(menuBodyHiddenTimer);
        menuBodyHiddenTimer = setTimeout(function () {
            $('#rh-menu-body')
                .removeClass('rh-pos--absolute rh-dp--show')
                .addClass('rh-pos--fixed rh-dp--none');
        }, 600);
    }

    function menuLockBodyScrolling(status, fnCallback) {
        //github.com/willmcpo/body-scroll-lock
        var disableBodyScroll = bodyScrollLock.disableBodyScroll,
            enableBodyScroll = bodyScrollLock.enableBodyScroll;

        var targetElement = document.querySelector(".rh-menu__body");

        if (status) {
            $body.addClass("rh-noscroll").css({ "margin-right": scrollbarWidth });
            isIDevice && disableBodyScroll(targetElement);
        } else {
            $body.removeClass("rh-noscroll").css({ "margin-right": "" });
            isIDevice && enableBodyScroll(targetElement);
        }

        typeof fnCallback === 'function' && fnCallback();
    }
});
  • URL: /components/raw/menu/menu.js
  • Filesystem Path: components/Molecules/menu/menu.js
  • Size: 5.7 KB
  • Content: 
    /* Molecule - Menu */
// --- Base settings ---
$menu-color-main: $base3-dark;
$menu-color__item-line: $base3;
$menu-color__sub-style-1--background-color: $base3-light;
$menu-color__sub-style-2--background-color: $grey-lighter;
$menu-color__sub-style-3--background-color: $grey-lightest;

$menu-top-bar__height: 70px;
$menu-overlay--z-index: 50;

$menu-item--min-height: 3.75em; //60px
$menu-item--border-bottom: $border-thin--standard $menu-color__item-line;

$menu-body--min-width: 320px;
$menu-body--max-width: 643px;
$menu-body__offset-bottom: 90px;
$menu-body--z-index: 60; //-> Important
// --- End of base settings ---

// Other settings
$menu-button-close--background-color: $white; //false
$menu-button-close--color: $menu-color-main; //false
$menu-button-close--border: $border-thin--standard $menu-color-main; //false

$menu-button-close--hover-active: true; //-> Important
$menu-button-close--background-color-hover-active: $white; //false
$menu-button-close--color-hover-active: $menu-color-main; //false
$menu-button-close--border-hover-active: $border-thin--standard $menu-color-main; //false

$menu-top-bar--background-color: $white;
$menu-top-bar--box-shadow: $box-shadow--standard $color-shadow;

$menu-overlay--background-color: rgba(0, 0, 0, 0.3);

$menu-item-link--color: $black;
$menu-item-link--line-height: $line-height--xl;
$menu-item-link--font-weight-active: bold;

$menu-item-link__level-1--font-size: $font-size--large; //18px
$menu-item-link__level-1--font-weight: bold;
$menu-item-link__level-1--color: $white;

$menu-item-button-parent--background-color: $white;
$menu-item-button-parent--color: $menu-color-main;

$menu-item-button-parent-hover-active: true; //false
$menu-item-button-parent--background-color-hover-active: $white; //false
$menu-item-button-parent--color-hover-active: $menu-color-main; //false

$menu-item__level-1--background-color: $menu-color-main;
$menu-item__level-1--color: $white;

$menu-sub-item-button--background-color: $white;
$menu-sub-item-button--color: $menu-color-main;
$menu-sub-item-button--border: $border-thin--standard $menu-color-main;

$menu-sub-item-button-hover-active: true; //false
$menu-sub-item-button--background-color-hover-active: $white; //false
$menu-sub-item-button--color-hover-active: $menu-color-main; //false
$menu-sub-item-button--border-hover-active: $border-thin--standard $menu-color-main; //false

$menu-sub-item-button-active--background-color: $menu-color-main;
$menu-sub-item-button-active--color: $white;
$menu-sub-item-button-active--border: $border-thin--standard $menu-color-main;

$menu-sub-item-button-active-hover-active: true; //false
$menu-sub-item-button-active--background-color-hover-active: $menu-color-main; //false
$menu-sub-item-button-active--color-hover-active: $white; //false
$menu-sub-item-button-active--border-hover-active: $border-thin--standard $menu-color-main; //false
  • URL: /components/raw/menu/menu.settings.scss
  • Filesystem Path: components/Molecules/menu/menu.settings.scss
  • Size: 2.9 KB

Molekylen “Menu”

  • Komponents prefix: rh-menu
  • Filplats: /components/Molecules/menu

Planerad utveckling

Versionshistorik

  • 1.0.0.20200128 Globala variabler används
  • 1.0.0.20200123 Uppdaterat till ny syntax för “button circle”
  • 1.0.0.20200103 Uppdaterat readme
  • 1.0.0.20191122 Flyttat till gitrepo
  • 1.0.0.20191119 Satt statusen “rework” och uppdaterat READMEn med planerad utveckling

1. Krav

<body> tag

  • overflow-x: hidden
  • height: 101vh för att webbsidan har alltid scrollbar.

Exempel:

// CSS
body {
    overflow-x: hidden;
    height: 101vh; //Eller 101%
}

2. Implementation

Det är två separata sektioner som man behöver göra för menyn:

  • Huvudknapp
  • Menyns innehåll

Elementerna måste ha sitt eget id:

  • rh-menu-main-button
  • rh-menu-close-button
  • rh-menu-body

2.1. Huvudknapp

Attributet id är viktigt och måste ha. Se koden är nedan

<div id="rh-menu-main-button" class="rh-circle-button rh-circle-button--large">
    <span class="icon-menu rh-circle-button__icon"></span>
</div>

2.2. Menyns innehåll

Många inställningar kan justeras i filen *.settings.scss

  • z-index
  • Menyns storlek
  • Top bars storlek
  • Botten bars storlek
  • o.s.v.

2.3. Huvudstruktur

<div class="rh-menu__overlay"></div>

<div id="rh-menu-body" class="rh-menu__body">
    <div class="rh-menu__top-bar"></div>

    <!-- Item list -->
    <div>
        <!-- An item -->
        <div class="rh-menu__item">
            <a class="rh-link--navigation">Text</a>
            <div id="" class="rh-circle-button rh-circle-button--small rh-menu__item-button">
                <span class="icon-plus"></span>
            </div>
        </div>

        <div id="" class="rh-menu__item-sub-container">
            <!-- Sub item 1 -->
            <!-- Sub item 2 -->
            <!-- Sub item N -->
        </div>
        <!-- An item -->
    </div>

    <div class="offset-bottom"></div>
</div>

OBS! Klasserna som har använts är bara huvudklasser och menyn behöver också många andra klasser för att fungera som det ska.

3. Versionhistorik

1.0.0-201911181340 (2019-11-18)

  • [Ny] - Man kan använda “ESC” knappen på tangenbordet för att stänga menyn.
  • [Förbättring] Använda e.preventDefault() för huvudknappen för prestandar och enkelhet för implementation till <a> tag.