풀스크린 오버레이 메뉴 만들기

단계 1. 햄버거 버튼 만들기

가장 첫번째로 CSS 스타일 시트를 생성해야 합니다. 링크를 이용해서 할 수도 있지만 필요한 CSS만 포함되도록하여 CSS 파일을 생성하는 것이 더 좋습니다. 아래는 .hamburger--spin을 적용한 CSS입니다.

Setting Up A Fullscreen Menu Overlay in Oxygen Builder - Isotropic Design

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

상기 스타일 시트가 적용되면 아래 코드가 제대로 햄버거 아이콘으로 생성이 됩니다.

<div class="hamburger hamburger--spin" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</div>

상기 hamburger--squeeze 는

hamburger--elastic, hamburger--minus, hamburger--vortex

등으로 변경하여 적용할 수 있습니다.

https://jonsuh.com/hamburgers/

이 토글버튼을 DIV로 둘러싸고 model 요소 위로 오도록 하기 위하여 이 div에 z-index값을 1401로 부여합니다. (modal의 z-index 값은 1400 입니다.) 만약 이 div가 header builder 내에 있다면 header builder의 z-index 값을 1401로 설정하고 div의 z-index값은 1402로 설정합니다.

이렇게 하면 Modal의 Live Preview에서 햄버거 아이콘이 나타나는 것을 확인할 수 있습니다.

코드블럭의 ID 값은 iso-menu-toggle 로 변경합니다.

단계 2. Modal 추가하기

Modal을 생성하고 Modal trigger를 'when user clicks element, #open-modal' 로 적용합니다.

Modal을 전체화면으로 보이도록 하려면, width를 100% 또는 100vw, height를 100vh로 설정합니다.

Modal / Closing의 모든 기능을 [NO]로 설정합니다.

  • Close Modal Automatically : No
  • Close on ESC key : No
  • Close Modal On Backdrop Click : No

js function이 OxyCloseModal()을 제어하도록 할 것입니다.

단계 3. 메뉴 만들기

메뉴는 메뉴요소를 이용하여 만들던지 아니면 텍스트 링크 등을 사용하여 하나하나 제작하던지 원하는 방향대로 제작합니다.

단계 4. hamburger.css 토글요소를 modal 열고 닫는 기능에 연결하기

아래 자바스크립트 코드를 위에 만들어둔 코드블럭에 포함시킵니다.

/**
 * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
 *
 * @private
 * @author Todd Motto
 * @link https://github.com/toddmotto/foreach
 * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
 * @callback requestCallback      callback   - Callback function for each iteration.
 * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
 * @returns {}
 */
var forEach = function(t, o, r) {
    if ("[object Object]" === Object.prototype.toString.call(t))
        for (var c in t) Object.prototype.hasOwnProperty.call(t, c) && o.call(r, t[c], c, t);
    else
        for (var e = 0, l = t.length; l > e; e++) o.call(r, t[e], e, t)
};

var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
    forEach(hamburgers, function(hamburger) {
        hamburger.addEventListener("click", function() {
            this.classList.toggle("is-active");

        }, false);
    });
}


jQuery('#iso-menu-toggle').on('click', function() {
    // check the status of modal if it's live or not
    if (jQuery('.oxy-modal-backdrop').hasClass('live')) {
        // Modal is already open, close it by using Oxygen's oxyclosemodal function
        oxyCloseModal();
    } else {
        // The modal is not open, so open it by simulating a click on the button that triggers modal open
        jQuery('#open-modal').click();
    }
});

자바스크립트 코드가 제대로 적용되고 나면 햄버거 메뉴를 누를 때 마다 햄버거 메뉴와 X표시가 토글됩니다.

  • When you click on the hamburger icon, it as the Active class, which toggles the animation and makes it a X.
  • When you click this icon it will also click a button (with the id #open-menu), which will open the modal (if it's closed).
  • If the modal is open and the hamburger icon is an X, the same code will toggle the Oxygen JS function to close the modal.
  • When make that click the X reverts back to the hamburger. And the cycle continues.

상기 코드에서

  • #iso-menu-toggle - 코드블럭의 ID
  • #open-modal - 아래에 만들 토글버튼의 ID

로 지정되어야 합니다.

마지막으로 해야 할 것은 hidden modal button을 만드는 것입니다.

버튼을 생성한 후 ID를 #open-modal로 부여한 후 display:none; 속성으로 화면에 보이지 않도록 합니다.