360Giving Design System - Components

Top-bar Block 

<div class="top-bar layout__nav">
    <button class="top-bar__menu-trigger"><i class="material-icons">menu</i></button>

    <nav class="top-bar__menu contextual-menu">
        <ul>

            <li class="contextual-menu__item">
                <a class="contextual-menu__button contextual-menu--active" ref="#" title="Home">
                    Home

                </a>

            </li>

            <li class="contextual-menu__item">
                <a class="contextual-menu__button" ref="#" title="About">
                    About

                </a>

            </li>

            <li class="contextual-menu__item submenu">
                <a class="contextual-menu__button" ref="http://ccmdesign.ca" title="CCM Design" target="_blank">
                    CCM Design
                    <span class="screen-reader-only">(opens in a new tab)</span>
                </a>

                <ul class="submenu__list">

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                            CCM Design
                            <span class="screen-reader-only">(opens in a new tab)</span>
                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                            CCM Design
                            <span class="screen-reader-only">(opens in a new tab)</span>
                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                            CCM Design
                            <span class="screen-reader-only">(opens in a new tab)</span>
                        </a>

                </ul>

            </li>

            <li class="contextual-menu__item">
                <a class="contextual-menu__button contextual-menu--disabled" ref="/about.html" title="About">
                    About

                </a>

            </li>

            <li class="contextual-menu__item submenu">
                <a class="contextual-menu__button" ref="http://ccm.design" title="Test" target="_blank">
                    Test
                    <span class="screen-reader-only">(opens in a new tab)</span>
                </a>

                <ul class="submenu__list">

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Lael longer">
                            Button Lael longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="#" title="Button Label longer">
                            Button Label longer

                        </a>

                    <li class="submenu__item">
                        <a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                            CCM Design
                            <span class="screen-reader-only">(opens in a new tab)</span>
                        </a>

                </ul>

            </li>

        </ul>
    </nav>

    <div class="off-canvas-menu" aria-hidden>
        <button class="off-canvas-menu__trigger"><i class="material-icons">close</i></button>

        <nav>
            <ul class="off-canvas-menu__contextual">

                <li class="off-canvas-menu__item">
                    <a href="#" class=" off-canvas-menu--active" title="Home">
                        Home

                    </a>

                </li>

                <li class="off-canvas-menu__item">
                    <a href="#" class="" title="About">
                        About

                    </a>

                </li>

                <li class="off-canvas-menu__item off-canvas-menu__submenu">
                    <a href="http://ccmdesign.ca" class="" title="CCM Design" target="_blank">
                        CCM Design
                        <span class="screen-reader-only">(opens in a new tab)</span>
                    </a>

                    <ul class="submenu__list">

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                                CCM Design
                                <span class="screen-reader-only">(opens in a new tab)</span>
                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                                CCM Design
                                <span class="screen-reader-only">(opens in a new tab)</span>
                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                                CCM Design
                                <span class="screen-reader-only">(opens in a new tab)</span>
                            </a>

                    </ul>

                </li>

                <li class="off-canvas-menu__item">
                    <a href="/about.html" class=" off-canvas-menu--disabled" title="About">
                        About

                    </a>

                </li>

                <li class="off-canvas-menu__item off-canvas-menu__submenu">
                    <a href="http://ccm.design" class="" title="Test" target="_blank">
                        Test
                        <span class="screen-reader-only">(opens in a new tab)</span>
                    </a>

                    <ul class="submenu__list">

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Lael longer">
                                Button Lael longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="#" title="Button Label longer">
                                Button Label longer

                            </a>

                        <li class="submenu__item">
                            <a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
                                CCM Design
                                <span class="screen-reader-only">(opens in a new tab)</span>
                            </a>

                    </ul>

                </li>

            </ul>

            <ul class="off-canvas-menu__list">

                <li class="off-canvas-menu__item off-canvas-menu--disabled">
                    <a href="http://ccm.design">
                        Test

                    </a>

                </li>

                <li class="off-canvas-menu__item">
                    <a href="http://ccm.design" target="_blank">
                        Test
                        <span class="screen-reader-only">(opens in a new tab)</span>
                    </a>

                </li>

                <li class="off-canvas-menu__item
          ">
                    <h3 class="off-canvas-menu__heading">Menu Group Title</h3>
                </li>

                <li class="off-canvas-menu__item">
                    <a href="http://ccm.design">
                        Test

                    </a>

                    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>

                </li>

                <li class="off-canvas-menu__item">
                    <a href="http://ccm.design">
                        Test

                    </a>

                </li>

                <li class="off-canvas-menu__item">
                    <a href="http://ccm.design">
                        Test

                    </a>

                </li>

                <li class="off-canvas-menu__item
          ">
                    <h3 class="off-canvas-menu__heading">Menu Group Title</h3>
                </li>

                <li class="off-canvas-menu__item">
                    <a href="http://ccm.design">
                        Test

                    </a>

                </li>

            </ul>
        </nav>
    </div>
</div>
 
<div class="top-bar layout__nav">
  <button class="top-bar__menu-trigger"><i class="material-icons">menu</i></button>

  <nav class="top-bar__menu contextual-menu">
    <ul>
      {% for item in contextual_menu %}
      <li class="contextual-menu__item{% if item.subitems %} submenu{% endif %}">
        <a class="contextual-menu__button{% if item.status %} contextual-menu--{{ item.status }}{% endif %}"
           ref="{{ item.url }}"
           title="{{ item.name }}"
           {% if item.target %} target="{{ item.target }}"{% endif %}>
           {{ item.name }}
          {% if item.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
        </a>
        
        {% if item.subitems %}
          <ul class="submenu__list">
          {% for a in item.subitems %}
            <li class="submenu__item">
              <a class="submenu__button{% if a.status %} submenu--{{ a.status }}{% endif %}" 
                 href="{{ a.url }}" 
                 title="{{ a.name }}"
                 {% if a.target %} target="{{ a.target }}"{% endif %}>
                 {{ a.name }}
                {% if a.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
              </a>
          {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}  
    </ul>
  </nav>

  <div class="off-canvas-menu{% if state %} off-canvas-menu--{{ state }}{% endif %}" aria-hidden>
    <button class="off-canvas-menu__trigger"><i class="material-icons">close</i></button>

    <nav>
      <ul class="off-canvas-menu__contextual">
      {% for item in contextual_menu %}
        <li class="off-canvas-menu__item{% if item.subitems %} off-canvas-menu__submenu{% endif %}">
          <a href="{{ item.url }}"
             class="{% if item.status %} off-canvas-menu--{{ item.status }}{% endif %}"
             title="{{ item.name }}"
             {% if item.target %} target="{{ item.target }}"{% endif %}>
            {{ item.name }}
            {% if item.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
          </a>
          {% if item.subitems %}
            <ul class="submenu__list">
            {% for a in item.subitems %}
              <li class="submenu__item">
                <a class="{% if a.status %} submenu--{{ a.status }}{% endif %}"
                   href="{{ a.url }}"
                   title="{{ a.name }}"
                   {% if a.target %} target="{{ a.target }}"{% endif %}>
                  {{ a.name }}
                  {% if a.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
              </a>
            {% endfor %}
            </ul>
          {% endif %}
        </li>
      {% endfor %}  
      </ul>
      
      <ul class="off-canvas-menu__list">
        {% for item in offcanvas_menu %}
          {% if item.title %}
          <li class="off-canvas-menu__item
          {% if item.status %} off-canvas-menu--{{ item.status }}{% endif %}">
            <h3 class="off-canvas-menu__heading">{{ item.title }}</h3>
          </li>
          {% else %}
          <li class="off-canvas-menu__item{% if item.status %} off-canvas-menu--{{ item.status }}{% endif %}">
            <a href="{{ item.url }}"
               {% if item.target %} target="{{ item.target }}"{% endif %}>
              {{ item.name }}
              {% if item.target %}<span class="screen-reader-only">(opens in a new tab)</span>{% endif %}
            </a>
            {% if item.description %}
            <p>{{ item.description | safe }}</p>
            {% endif %}
          </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
  </div>
</div>
 
{
  "logo": "main",
  "state": null,
  "contextual_menu": [
    {
      "name": "Home",
      "url": "#",
      "status": "active"
    },
    {
      "name": "About",
      "url": "#"
    },
    {
      "name": "CCM Design",
      "url": "http://ccmdesign.ca",
      "target": "_blank",
      "subitems": [
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "CCM Design",
          "url": "http://ccmdesign.ca",
          "target": "_blank"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "CCM Design",
          "url": "http://ccmdesign.ca",
          "target": "_blank"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "CCM Design",
          "url": "http://ccmdesign.ca",
          "target": "_blank"
        }
      ]
    },
    {
      "name": "About",
      "url": "/about.html",
      "status": "disabled"
    },
    {
      "name": "Test",
      "url": "http://ccm.design",
      "target": "_blank",
      "subitems": [
        {
          "name": "Button Lael longer",
          "url": "#"
        },
        {
          "name": "Button Label longer",
          "url": "#"
        },
        {
          "name": "CCM Design",
          "url": "http://ccmdesign.ca",
          "target": "_blank"
        }
      ]
    }
  ],
  "offcanvas_menu": [
    {
      "name": "Test",
      "url": "http://ccm.design",
      "status": "disabled"
    },
    {
      "name": "Test",
      "url": "http://ccm.design",
      "target": "_blank"
    },
    {
      "title": "Menu Group Title"
    },
    {
      "name": "Test",
      "url": "http://ccm.design",
      "description": "Lorem ipsum dolor sit amet, consectetur <a href=\"#\">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. \n"
    },
    {
      "name": "Test",
      "url": "http://ccm.design"
    },
    {
      "name": "Test",
      "url": "http://ccm.design"
    },
    {
      "title": "Menu Group Title"
    },
    {
      "name": "Test",
      "url": "http://ccm.design"
    }
  ]
}
  • Content: 
    document.querySelectorAll('.top-bar__menu-trigger, .off-canvas-menu__trigger').forEach(function(el) {
  el.onclick = function(){
    const offCanvasMenu = document.querySelector('.off-canvas-menu');
    offCanvasMenu.classList.toggle('off-canvas-menu--expanded');
    if (offCanvasMenu.hasAttribute('aria-hidden')) {
      offCanvasMenu.removeAttribute('aria-hidden')
    } else {
      offCanvasMenu.setAttribute('aria-hidden', '')
    }
  };
});
  • URL: /components/raw/top-bar/top-bar.js
  • Filesystem Path: src/components/04-modules/top-bar/top-bar.js
  • Size: 447 Bytes
  • Content: 
    // Resets
.top-bar {
  // Resetting styles
  ul { padding: 0; margin: 0;}
  li { list-style: none; margin: 0; }
}

// Component Styles Variables

.top-bar {
  // Off Canvas panel width 
  // for mobile screens
  --panel-width: 280px;
  
  @include breakpoint($medium-up) {
  // for tablet and desktop screens
  --panel-width: 350px;
  }
}

// STRUCTURAL STYLES

// Top-Bar - Structure
.top-bar {
  display: flex;
  position: relative;
  z-index: 1000;
  &__menu { flex: 1; }
  &__menu-trigger { 
    flex: 0; 
    line-height: 1; 
  }

  @media print {
    display: none;
  }
}

// Contextual Menu - Structure
.contextual-menu {
  @include breakpoint($small-only) { display: none; }
  &__item { 
    display: inline-block; 
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
  }
  &__item + &__item { margin-left: -5px; }
  &--disabled { 
    opacity: .4; 
    pointer-events: none; 
  }
}

// Off-canvas Menu - Structure
.off-canvas-menu {
  top: 0;
  bottom: 0;
  z-index: 1000;
  display: block;
  position: fixed;
  box-sizing: border-box;
  width: var(--panel-width);
  left: calc(-1 * var(--panel-width) - 20px);
  overflow-y: scroll;

  &__list { list-style-type: none; }
  &__heading { margin-bottom: 0; }
  
  &__trigger {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    border: 0; 
  }
  
  &--disabled { pointer-events: none; }

  &__submenu {

    .submenu__list { 
      padding-left: 16px;
      display: block;
      position: static;
    }
  }
}

.off-canvas-menu__contextual {
  @include breakpoint($medium-up) { display: none; }
}

.off-canvas-menu--expanded { left: 0; }


// Submenu Structure
.submenu { 
  position: relative;

  &__list { 
    width: auto;
    display: none;
    text-align: left;
    position: absolute; 
    white-space: nowrap;
  }
  &__list:last-child { right: 1px; }
  &__item { display: block; } 
  &__button { 
    display: inline-block; 
    box-sizing: border-box;
  }
  
  &__item:not(:first-child) &__button { margin-top: -1px; }

  &:hover &__list { display: block; }
}

// Top-Bar - Visual Styles
.top-bar {
  // Colors Variables
  // These values should follow this format:
  // This way, the css variables can 
  // be used inside the hsla() function
  --bg-color: var(--teal-hsl);
  --text-color: var(--base-hsl);
  --active-color: var(--orange-hsl);

  border-bottom: 1px solid hsla(var(--base-hsl), .2);
  
  &__menu-trigger {
    border: 0;
    padding: 4px 8px 2px;
  }

  &__menu { text-align: right; }
}

// Submenu - Visual Styles
.submenu {
  &__list { width: auto; } // This makes the submenu items have the same width.

  &__button {
    width: 100%;
    padding: 8px 24px 8px;
    border: 1px solid hsla(var(--base-hsl), .1);
    color: hsla(var(--text-color), 1);

    &:hover { background-color: hsla(var(--bg-color), .1); }
  }
}

// Contextual Menu - Visual Styles
.contextual-menu { 
  // &__item { }

  &__button {
    display: inline-block;
    padding: 8px 24px 8px;
    transition: all .5s;
    color: hsla(var(--text-color), 1);

    &:hover {
      color: hsla(var(--text-color), 1);
      background-color: hsla(var(--bg-color), .8);
    }
  }

  &--active { background-color: hsla(var(--active-color), .1); }
  
  .submenu__list { background-color: hsla(var(--white-hsl)); }
}


// Off-canvas Menu - Visual Styles
.off-canvas-menu {
  padding: 48px 32px;
  transition: all .4s ease;
  background-color: hsla(var(--bg-color), 1);
  box-shadow: 4px 4px 16px hsla(var(--bg-color), .2);

  &__list { 
    padding: 0 0 24px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid hsla(var(--text-color), .2);
  }
  
  &__trigger {
    padding: 8px;
    background-color: transparent;
    color: hsla(var(--text-color), .7);
  }

  &__item a {
    display: inline-block;
    padding-bottom: 8px;
    color: hsla(var(--base-hsl), .7);

    &:hover  { color: hsla(var(--base-hsl), 1); }
  }

  &__heading {
    color: hsla(var(--white-hsl), 1);
    font-weight: 400;
    margin-bottom: 8px;
  }

  &__contextual { padding-bottom: 24px; }

  &--disabled { opacity: .4; }
}
  • URL: /components/raw/top-bar/top-bar.scss
  • Filesystem Path: src/components/04-modules/top-bar/top-bar.scss
  • Size: 4.1 KB

No notes defined.