51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Context Menu

100% 
<div class="c-context-menu">
    <h2 class="c-context-menu__title u-h3">Sport</h2>
    <ul class="c-context-menu__list">
        <li class="c-context-menu__item">
            <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">Eintracht Hildesheim</span></a>
        </li>
        <li class="c-context-menu__item">
            <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">Helios Grizzlys Helios Grizzlys Helios Grizzlys</span></a>
        </li>
        <li class="c-context-menu__item">
            <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">Hildesheimer Invaders</span></a>
        </li>
        <li class="c-context-menu__item">
            <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">VfV 06</span></a>
        </li>
        <li class="c-context-menu__item">
            <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">Fußball</span></a>
        </li>
    </ul>
    <span class="c-context-menu__overview">
            <a href="#" class="c-context-menu__overview-link">mehr Sport</a>
        </span>
</div>
 
<div class="c-context-menu">
    {% if isDate %}
        <h2 class="c-context-menu__title u-h3">
            <span class="c-date">{{ weekday }}</span>
            <span class="c-date">{{ day }}. {{ month }}</span>
        </h2>
    {% else %}
        <h2 class="c-context-menu__title u-h3">{{ title }}</h2>
    {% endif %}
    {% if items != [] %}
        <ul class="c-context-menu__list">
            {% for item in items %}
                <li class="c-context-menu__item">
                    <a href="#" class="c-context-menu__link"><span class="c-context-menu__label">{{ item.label }}</span></a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
    {% if overview != '' %}
        <span class="c-context-menu__overview">
            <a href="#" class="c-context-menu__overview-link">{{ overview }}</a>
        </span>
    {% endif %}
</div>
 
{
  "title": "Sport",
  "overview": "mehr Sport",
  "isDate": false,
  "weekday": "Montag",
  "day": "22",
  "month": "August",
  "items": [
    {
      "label": "Eintracht Hildesheim"
    },
    {
      "label": "Helios Grizzlys Helios Grizzlys Helios Grizzlys"
    },
    {
      "label": "Hildesheimer Invaders"
    },
    {
      "label": "VfV 06"
    },
    {
      "label": "Fußball"
    }
  ]
}
  • Content: 
    .c-context-menu {
    margin: rem-calc(20 0);
    position: relative;

    &__title {
        text-align: left;
        width: 100%;

        &::before {
            border-left: 4px solid #fabb00;
            content: '';
            display: inline;
            margin-left: rem-calc(-9);
            padding-right: rem-calc(9);
        }
    }

    &__list {
        display: inline-block;
        float: left;
        list-style: none;
        margin-left: 0;
        overflow: auto;
        overflow-y: hidden;
        padding-left: 0;
        text-align: left;
        white-space: nowrap;
        width: calc(100% - 16px);

        &::after {
            background-color: transparent;
            content: ">";
            font-size: 1.5rem;
            line-height: 3.6rem;
            padding: 1px;
            position: absolute;
            right: 0;
        }

        &::-webkit-scrollbar {
            background: transparent; /* Optional: just make scrollbar invisible */
            height: 2px;
            width: 0; /* Remove scrollbar space */
        }

        /* Optional: show position indicator in grey lighter */
        &::-webkit-scrollbar-thumb {
            background: $color-grey-lighter;
        }
    }

    &__item {
        display: inline-block;
        margin-bottom: $spacing-m;
        margin-right: $spacing-m;
        vertical-align: top;
    }

    &__link {
        background-color: $color-white;
        border: 1px solid $color-grey;
        border-radius: $border-radius;
        color: $color-grey;
        cursor: pointer;
        display: inline-block;
        font-weight: $font-weight-normal;
        line-height: $line-height-l;
        padding: $spacing-m;
        text-decoration: none;

        @include transition(border, color, box-shadow);

        &:active,
        &:focus,
        &:hover {
            border-color: $color-black;
            color: $color-black;
        }
    }

    &__overview {
        position: absolute;
        right: 0;
        top: 0;
    }

    &__overview-link {
        border-bottom-color: $color-blue;
        color: $color-blue;

        &:focus,
        &:hover {
            color: $color-black;
        }

        &::after {
            content: " >";
        }
    }

    &__date {
        display: inline;
    }

    @include breakpoint(large) {
        &__title {
            &::before {
                display: none;
            }
        }

        &__list {
            overflow: hidden;
            overflow-y: hidden;
            white-space: normal;

            &::after,
            &::before {
                display: none;
            }
        }

        &__item {
            //display: block;
            float: left;
            width: 100%;
        }

        &__link {
            background-color: transparent;
            border: none;
            color: $color-grey;
            cursor: pointer;
            display: block;
            font-weight: $font-weight-normal;
            padding: 0;
            text-align: left;

            @include transition(color);

            &:active,
            &:focus,
            &:hover {
                background-color: transparent;
                border-color: $color-black;
                color: $color-black;

                & > .c-context-menu__label {
                    border-bottom: 1px solid $color-black;
                }
            }

            &::after {
                content: " >";
            }
        }

        &__label {
            border-bottom: 1px solid $color-grey;
        }

        &__overview {
            float: left;
            margin: $spacing 0;
            position: relative;
        }

        &__date {
            display: block;
        }
    }
}

@include breakpoint(medium) {
    .c-context-menu {
        &__title {
            &::before {
                margin-left: rem-calc(-6);
                padding-right: rem-calc(6);
            }
        }
    }
}
  • URL: /components/raw/context-menu/context-menu.scss
  • Filesystem Path: src/patterns/20-components/menus/context-menu/context-menu.scss
  • Size: 4 KB

There are no notes for this item.