Aeroporto di Bologna - Design System

Navigation switch: Default 

<div data-menu-component class='c-navigation-switch'>
    <input type='checkbox' role='button' aria-haspopup='true' id='toggle-extended-nav' class='u-visuallyhidden' aria-hidden='true' />
    <label for='toggle-extended-nav' data-opens-menu aria-hidden='true'>
        <span class='u-visuallyhidden expanded-text'>
            Chiudi menù
        </span>
        <span class='u-visuallyhidden collapsed-text'>
            Apri menù
        </span>
    </label>
</div>
 
<div data-menu-component class='c-navigation-switch'>
  <input
    type='checkbox'
    role='button'
    aria-haspopup='true'
    id='toggle-extended-nav'
    class='u-visuallyhidden'
    aria-hidden='true'
  />
  <label for='toggle-extended-nav' data-opens-menu aria-hidden='true'>
    <span class='u-visuallyhidden expanded-text'>
      Chiudi menù
    </span>
    <span class='u-visuallyhidden collapsed-text'>
      Apri menù
    </span>
  </label>
</div>
 
/* No context defined. */
  • Content: 
    .c-navigation-switch {
}

.c-navigation-switch [data-opens-menu] {
  position: relative;
  display: block;
  width: remify(20px);
  height: remify(20px);

  background: transparent;
  border-color: #fff;
  border-top: 3px solid;
  border-bottom: 3px solid;
  color: white;
  font-size: remify(16px);
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);

  &:before,
  &:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;

    position: absolute;
    top: 50%;
    left: 50%;

    background: currentColor;

    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }
}

.c-navigation-switch [data-opens-menu]:hover {
}

.is-nav-open .c-navigation-switch [data-opens-menu] {
  border-color: transparent;
  color: primary(night, 100);

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

//***//

/* 
    The following lines of code reveals the correct 
    state wording to screen readers based on state
  */
.c-navigation-switch input:checked + label .expanded-text {
  display: inline;
}

// Show the close icon when menu is opened
.c-navigation-switch input:checked + label .c-navigation__icon:before,
.stickyReady .c-navigation__icon:before {
  content: "×";
  font-size: remify(24px);
}

.c-navigation-switch input:checked + label .collapsed-text {
  display: none;
}

.c-navigation-switch
  input[type="checkbox"]:not(:checked)
  + label
  .expanded-text {
  display: none;
}

.c-navigation-switch
  input[type="checkbox"]:not(:checked)
  + label
  .collapsed-text {
  display: inline;
}
  • URL: /components/raw/navigation-switch/_navigation-switch.scss
  • Filesystem Path: src/views/02-molecules/navigation-switch/_navigation-switch.scss
  • Size: 1.7 KB
  • Content: 
    (function ($) {

  var $navSwitch = $('.c-navigation-switch [data-opens-menu]');

  $navSwitch.on("click", function () {
    $('.c-primary-navigation').toggleClass('is-open');
    $('.c-toolbar__switch').toggleClass('is-nav-open');
    // $('.c-overlay').toggleClass('is-visible');

  });

})(jQuery);
  • URL: /components/raw/navigation-switch/navigation-switch.js
  • Filesystem Path: src/views/02-molecules/navigation-switch/navigation-switch.js
  • Size: 301 Bytes

No notes defined.