메인메뉴(PC)
데스크탑용 메인 메뉴입니다.
#menu #gnb #desktop
HTML
<nav class="krds-main-menu sample">
<div class="inner">
<ul class="gnb-menu">
<li>
<button type="button" class="gnb-main-trigger active" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap is-open">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger active" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list active">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list">
<div class="gnb-sub-list single-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</a>
</li>
<li>
<button type="button" class="gnb-main-trigger is-link" data-trigger="gnb">링크(button)</button>
</li>
</ul>
</div>
</nav>Vue 컴포넌트
<template>
<nav class="krds-main-menu sample">
<div class="inner">
<ul class="gnb-menu">
<li>
<button type="button" class="gnb-main-trigger active" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap is-open">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger active" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list active">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list">
<div class="gnb-sub-list single-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</a>
</li>
<li>
<button type="button" class="gnb-main-trigger is-link" data-trigger="gnb">링크(button)</button>
</li>
</ul>
</div>
</nav>
</template>
<script setup lang="ts">
// 메인메뉴(PC) 컴포넌트
// 데스크탑용 메인 메뉴입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- main_menu_pc.html
- 카테고리
- 네비게이션
- 난이도
- 어려움