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

Stilguide

Menu: Default

Ändringar planerade

HTML
View
Context
Assets
Info
Notes


        
        <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">

<!-- 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>

    <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">
                Våra skolor
            </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">
                    Katrinebergs folkhögskola
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Löftadalens folkhögskola
                </a>

            </div>

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

            </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": true,
  "items": [
    {
      "id": 1,
      "title": "Halland – bästa livsplatsen",
      "subItems": []
    },
    {
      "id": 7,
      "title": "Våra skolor",
      "subItems": [
        {
          "id": 8,
          "title": "Katrinebergs folkhögskola"
        },
        {
          "id": 9,
          "title": "Löftadalens folkhögskola"
        },
        {
          "id": 10,
          "title": "Munkagårdsgymnasiet"
        }
      ]
    },
    {
      "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"
            }
          ]
        }
      ]
    }
  ]
}

File:

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

Handle: @menu--default
Variants (2): Default , 6 Levels
Preview:
- With layout
- Component only
Filesystem Path: components/Molecules/menu/menu.hbs
Referenced by (1): @header

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

Planerad utveckling

Menyn måste kunna hanteras med tangentbord. Se t.ex. https://www.w3.org/TR/wai-aria-practices/#TreeView
Gå igenom fokus-states och säkerställ att de är synliga

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.

Menu: Default

Molekylen “Menu”

Planerad utveckling

Versionshistorik

1. Krav

2. Implementation

2.1. Huvudknapp

2.2. Menyns innehåll

2.3. Huvudstruktur

3. Versionhistorik

1.0.0-201911181340 (2019-11-18)

Button

Button Circle

Caption Hero

Form Control Text

Form Control Textarea

Heading Underlined

Label

Link

Search Field

Visual Element

Back To Top

Block

Block Icon Link

Buttongroup Elements

Event Card Calendar

Hero

Menu

Message Cookies

Navigation Block

Search Elements

Search External Link

Block Group

Footer Group

Footer Logo Group

Navigation Block Group

General