메가메뉴 구조

1. 메가메뉴

메가메뉴 자체는 비어있는 컨테이너에 불과함. 즉, 페이지에 어떠한 것도 추가하지 않음.

2. 메가메뉴 드롭다운

드롭다운들이 모든 콘텐츠들이 있는 곳이고 몇 개의 핵심요소로 구성되어 있음

2a. 드롭다운 링크 / 아이콘

우선 메뉴를 감싸는 Megamenu Container를 만들고 그 안에 여러개의 Link Wrapper를 이용하여 메뉴를 구현, 이 때 각각의 Link Wrapper와 그 안의 텍스트는 클래스를 부여하여 일괄적으로 Control 할 수 있도록 함.

어떤 메뉴에 마우스를 올렸을 때 Dropdown Menu가 생생되도록 하려면,
Menu Item (Parent, Div) .mega-submenu-parent > Div 생성 .mega-submenu-container > Div 내 자유롭게 메뉴구성함.

.mega-submenu-parent

postion: relative;

.mega-submenu-container

position: absolute (top:300%, left:-9999px)
padding-top: 20px;
opacity: 0;
transition: 0.3sec;

Code Block을 생성하여, PHP 'Hello World'를 삭제 후 아래 코드를 CSS로 삽입. 이때

.mega-submenu-parent:hover .mega-submenu-container {
  left: 0;
  top: 100%;
  opacity: 1;
}

단계 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]로 설정합니다.

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표시가 토글됩니다.

상기 코드에서

로 지정되어야 합니다.

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

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

power-switchmagnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram