guide v11x

메뉴바

Desktop(PC) 환경에 최적화 시킨 스타일입니다.

Class

PC v11.21.0.0

Class	비고
.gl-wrap	메뉴바 전체 (옵션 보기)
.gl-logo	로고 (옵션 보기)
.gl-logo	관련 class	`.gl-logo-container` (부모) `.gl-banner`
.gl-gnb	최상단 (옵션 보기)
.gl-updated	최종편집 (옵션 보기)
.gl-account	로그인 (옵션 보기)
.gl-account	관련 class	`.gl-account-item` `.gl-account-link`
.gl-sns	SNS (옵션 보기)
.gl-sns	관련 class	`.gl-sns-container` (부모) `.active`
.gl-search	검색 (옵션 보기)
	관련 class	`.gl-search-container` (부모) `.gl-search-container.is-active` (부모) `.gl-search-input` `.gl-search-btn` `.gl-search-action`
	옵션 class	`.gl-search-stack` `.gl-search-ab` `.gl-search-ab.left` `.gl-search-ab.bottom`
.gl-nav	메뉴영역 (옵션 보기)
.gl-nav	관련 class	`.gl-nav-sub`
.gl-menu	메뉴 (옵션 보기)
	관련 class	`.gl-menu-item` `.gl-menu-item.active` `.gl-menu-item.show` `.gl-menu-link` `.gl-menu-sub` `.gl-menu-sub-item` `.gl-menu-sub-item.is-current` `.gl-menu-sub-link`
	옵션 class	`.gl-menu-animate` `.gl-menu-horz` `.gl-menu-vert` `.gl-menu-arrow` `.gl-menu-sub-arrow` `.gl-menu-vr` `.gl-menu-obj` `.gl-menu-obj.active` `.gl-menu-obj-group` (부모) `.gl-menu-btn` `.gl-menu-btn.active`
.gl-service	커스텀 전체메뉴 (옵션 보기)
	관련 class	`.gl-service-body` `.gl-service-item` `.gl-service-link` `.gl-service-menu` `.gl-service-menu-link`
	옵션 class	`.gl-service-horz` `.gl-service-floating` `.gl-service-vr`

Mobile v11.21.0.0

Class	비고
.mb-header	메뉴바 전체 (옵션 보기)
.mb-header	관련 class	`.mb-header-side` `.mb-header-btn`
.mb-logo	로고 (옵션 보기)
.mb-logo	옵션 class	`.first` `.last`
.mb-menu	메뉴바 (옵션 보기)
.mb-menu	관련 class	`.mb-menu-link` `.mb-menu-container` (부모) `.mb-menu-container.scroll` (부모)
.mb-nav	전체메뉴 (옵션 보기)
.mb-nav	관련 class	`.mb-nav-overlay` `.mb-nav-header` `.mb-nav-header-side` `.mb-nav-header-btn` `.mb-nav-header-btn.small` `.mb-nav-header-btn.active` `.mb-nav-logo` `.mb-nav-body` `.mb-nav-search` `.mb-nav-search-input` `.mb-nav-search-btn` `.mb-nav-menu` `.mb-nav-menu-vert` `.mb-nav-menu-item` `.mb-nav-menu-link` `.mb-nav-submenu` `.mb-nav-submenu-item` `.mb-nav-submenu-link` `.mb-nav-submenu-container` (부모) `.mb-nav-footer` `.mb-nav-footer-menu` `.mb-nav-footer-menu-item` `.mb-nav-footer-menu-link` `.mb-nav-address` `.mb-nav-address-item` `.go-to-desktop`

Folders

이름	비고
s-○○	PC용 메뉴바
pd-○○	PC용 디자인형(커스텀) 메뉴바
m-○○	Mobile용 메뉴바
md-○○	Mobile용 디자인형(커스텀) 메뉴바 [반응형일 경우에도 사용]

Layouts v11.21.0.0

PC 레이아웃

<div class="gl-gnb">최상단영역</div>
<div class="gl-logo-container">
	<div class="gl-banner">배너</div>
	<div class="gl-logo">로고</div>
	<div class="gl-banner">배너</div>
</div>
<nav class="gl-nav">
	<div class="index-width">
		<button type="button" class="gl-menu-btn" data-toggle="offCanvas"><i class="icon-bars"></i> 전체</button>
		<ul id="user-menu" class="gl-menu">
				<a href="#link" target="_top" class="gl-menu-link">1차섹션</a>
				<ul class="gl-menu-sub">
					<li class="gl-menu-sub-item">
						<a href="#link" target="_top" class="gl-menu-sub-link">2차섹션</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</nav>

Mobile 레이아웃

<header id="user-header" class="user-header">
	<article class="mb-header">
		<div class="mb-header-side">
			<button type="button" class="mb-header-btn" data-mobile-toggle="mbnav" aria-label="전체메뉴"><i class="icon-bars"></i></button>
		</div>
		<h1 class="mb-logo">로고</h1>
		<div class="mb-header-side">검색</div>
	</article>
	<nav class="mb-menu-container">
		<div class="mb-menu">
			<a href="#link" target="_top" class="mb-menu-link">정치</a>
			<a href="#link" target="_top" class="mb-menu-link">경제</a>
			<a href="#link" target="_top" class="mb-menu-link">사회</a>
			<a href="#link" target="_top" class="mb-menu-link">문화</a>
		</div>
	</nav>
	<?php 
		// Global Nav
		include_once HTML_PWD."menuskin/mobileMenuCommon.php";
	?>
</header>

제어 v11.21.0.0

PHP

## 메뉴option
$menu_optarr = [
	"index"     => "true",      // index페이지에서 메뉴 첫번째메뉴 선택 여부 (true / false)
	"over"      => "true",      // hover시 메뉴 active 고정 (true / false)
	"holder"    => "true",      // 2차메뉴 노출 고정 (true / false)
	"direction" => "horizon",   // 2차메뉴 펼침 형태 (horizon / vertical)
	"size"      => "",          // 크기설정 (basic / full)
	"position"  => "left",      // 2차메뉴 위치 (left / center / right)
	"effect"    => "false",     // 2차메뉴 에니메이션 (true: slide / false: fade)
	"speed"     => 300,         // 2차메뉴 에니메이션 속도(기본: 300)
];

Java Script

// include menubar core js 
document.addEventListener("DOMContentLoaded", function() {
	const scripts = [
		'/script/menubar.js',
	];	
	function loadScript(src) {
		return new Promise((resolve, reject) => {
			const script = document.createElement("script");
			script.src = src;
			script.onload = () => resolve();
			script.onerror = () => reject(new Error("error loading " + src));
			document.body.appendChild(script);
		});
	}	
	function loadAll(scripts, index = 0) {
		if (index < scripts.length) {
			loadScript(scripts[index]).then(() => {
				loadAll(scripts, index + 1);
			}).catch(error => {
				console.error(error);			
				loadAll(scripts, index + 1);
			});
		}
	}	
	loadAll(scripts);
});

Search Toggler

$(function(){
	const GL_SEARCH = $(".gl-search-container");
	GL_SEARCH.on("click", ".gl-search-action", function(e) {
		const _parent = $(e.delegateTarget);
		_parent.addClass("is-active").find(".gl-search-input").focus();
	});
	$(document).mouseup(function (e){
		if(!GL_SEARCH.is(e.target) && GL_SEARCH.has(e.target).length === 0){
			GL_SEARCH.removeClass("is-active");
		}
	});
});

Search Opener

// search opener
$(function(){
	const GL_SEARCH = $(".gl-search-container");
	GL_SEARCH.on("click", ".gl-search-action", function(e) {
		const _parent = $(e.delegateTarget);

		if(_parent.hasClass("is-active")) {
			_parent.removeClass("is-active");
		} else {
			_parent.addClass("is-active").find(".gl-search-input").focus();
		}
	});
});

Data Attribute

명칭	옵션	설명
data-menu-index	true / false	index페이지에서 메뉴 첫번째메뉴 선택 여부
data-menu-over	true / false	hover시 메뉴 active 고정
data-menu-holder	true / false	2차메뉴 노출 고정
data-menu-direction	horizon / vertical	2차메뉴 펼침 형태
data-menu-size	basic / full	크기설정
data-menu-position	left / center / right	2차메뉴 위치
data-menu-effect	true / false	2차메뉴 에니메이션
data-menu-speed	300	2차메뉴 에니메이션 속도
data-main-code		현재 페이지의 고유값(idxno)
data-sub-code		현재 페이지가 1차일 경우, 2차의 고유값(idxno)
data-serial-code		현재 페이지가 1차 또는 2차일 경우, 연재 또는 3차의 고유값(idxno)
data-multi-code		현재 페이지가 멀티섹션 경우, 가상의 고유값(idxno)
data-menu-code		각 섹션의 고유값(idxno)

Custom Functions

`.gl-wrap`

--nd-wrap-zindex:                   99;
--nd-wrap-margin:                   0 0 2rem;

`.gl-logo`

--nd-logo-valign:                   center;
--nd-logo-align:                    normal;
--nd-logo-padding-x:                1.5rem;
--nd-logo-padding-y:                1.25rem;
--nd-logo-padding-top:              var(--nd-logo-padding-y);
--nd-logo-padding-bottom:           var(--nd-logo-padding-y);
--nd-logo-font-size:                1em;

`.gl-logo-container`

--nd-logo-container-valign:         center;
--nd-logo-container-width:          var(--nd-index-width);
--nd-logo-container-margin:         0 auto;

`.gl-banner`

--nd-logo-banner-width:             300px;

`.gl-gnb`

--nd-gnb-margin:                    0;
--nd-gnb-padding:                   0.5rem 0;
--nd-gnb-font-size:                 0.875em;
--nd-gnb-color:                     #6c757d;
--nd-gnb-bg:                        transparent;
--nd-gnb-border-width:              0;
--nd-gnb-border-style:              solid;
--nd-gnb-border-color:              transparent;

`.gl-updated`

--nd-updated-font-size:             1em;
--nd-updated-font-weight:           400;
--nd-updated-line-height:           inherit;
--nd-updated-color:                 inherit;

`.gl-account`

--nd-account-margin:                0;
--nd-account-padding:               0;
--nd-account-font-size:             1em;
--nd-account-color:                 inherit;
--nd-account-hover-color:           inherit;
--nd-account-item-white-space:      normal;
--nd-account-item-padding-x:        0.5rem;
--nd-account-divider-color:         #d2d2d4;
--nd-account-divider:               "|";

`.gl-sns`

--nd-sns-padding-x:                 0;
--nd-sns-padding-y:                 0;
--nd-sns-font-size:                 1.25rem;
--nd-sns-line-height:               1;
--nd-sns-color:                     inherit;
--nd-sns-bg:                        transparent;
--nd-sns-border:                    0;
--nd-sns-border-radius:             0;
--nd-sns-transition:                color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

/* hover */
--nd-sns-hover-color:               inherit;
--nd-sns-hover-bg:                  transparent;
--nd-sns-hover-border-color:        transparent;

/* active */
--nd-sns-active-color:              inherit;
--nd-sns-active-bg:                 transparent;
--nd-sns-active-border-color:       transparent;

`.gl-sns-container`

--nd-sns-align:                     normal;
--nd-sns-valign:                    center;
--nd-sns-gap:                       0.5rem;

`.gl-search`

--nd-search-gap:                    0.25rem;
--nd-search-width:                  auto;
--nd-search-height:                 auto;
--nd-search-font-size:              0.875em;
--nd-search-padding-x:              0.75rem;
--nd-search-padding-y:              0.375rem; 
--nd-search-color:                  #000;
--nd-search-bg:                     transparent;
--nd-search-border-width:           1px; 
--nd-search-border-color:           #ced4da;
--nd-search-border-radius:          0.25rem;

/* focus */
--nd-search-focus-color:            #000;
--nd-search-focus-bg:               transparent;
--nd-search-focus-border-color:     #6c757d;

/* placeholder */
--nd-search-placeholder:            #ced4da;

`.gl-search-container`

--nd-search-container-margin:       0;

`.gl-search-ab`

--nd-search-position:               absolute;
--nd-search-zindex:                 5;
--nd-search-offset-y:               50%;
--nd-search-offset-x:               0;
--nd-search-transform:              translateY(-50%);

`.gl-search-btn`

--nd-search-btn-padding-x:          0.75rem;
--nd-search-btn-padding-y:          0; 
--nd-search-btn-font-size:          1.25rem;
--nd-search-btn-color:              #fff;
--nd-search-btn-bg:                 var(--nd-primary);
--nd-search-btn-border:             0;
--nd-search-border-radius:          0.25rem;

/* hover */
--nd-search-btn-hover-color:        #fff;
--nd-search-btn-hover-bg:           var(--nd-primary-hover);
--nd-search-btn-hover-border-color: transparent;

/* active */
--nd-search-btn-active-color:       #fff;
--nd-search-btn-active-bg:          var(--nd-primary-active);
--nd-search-btn-active-border-color: transparent;

`.gl-search-action`

--nd-search-action-width:           auto;
--nd-search-action-height:          auto;
--nd-search-action-margin:          0;
--nd-search-action-padding-x:       0;
--nd-search-action-padding-y:       0; 
--nd-search-action-font-size:       rem-calc(20);
--nd-search-action-color:           #000;
--nd-search-action-bg:              transparent;
--nd-search-action-border:          0;
--nd-search-action-border-radius:   0;

/* hover */
--nd-search-action-hover-color:     #000;
--nd-search-action-hover-bg:        transparent;
--nd-search-action-hover-border-color: transparent;

/* active */
--nd-search-action-active-color:    #000;
--nd-search-action-active-bg:       transparent;
--nd-search-action-active-border-color: transparent;

`.gl-nav`

--nd-nav-padding:                   0;
--nd-nav-bg:                        transparent;

`.gl-nav-sub`

--nd-nav-sub-height:                auto;
--nd-nav-sub-bg:                    transparent;

`.gl-menu`

--nd-menu-display:                  flex;
--nd-menu-position:                 relative;
--nd-menu-width:                    auto;
--nd-menu-margin:                   0;
--nd-menu-padding:                  0;
--nd-menu-font-size:                1em;
--nd-menu-font-weight:              700;
--nd-menu-line-height:              1.5;

`.gl-menu-link`

--nd-menu-link-padding-x:           1rem;
--nd-menu-link-padding-y:           1rem; 
--nd-menu-link-color:               inherit;
--nd-menu-link-bg:                  transparent;
--nd-menu-link-text-decoration:     none;

/* hover */
--nd-menu-link-hover-color:         var(--nd-primary);
--nd-menu-link-hover-bg:            transparent;
--nd-menu-link-hover-text-decoration: none;

/* active */
--nd-menu-link-active-color:        var(--nd-primary);
--nd-menu-link-active-bg:           transparent;
--nd-menu-link-active-text-decoration: none;

/* show */
--nd-menu-link-show-color:          var(--nd-primary);
--nd-menu-link-show-bg:             transparent;
--nd-menu-link-show-text-decoration: none;

`.gl-menu-sub`

--nd-menu-sub-z-index:              10;
--nd-menu-sub-offset-x:             0;
--nd-menu-sub-offset-y:             100%;
--nd-menu-sub-width:                auto;
--nd-menu-sub-margin:               0;
--nd-menu-sub-padding-x:            0;
--nd-menu-sub-padding-y:            0; 
--nd-menu-sub-font-size:            0.875em;
--nd-menu-sub-font-weight:          400;
--nd-menu-sub-line-height:          inherit;
--nd-menu-sub-bg:                   transparent;
--nd-menu-sub-border:               0;
--nd-menu-sub-border-radius:        0;
--nd-menu-sub-active-max-height:    800px;

`.gl-menu-sub.gl-menu-vert` 지정위치사용

--nd-menu-sub-min-width:            6.5rem;
--nd-menu-sub-padding-x:            calc(var(--nd-menu-link-padding-x) * .5);
--nd-menu-sub-padding-y:            calc(var(--nd-menu-link-padding-y) * .5);
--nd-menu-sub-bg:                   #fff;
--nd-menu-sub-border:               1px solid rgba(0,0,0,.175);

`.gl-menu-sub-link`

--nd-menu-sub-link-padding-x:       1rem; 
--nd-menu-sub-link-padding-y:       1rem; 
--nd-menu-sub-link-color:           #6c757d;
--nd-menu-sub-link-bg:              transparent;
--nd-menu-sub-link-text-decoration: none;

/* hover */
--nd-menu-sub-link-hover-color:     #000;
--nd-menu-sub-link-hover-bg:        transparent;
--nd-menu-sub-link-hover-text-decoration: underline;

/* active */
--nd-menu-sub-link-active-color:    #000;
--nd-menu-sub-link-active-bg:       transparent;
--nd-menu-sub-link-active-text-decoration: none;

`.gl-menu-btn`

--nd-menu-btn-padding-x:            0.5rem;
--nd-menu-btn-padding-y:            0.5rem;
--nd-menu-btn-font-size:            1.5rem;
--nd-menu-btn-line-height:          1;
--nd-menu-btn-color:                inherit;
--nd-menu-btn-bg:                   transparent;
--nd-menu-btn-border-width:         0;
--nd-menu-btn-border-style:         solid;
--nd-menu-btn-border-color:         transparent;
--nd-menu-btn-border-radius:        0;
--nd-menu-btn-transition:           color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

/* hover */
--nd-menu-btn-hover-color:          var(--nd-primary);
--nd-menu-btn-hover-bg:             transparent;
--nd-menu-btn-hover-border-color:   transparent;

/* active */
--nd-menu-btn-active-bg:            var(--nd-primary);
--nd-menu-btn-active-color:         transparent;
--nd-menu-btn-active-border-color:  transparent;

`.gl-menu-arrow`

--nd-menu-arrow-width:              1em;
--nd-menu-arrow-height:             1em;
--nd-menu-arrow-gap:                0.25em;
--nd-menu-arrow-color:              currentColor;
--nd-menu-arrow-icon:               url("data:image/svg+xml,%3Csvg width='16' height='16' stroke-width='2' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")

`.gl-menu-sub-arrow`

--nd-menu-sub-arrow-width:          .6em;
--nd-menu-sub-arrow-height:         var(--nd-menu-sub-arrow-width);
--nd-menu-sub-arrow-color:          currentColor;
--nd-menu-sub-arrow-icon:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
--nd-menu-sub-arrow-offset-x:       calc(1rem - (.6em * .5));
--nd-menu-sub-arrow-offset-y:       50%;

`.gl-menu-vr`

--nd-menu-divider:                  "|";
--nd-menu-divider-color:            #d2d2d4;

`.gl-menu-obj`

--nd-menu-obj-padding-x:            0;
--nd-menu-obj-padding-y:            0;
--nd-menu-obj-font-size:            1.5rem;
--nd-menu-obj-line-height:          1;
--nd-menu-obj-color:                inherit;
--nd-menu-obj-bg:                   transparent;
--nd-menu-obj-border-width:         0;
--nd-menu-obj-border-style:         none;
--nd-menu-obj-border-color:         transparent;
--nd-menu-obj-border-radius:        0;
--nd-menu-obj-transition:           color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
--nd-menu-obj-hover-color:          inherit;
--nd-menu-obj-hover-bg:             transparent;
--nd-menu-obj-hover-border-color:   transparent;
--nd-menu-obj-active-color:         inherit;
--nd-menu-obj-active-bg:            transparent;
--nd-menu-obj-active-border-color:  transparent;

`.gl-menu-obj-group`

--nd-menu-obj-group-gap:            0.5rem;
--nd-menu-obj-group-align:          normal;
--nd-menu-obj-group-valign:         center;

`.gl-service`

--nd-service-cols:                  6;
--nd-service-rows:                  1; 
--nd-service-gutter-x:              1.5rem;
--nd-service-gutter-y:              1.5rem;
--nd-service-width:                 var(--nd-index-width); 
--nd-service-margin:                0 auto;
--nd-service-padding-x:             1.5rem;
--nd-service-padding-y:             1.5rem;
--nd-service-bg:                    var(--nd-body-bg);
--nd-service-border-width:          0;    
--nd-service-border-color:          transparent; 
--nd-service-border-radius:         0;
--nd-service-text-align:            left;

`.gl-service-item`

--nd-service-item-padding-x:        0;
--nd-service-item-padding-y:        0;

`.gl-service-link`

--nd-service-link-margin-bottom:    0.5rem;
--nd-service-link-font-size:        1rem;
--nd-service-link-font-weight:      700;
--nd-service-link-color:            #000;
--nd-service-link-hover-color:      var(--nd-primary);

`.gl-service-menu`

--nd-service-menu-font-size:        0.875em;
--nd-service-menu-font-weight:      400;
--nd-service-menu-link-padding-x:   0;
--nd-service-menu-link-padding-y:   0.375rem;
--nd-service-menu-link-color:       #6c757d;
--nd-service-menu-link-hover-color: #212529;

`.gl-service-floating`

--nd-service-position:               absolute;
--nd-service-z-index:                1003;
--nd-service-offset-x:               0;
--nd-service-offset-y:               100%;
--nd-service-width:                  100%;

`.gl-service-horz`

--nd-service-cols:                           1;
--nd-service-link-width:                     6rem;
--nd-service-link-margin-bottom:             var(--nd-service-gutter-x);

`.gl-service-vr`

--nd-service-vr-border-width:                1px;
--nd-service-vr-border-style:                solid;
--nd-service-vr-border-color:                #d2d2d4;

`.mb-header`

--nd-header-gap:                             1rem;
--nd-header-width:                           auto;
--nd-header-height:                          auto;
--nd-header-padding:                         0;
--nd-header-margin:                          0;
--nd-header-bg:                              transparent;
--nd-header-border-width:                    0;
--nd-header-border-style:                    solid;
--nd-header-border-color:                    transparent;

`.mb-header-side`

--nd-header-side-align-self:                 stretch;
--nd-header-side-width:                      auto;

`.mb-header-btn`

--nd-header-btn-display:                     block;
--nd-header-btn-width:                       auto;
--nd-header-btn-height:                      auto;
--nd-header-btn-padding:                     0.25rem;
--nd-header-btn-font-size:                   1.5rem;
--nd-header-btn-font-weight:                 400;
--nd-header-btn-line-height:                 1;
--nd-header-btn-color:                       inherit;
--nd-header-btn-bg:                          transparent;
--nd-header-btn-border:                      0;
--nd-header-btn-border-radius:               0;

/* active */
--nd-header-btn-active-color:                inherit;
--nd-header-btn-active-bg:                   transparent;
--nd-header-btn-active-border-color:         transparent;

`.mb-logo`

--nd-logo-font-size:                         1em;
--nd-logo-max-width:                         100%;
--nd-logo-max-height:                        unset;

`.mb-menu`

--nd-menu-gap:                               0;
--nd-menu-width:                             auto;
--nd-menu-height:                            auto;
--nd-menu-padding:                           0;
--nd-menu-text-align:                        center;

`.mb-menu-link`

--nd-menu-link-width:                        25%;
--nd-menu-link-padding:                      0.25rem 0.5rem;
--nd-menu-link-font-size:                    1em;
--nd-menu-link-font-weight:                  inherit;
--nd-menu-link-line-height:                  inherit;
--nd-menu-link-letter-spacing:               inherit;
--nd-menu-link-color:                        inherit;
--nd-menu-link-bg:                           transparent;

/* active */
--nd-menu-link-active-font-weight:           inherit;
--nd-menu-link-active-color:                 inherit;
--nd-menu-link-active-bg:                    transparent;

`.mb-menu-container`

--nd-menu-container-margin:                  0;
--nd-menu-container-bg:                      transparent;
--nd-menu-container-border-width:            0;
--nd-menu-container-border-style:            solid;
--nd-menu-container-border-color:            transparent;

`.mb-nav`

--nd-nav-position:                           fixed;
--nd-nav-zindex:                             1004;
--nd-nav-width:                              80%;
--nd-nav-max-width:                          375px;
--nd-nav-height:                             100%;
--nd-nav-bg:                                 #e8e8e9;
--nd-nav-active-transform:                   translateX(-100%);

`.mb-nav-overlay`

--nd-nav-overlay-position:                   fixed;
--nd-nav-overlay-zindex:                     1001;
--nd-nav-overlay-bg:                         rgba(0,0,0, .5);

`.mb-nav-header`

--nd-nav-header-gap:                         1.5rem;
--nd-nav-header-padding:                     1rem 1.25rem;
--nd-nav-header-bg:                          #fff;

`.mb-nav-header-side`

--nd-nav-header-side-gap:                    0.5rem;

`.mb-nav-header-btn`

--nd-nav-header-btn-width:                   auto;
--nd-nav-header-btn-height:                  auto;
--nd-nav-header-btn-padding:                 0.25rem;
--nd-nav-header-btn-font-size:               1.5rem;
--nd-nav-header-btn-font-weight:             400;
--nd-nav-header-btn-line-height:             1;
--nd-nav-header-btn-color:                   inherit;
--nd-nav-header-btn-bg:                      transparent;

/* active */
--nd-nav-header-btn-active-color:            inherit;
--nd-nav-header-btn-active-bg:               transparent;

`.mb-nav-logo`

--nd-nav-logo-width:                         auto;
--nd-nav-logo-max-width:                     6.5rem;
--nd-nav-logo-max-height:                    2rem;

`.mb-nav-search`

--nd-nav-search-width:                       auto;
--nd-nav-search-height:                      3rem;
--nd-nav-search-font-size:                   0.875rem;
--nd-nav-search-font-weight:                 400;
--nd-nav-search-color:                       #fff;
--nd-nav-search-bg:                          #212529;
--nd-nav-search-border:                      0;
--nd-nav-search-border-radius:               0;
--nd-nav-search-focus-color:                 #fff;
--nd-nav-search-focus-border:                0;
--nd-nav-search-focus-border-radius:         0;
--nd-nav-search-placeholder:                 rgba(255,255,255, .2);

`.mb-nav-search-btn`

--nd-nav-search-btn-width:                   4rem;
--nd-nav-search-btn-height:                  auto;
--nd-nav-search-btn-font-size:               1.5rem;
--nd-nav-search-btn-font-weight:             400;
--nd-nav-search-btn-line-height:             1;
--nd-nav-search-btn-color:                   #fff;
--nd-nav-search-btn-bg:                      linear-gradient(to right: rgba(0,0,0, .3) 0%: rgba(0,0,0, 0) 30%);
--nd-nav-search-btn-border-radius:           0;

`.mb-nav-menu`

--nd-nav-menu-margin:                        0 0 .75rem;
--nd-nav-menu-padding:                       1rem 0;
--nd-nav-menu-font-size:                     1em;
--nd-nav-menu-font-weight:                   400;
--nd-nav-menu-line-height:                   1.5;
--nd-nav-menu-bg: #fff;
--nd-nav-menu-text-align:                    left;

`.mb-nav-menu-link`

--nd-nav-menu-link-padding-x:                1.25rem;
--nd-nav-menu-link-padding-y:                0.5rem; 
--nd-nav-menu-link-color:                    #000;

/* icon */
--nd-nav-menu-link-icon:                     url("data:image/svg+xml:%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");

`.mb-nav-submenu`

--nd-nav-submenu-margin:                     0 0 0.5rem 1rem;
--nd-nav-submenu-padding:                    1rem 0;
--nd-nav-submenu-font-size:                  .875em;
--nd-nav-submenu-font-weight:                400;
--nd-nav-submenu-line-height:                1.5;
--nd-nav-submenu-color:                      #6c757d;
--nd-nav-submenu-bg:                         #f8f9fa;
--nd-nav-submenu-border:                     0;
--nd-nav-submenu-border-radius:              0;
--nd-nav-submenu-divider:                    1px solid rgba(0,0,0, .05);
--nd-nav-submenu-item-width:                 50%;
--nd-nav-submenu-link-padding:               0.5rem 1rem;

`.mb-nav-footer`

--nd-nav-footer-margin:                      2rem 0 1.25rem;
--nd-nav-footer-padding:                     0 1.25rem;
--nd-nav-footer-bg:                          transparent;

`.mb-nav-footer-menu`

--nd-nav-footer-menu-font-size:              0.8125rem;
--nd-nav-footer-menu-font-weight:            400;
--nd-nav-footer-menu-line-height:            1.5;
--nd-nav-footer-menu-color:                  #6c757d;
--nd-nav-footer-menu-item-padding-x:         0.75rem;
--nd-nav-footer-menu-divider:                "|";
--nd-nav-footer-menu-divider-color:          #d2d2d4;

`.mb-nav-address`

--nd-nav-address-margin:                     0.75rem 0 0;
--nd-nav-address-padding:                    0.75rem 0;
--nd-nav-address-font-size:                  0.75rem;
--nd-nav-address-font-weight:                400;
--nd-nav-address-line-height:                1.5;
--nd-nav-address-color:                      #6c757d;
--nd-nav-address-border-top:                 1px solid rgba(0,0,0, .05);
--nd-nav-address-item-padding:               0.25rem 0.5rem;

`.go-to-desktop`

--nd-nav-desktop-margin:                     0 0 1rem;
--nd-nav-desktop-padding:                    0.75rem 1.25rem;
--nd-nav-desktop-font-size:                  0.9375rem;
--nd-nav-desktop-font-weight:                400;
--nd-nav-desktop-line-height:                1.2;
--nd-nav-desktop-color:                      #000;
--nd-nav-desktop-bg:                         #fff;
--nd-nav-desktop-border:                     0;
--nd-nav-desktop-border-radius:              50rem;
--nd-nav-desktop-text-align:                 center;

Class 폴더명 기본 레이아웃 제어 선택자 변수

Class

PC v11.21.0.0

Mobile v11.21.0.0

Folders

Layouts v11.21.0.0

PC 레이아웃

Mobile 레이아웃

제어 v11.21.0.0

PHP

Java Script

Search Toggler

Search Opener

Data Attribute

Custom Functions

.gl-wrap

.gl-logo

.gl-logo-container

.gl-banner

.gl-gnb

.gl-updated

.gl-account

.gl-sns

.gl-sns-container

.gl-search

.gl-search-container

.gl-search-ab

.gl-search-btn

.gl-search-action

.gl-nav

.gl-nav-sub

.gl-menu

.gl-menu-link

.gl-menu-sub

.gl-menu-sub.gl-menu-vert 지정위치사용

.gl-menu-sub-link

.gl-menu-btn

.gl-menu-arrow

.gl-menu-sub-arrow

.gl-menu-vr

.gl-menu-obj

.gl-menu-obj-group

.gl-service

.gl-service-item

.gl-service-link

.gl-service-menu

.gl-service-floating

.gl-service-horz

.gl-service-vr

.mb-header

.mb-header-side

.mb-header-btn

.mb-logo

.mb-menu

.mb-menu-link

.mb-menu-container

.mb-nav

.mb-nav-overlay

.mb-nav-header

.mb-nav-header-side

.mb-nav-header-btn

.mb-nav-logo

.mb-nav-search

.mb-nav-search-btn

.mb-nav-menu

.mb-nav-menu-link

.mb-nav-submenu

.mb-nav-footer

.mb-nav-footer-menu

.mb-nav-address

.go-to-desktop

`.gl-wrap`

`.gl-logo`

`.gl-logo-container`

`.gl-banner`

`.gl-gnb`

`.gl-updated`

`.gl-account`

`.gl-sns`

`.gl-sns-container`

`.gl-search`

`.gl-search-container`

`.gl-search-ab`

`.gl-search-btn`

`.gl-search-action`

`.gl-nav`

`.gl-nav-sub`

`.gl-menu`

`.gl-menu-link`

`.gl-menu-sub`

`.gl-menu-sub.gl-menu-vert` 지정위치사용

`.gl-menu-sub-link`

`.gl-menu-btn`

`.gl-menu-arrow`

`.gl-menu-sub-arrow`

`.gl-menu-vr`

`.gl-menu-obj`

`.gl-menu-obj-group`

`.gl-service`

`.gl-service-item`

`.gl-service-link`

`.gl-service-menu`

`.gl-service-floating`

`.gl-service-horz`

`.gl-service-vr`

`.mb-header`

`.mb-header-side`

`.mb-header-btn`

`.mb-logo`

`.mb-menu`

`.mb-menu-link`

`.mb-menu-container`

`.mb-nav`

`.mb-nav-overlay`

`.mb-nav-header`

`.mb-nav-header-side`

`.mb-nav-header-btn`

`.mb-nav-logo`

`.mb-nav-search`

`.mb-nav-search-btn`

`.mb-nav-menu`

`.mb-nav-menu-link`

`.mb-nav-submenu`

`.mb-nav-footer`

`.mb-nav-footer-menu`

`.mb-nav-address`

`.go-to-desktop`