가장 첫번째로 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
등으로 변경하여 적용할 수 있습니다.
이 토글버튼을 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 로 변경합니다.
Modal을 생성하고 Modal trigger를 'when user clicks element, #open-modal' 로 적용합니다.
Modal을 전체화면으로 보이도록 하려면, width를 100% 또는 100vw, height를 100vh로 설정합니다.
Modal / Closing의 모든 기능을 [NO]로 설정합니다.
js function이 OxyCloseModal()을 제어하도록 할 것입니다.
메뉴는 메뉴요소를 이용하여 만들던지 아니면 텍스트 링크 등을 사용하여 하나하나 제작하던지 원하는 방향대로 제작합니다.
아래 자바스크립트 코드를 위에 만들어둔 코드블럭에 포함시킵니다.
/**
* 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; 속성으로 화면에 보이지 않도록 합니다.