Aeroporto di Bologna - Design System

Navigation switch: Emergency 

<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="c-navigation__icon"></span>
        <span class="u-visuallyhidden expanded-text">Chiudi menù</span>
        <span class="u-visuallyhidden collapsed-text">Apri menù</span>
    </label>
    <div role="menu" data-menu-origin="left" class="c-navigation-switch__container">
        <nav class="c-primary-navigation">

            <div class="c-primary-navigation__logo">
                <a href="#">
                    <img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
                </a>
            </div>

            <ul class="c-primary-navigation__biz">

                <li>
                    <div class="c-primary-navigation__raw_anchor">
                        <a href="/components/preview/page-home-travel--emergency">Notizie in tempo reale</a>
                    </div>
                </li>

                <li>
                    <div class="c-primary-navigation__raw_anchor">
                        <a href="/components/preview/page-arrivals-departures--emergency">Arrivi e partenze</a>
                    </div>
                </li>

            </ul>

            <div class="c-primary-navigation__utils">

                <ul class="c-languages" aria-label="Seleziona la lingua del sito">
                    <li>
                        <a href="#" aria-label="Italiano">
                            ita
                        </a>
                    </li>
                    <li>
                        <a href="#" aria-label="Inglese">
                            eng
                        </a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
</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="c-navigation__icon"></span>
    <span class="u-visuallyhidden expanded-text">Chiudi menù</span>
    <span class="u-visuallyhidden collapsed-text">Apri menù</span>
  </label>
  <div role="menu" data-menu-origin="left" class="c-navigation-switch__container">
    {{ render "@primary-navigation--emergency" }}
  </div>
</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.