Partystreusel

Topbar 

<nav role="navigation" class="topbar js-topbar">
    <button type="button" aria-controls="topbar-content" class="topbar__mobile-menu">
        Menu
        <svg class="icon icon--menu ">
            <use xlink:href="#icon--menu" />
        </svg>
    </button>
    <ul class="topbar__list" id="topbar-content">
        <li class="topbar__item">
            <a class="topbar__link " href="#">Nav content 1</a>
        </li>
        <li class="topbar__item">
            <a class="topbar__link topbar--active" href="#">Nav active with Sub</a>
            <ul class="topbar__sub-list">
                <li class="topbar__sub-item">
                    <a class="topbar__link" href="#">Nav content 1</a>
                </li>
                <li class="topbar__sub-item">
                    <a class="topbar__link" href="#">Nav active 1</a>
                </li>
            </ul>
        </li>
        <li class="topbar__item">
            <a class="topbar__link " href="#">Nav long long 1</a>
        </li>
        <li class="topbar__item">
            <a class="topbar__link " href="#">Nav another 1</a>
        </li>
        <li class="topbar__item">
            <a class="topbar__link " href="#">Nav last 1</a>
        </li>
    </ul>
</nav>
 
<nav role="navigation" class="topbar js-topbar">
  <button type="button"  aria-controls="topbar-content" class="topbar__mobile-menu">
    Menu
    {{> @icon name="menu"}}
  </button>
  <ul class="topbar__list" id="topbar-content">
    {{#each items}}
      <li class="topbar__item">
        <a class="topbar__link {{modifier}}" href="#" >{{title}}</a>
        {{#if sublist}}
          <ul class="topbar__sub-list">
            {{#each sublist}}
            <li class="topbar__sub-item">
              <a class="topbar__link" href="#">{{this}}</a>
            </li>
            {{/each}}
          </ul>
        {{/if}}
      </li>
    {{/each}}
  </ul>
</nav>
 
{
  "items": [
    {
      "title": "Nav content 1"
    },
    {
      "title": "Nav active with Sub",
      "modifier": "topbar--active",
      "sublist": [
        "Nav content 1",
        "Nav active 1"
      ]
    },
    {
      "title": "Nav long long 1"
    },
    {
      "title": "Nav another 1"
    },
    {
      "title": "Nav last 1"
    }
  ]
}
  • Content: 
    // stylelint-disable no-descending-specificity
$topbar__border: rem(1) solid $color__accent;

.topbar__mobile-menu {
  display: block;
  background-color: $color__accent--light;
  color: $color__accent--dark;
  border: 0;
  padding: rem(7) rem(10) rem(6);
  position: relative;
  cursor: pointer;
  margin-left: auto;

  &:hover {
    color: $color__accent--dark;
  }
}

.topbar__list,
.topbar__sub-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar__item {
  background-color: $color__accent--light;
  display: block;
}

.topbar__link {
  border-bottom: $topbar__border;
  display: block;
  padding: rem(12);
  color: $color__accent--dark;

  &:hover {
    transition: all 0.1s linear;
    background-color: $color__bright;
  }
}

.topbar__sub-list {
  padding: 0;
  background-color: $color__bright;
}

.topbar__sub {
  display: block;

  .topbar__link {
    background-color: $color__bright;
    border-color: $color__bright;
    color: $color__accent--dark;
    padding-left: rem(30);

    &:hover {
      color: $body__font-color;
    }
  }
}

// STATES
.topbar--active {
  background-color: $color__accent--light;
  color: $color__brand--one;

  &:hover {
    background-color: $color__bright;
  }
}

.topbar--open {
  .topbar__list {
    display: block;
  }
}

.topbar__sub-list--open {
  display: block;
}

// LARGE
// ----------------------------------------
@include mq(large) {
  .topbar {
    font-size: rem(18);
  }

  .topbar__mobile-menu {
    display: none;
  }

  .topbar__list {
    &,
    .topbar--open & {
      display: flex;
      align-items: center;
      flex-direction: row;
    }
  }

  .topbar__item {
    flex: 1 1 auto;
    position: relative;

    &:not(:last-child) {
      border-right: $topbar__border;
    }
  }

  .topbar__link {
    padding: rem(11) rem(18);
    text-align: center;
  }

  .topbar__sub-list {
    border: $topbar__border;
    border-top-width: 0;
    left: rem(-1);
    min-width: rem(230);
    position: absolute;

    .topbar__item:last-child & {
      left: auto;
      right: 0;
    }
  }

  .topbar__sub-item {
    a {
      padding: rem(11) rem(18);
    }
  }

  // Flexbox Fallback, used for Projects with old browser support
  //stylelint-disable selector-max-specificity
  // .no-flexbox.no-flexboxtweener {
  //   .topbar__mobile-menu {
  //     display: none;
  //   }
  //
  //   .topbar__list {
  //     width: 100%;
  //
  //     &,
  //     .topbar--open & {
  //       display: table;
  //     }
  //   }
  //
  //   .topbar__item {
  //     display: table-cell;
  //   }
  // }
  // // No-JS Fallback
  // .no-js {
  //   .topbar__item:hover {
  //     > .topbar__sub-list {
  //       display: block;
  //     }
  //   }
  // }
  //stylelint-enable selector-max-specificity
}

//stylelint-enable no-descending-specificity
  • URL: /components/raw/topbar/_topbar.scss
  • Filesystem Path: patterns/02-molecules/topbar/_topbar.scss
  • Size: 2.8 KB
  • Content: 
    import Base from '../../_config/base';

class Topbar extends Base {
  constructor(el) {
    super(el);

    this.config = {
      openClass: 'topbar--open',
      openClassSublist: 'topbar__sub-list--open',
      menuButtonClass: 'topbar__mobile-menu',
      firstLvlClass: 'topbar__item',
      sublistSelector: '.topbar__sub-list',
    };
    this.$el.addEventListener('click', this.eventHandler.bind(this));
  }

  eventHandler(e) {
    if (e.target.classList.contains(this.config.menuButtonClass)) {
      this.toggleMenu(e);
    } else if (e.target.parentNode.classList.contains(this.config.firstLvlClass)) {
      this.toggleSublist(e);
    }
  }

  toggleMenu(e) {
    this.$el.classList.toggle(this.config.openClass);
    e.preventDefault();
  }

  toggleSublist(e) {
    const subList = e.target.parentNode.querySelector(this.config.sublistSelector);
    if (subList.length === 0) { return; }

    subList.classList.toggle(this.config.openClassSublist);
    e.preventDefault();
  }
}

Topbar.className = 'Topbar';
export default Topbar;
  • URL: /components/raw/topbar/topbar.js
  • Filesystem Path: patterns/02-molecules/topbar/topbar.js
  • Size: 1 KB

add class topbar--active to the active <a>