메인메뉴(모바일)
모바일용 메인 메뉴입니다.
#menu #gnb #mobile
HTML
<div id="mobile-nav" class="krds-main-menu-mobile sample" style="display: block; position: static; visibility: visible;">
<div class="gnb-wrap">
<div class="gnb-header">
<div class="gnb-utils">
<ul class="utility-list">
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
</ul>
</div>
<div class="gnb-login">
<button type="button" class="krds-btn large text"><i class="svg-icon ico-log"></i> 로그인을 해주세요</button>
</div>
<div class="gnb-service-menu">
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
</div>
<div class="sch-input">
<input type="text" class="krds-input" placeholder="찾고자 하는 메뉴명을 입력해 주세요" title="찾고자 하는 메뉴명 입력" />
<button type="button" class="krds-btn medium icon ico-search">
<span class="sr-only">검색</span>
<i class="svg-icon ico-sch"></i>
</button>
</div>
</div>
<div class="gnb-body">
<div class="gnb-menu">
<div class="menu-wrap">
<ul>
<li>
<a href="#mGnb-anchor1" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor2" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor3" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor4" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor5" class="gnb-main-trigger">1Depth</a>
</li>
</ul>
</div>
<div class="submenu-wrap">
<div class="gnb-sub-list" id="mGnb-anchor1">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor2">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor3">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li>
<a href="#" class="gnb-sub-trigger has-depth3">2Depth</a>
<div class="depth3-wrap">
<ul>
<li>
<a href="#" class="depth3-trigger has-depth4">3Depth</a>
<div class="depth4-wrap">
<div class="depth4-head">
<button type="button" class="krds-btn icon trigger-prev">
<span class="sr-only">이전화면</span>
<i class="svg-icon ico-angle left"></i>
</button>
<button type="button" class="krds-btn icon trigger-close">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
<ul class="depth4-body">
<h4 class="sub-title">4Depth title</h4>
<ul class="depth4-ul">
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor4">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor5">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
</div>
</div>
<div class="gnb-bottom">
<a href="#" class="krds-btn small text">메뉴명 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn small text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i></a>
</div>
</div>
<button type="button" class="krds-btn medium icon" id="close-nav">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
</div>Vue 컴포넌트
<template>
<div id="mobile-nav" class="krds-main-menu-mobile sample" style="display: block; position: static; visibility: visible;">
<div class="gnb-wrap">
<div class="gnb-header">
<div class="gnb-utils">
<ul class="utility-list">
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
</ul>
</div>
<div class="gnb-login">
<button type="button" class="krds-btn large text"><i class="svg-icon ico-log"></i> 로그인을 해주세요</button>
</div>
<div class="gnb-service-menu">
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
</div>
<div class="sch-input">
<input type="text" class="krds-input" placeholder="찾고자 하는 메뉴명을 입력해 주세요" title="찾고자 하는 메뉴명 입력" />
<button type="button" class="krds-btn medium icon ico-search">
<span class="sr-only">검색</span>
<i class="svg-icon ico-sch"></i>
</button>
</div>
</div>
<div class="gnb-body">
<div class="gnb-menu">
<div class="menu-wrap">
<ul>
<li>
<a href="#mGnb-anchor1" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor2" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor3" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor4" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor5" class="gnb-main-trigger">1Depth</a>
</li>
</ul>
</div>
<div class="submenu-wrap">
<div class="gnb-sub-list" id="mGnb-anchor1">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor2">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor3">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li>
<a href="#" class="gnb-sub-trigger has-depth3">2Depth</a>
<div class="depth3-wrap">
<ul>
<li>
<a href="#" class="depth3-trigger has-depth4">3Depth</a>
<div class="depth4-wrap">
<div class="depth4-head">
<button type="button" class="krds-btn icon trigger-prev">
<span class="sr-only">이전화면</span>
<i class="svg-icon ico-angle left"></i>
</button>
<button type="button" class="krds-btn icon trigger-close">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
<ul class="depth4-body">
<h4 class="sub-title">4Depth title</h4>
<ul class="depth4-ul">
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor4">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor5">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
</div>
</div>
<div class="gnb-bottom">
<a href="#" class="krds-btn small text">메뉴명 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn small text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i></a>
</div>
</div>
<button type="button" class="krds-btn medium icon" id="close-nav">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
</div>
</template>
<script setup lang="ts">
// 메인메뉴(모바일) 컴포넌트
// 모바일용 메인 메뉴입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- main_menu_mobile.html
- 카테고리
- 네비게이션
- 난이도
- 어려움