File name
Commit message
Commit date
2023-11-01
2023-11-01
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w1400 header-wrap">
<div class="logo-toggle">
<div class="logo">
<router-link to="/"><span>AI 디지털교과서 통합지원센터</span></router-link>
</div>
<input type="checkbox" id="checkbox" v-model="check">
<label for="checkbox" class="toggle" @click="toggleMenu">
<div class="bar bar--top"></div>
<div class="bar bar--middle"></div>
<div class="bar bar--bottom"></div>
</label>
<!-- <i v-if="!isOpened" class="fa-solid fa-bars mobile1" @click="toggleMenu"></i>
<i v-else class="fa-solid fa-times mobile1" @click="toggleMenu"></i> -->
</div>
<!-- 모바일 -->
<nav class=" sub-nav">
<ul class="main-sub-menu" :class="{ open: isOpened }">
<li v-for="menuItem in menuItems" :key="menuItem.text">
<div @click="toggleAccordion(menuItem)" class="accordion-header"
:class="{ 'active': menuItem.isExpanded }">
{{ menuItem.text }}
</div>
<ul class="main-sub-menu-sb" v-if="menuItem.isExpanded">
<li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
<router-link :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
<!-- PC -->
<nav>
<ul class="main-menu main-menu-1">
<li v-for="menuItem in menuItems" :key="menuItem.text" :class="{ 'active': menuItem.isHovered }"
@mouseover="menuItem.isHovered = true" @mouseout="menuItem.isHovered = false">
<router-link :to="menuItem.link">{{ menuItem.text }}</router-link>
<ul class="sub-menu sub-menu-1">
<li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
<router-link :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
check: false,
isOpened: false,
menuItems: [
{
text: "자료실",
link: "/Technology.page",
isHovered: false,
subMenu: [
// { text: "AI 디지털교과서개발 가이드라인", link: "/Guide.page" },
{ text: "기술문서", link: "/Technology.page" },
{ text: "자료집", link: "/Data.page" }
]
},
{
text: "네트워킹",
link: "",
isHovered: false,
subMenu: [
{ text: "기업 홍보관", link: "/Matching.page" },
]
},
{
text: "커뮤니티",
link: "/Notice.page",
isHovered: false,
subMenu: [
{ text: "공지사항", link: "/Notice.page" },
{ text: "홍보/뉴스", link: "/News.page" },
{ text: "전문가 협의체", link: "" }
]
},
{
text: "통합지원센터 소개",
link: "/Introduction.page",
subMenu: [
{ text: "통합지원센터란?", link: "/Introduction.page" },
// { text: "협력 기업", link: "" }
]
},
{
text: "마이페이지",
link: "/Info.page",
isHovered: false,
subMenu: [
{ text: "내 정보 수정", link: "/Info.page" },
{ text: "매칭 관리", link: "" }
]
}
]
};
},
methods: {
toggleAccordion(menuItem) {
menuItem.isExpanded = !menuItem.isExpanded;
console.log(menuItem.isExpanded);
this.isOpened = true;
},
toggleMenu() {
this.isOpened = !this.isOpened;
},
navClose(menuItem) {
this.isOpened = false;
menuItem.isExpanded = false;
this.check = false;
},
// mouseouts() {
// this.isOpened = false;
// console.log("active");
// }
},
watch: {
},
computed: {
},
mounted() {
console.log('Menu mounted');
}
}
</script>
<style scoped>
ul.main-menu {
display: flex;
justify-content: flex-start;
align-items: center;
}
ul.main-menu>li {
position: relative;
}
ul.main-menu>li>a {
display: block;
padding: 2.5rem;
font-size: 1.6rem;
margin: 2rem;
font-weight: 500;
font-family: "Pretendard-Regular";
}
ul.sub-menu {
height: 0;
overflow: hidden;
transition: all 0.8s;
position: absolute;
top: 100px;
left: 0;
width: 100%;
z-index: 100000;
background-color: #ffff;
/* box-shadow: 0px 2px 2px #3333331b; */
}
ul.main-menu>li.active ul.sub-menu {
height: auto;
}
ul.sub-menu>li>a {
display: block;
padding: 15px;
font-size: 1.5rem !important;
font-weight: 500;
font-family: "Pretendard-Regular";
padding-bottom: 2rem;
text-align: center;
font-size: 1.2rem;
}
#checkbox {
display: none;
}
.toggle {
position: relative;
width: 30px;
cursor: pointer;
margin: auto;
display: block;
height: calc(4px * 3 + 11px * 2);
}
.bar {
position: absolute;
left: 0;
right: 0;
height: 3px;
border-radius: calc(4px / 2);
background: #2c407f;
color: inherit;
opacity: 1;
transition: none 0.35s cubic-bezier(.5, -0.35, .35, 1.5) 0s;
}
/***** Spin Animation *****/
.bar--top {
bottom: calc(50% + 11px + 4px/ 2);
transition-property: bottom, transform;
transition-delay: calc(0s + 0.35s), 0s;
}
.bar--middle {
top: calc(50% - 4px/ 2);
transition-property: opacity;
transition-delay: calc(0s + 0.35s);
}
.bar--bottom {
top: calc(50% + 11px + 4px/ 2);
transition-property: top, transform;
transition-delay: calc(0s + 0.35s), 0s;
}
#checkbox:checked+.toggle .bar--top {
bottom: calc(50% - 4px/ 2);
transform: rotate(135deg);
transition-delay: 0s, calc(0s + 0.35s);
}
#checkbox:checked+.toggle .bar--middle {
opacity: 0;
transition-duration: 0s;
transition-delay: calc(0s + 0.35s);
}
#checkbox:checked+.toggle .bar--bottom {
top: calc(50% - 4px/ 2);
transform: rotate(225deg);
transition-delay: 0s, calc(0s + 0.35s);
}
</style>