사이드 내비게이션
사이드바 내비게이션 메뉴입니다.
#side #lnb #navigation
HTML
<nav class="krds-side-navigation">
<h2 class="lnb-tit">1Depth-title</h2>
<ul class="lnb-list" role="menubar">
<li class="lnb-item active" role="none">
<button type="button" class="lnb-btn lnb-toggle active" role="menuitem" aria-controls="lnbmenu-1" aria-expanded="true">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-1" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-2" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-2" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem active" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem" aria-current="page">3Depth-link</a></li>
</ul>
</div>
</li>
<li class="lnb-item" role="none">
<button type="button" class="lnb-btn lnb-toggle" role="menuitem" aria-controls="lnbmenu-4" aria-expanded="false">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-4" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-5" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-5" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
</ul>
</div>
</li>
<li class="lnb-item" role="none">
<button type="button" class="lnb-btn lnb-toggle" role="menuitem" aria-controls="lnbmenu-6" aria-expanded="false">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-6" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-7" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-7" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
</ul>
</div>
</li>
</ul>
</nav>Vue 컴포넌트
<template>
<nav class="krds-side-navigation">
<h2 class="lnb-tit">1Depth-title</h2>
<ul class="lnb-list" role="menubar">
<li class="lnb-item active" role="none">
<button type="button" class="lnb-btn lnb-toggle active" role="menuitem" aria-controls="lnbmenu-1" aria-expanded="true">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-1" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-2" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-2" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem active" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem" aria-current="page">3Depth-link</a></li>
</ul>
</div>
</li>
<li class="lnb-item" role="none">
<button type="button" class="lnb-btn lnb-toggle" role="menuitem" aria-controls="lnbmenu-4" aria-expanded="false">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-4" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-5" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-5" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
</ul>
</div>
</li>
<li class="lnb-item" role="none">
<button type="button" class="lnb-btn lnb-toggle" role="menuitem" aria-controls="lnbmenu-6" aria-expanded="false">2Depth-menu</button>
<div class="lnb-submenu">
<ul id="lnbmenu-6" role="menu">
<li class="lnb-subitem" role="none">
<button type="button" class="lnb-btn lnb-toggle-popup" role="menuitem" aria-controls="lnbmenu-7" aria-expanded="false" aria-haspopup="true">3Depth-menu</button>
<div class="lnb-submenu-lv2" id="lnbmenu-7" role="menu">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
<li role="none"><a href="#" class="lnb-btn" role="menuitem">4Depth</a></li>
</ul>
</div>
</li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
<li class="lnb-subitem" role="none"><a href="#" class="lnb-btn lnb-link" role="menuitem">3Depth-link</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</template>
<script setup lang="ts">
// 사이드 내비게이션 컴포넌트
// 사이드바 내비게이션 메뉴입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- side_navigation.html
- 카테고리
- 네비게이션
- 난이도
- 보통