우피 메인 콘솔에 적용 시켜봄
<head>
<!-- 여기서부터가 상단 메뉴바 설정 관련 -->
<style>/* Layout Selector */
#header {
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 999;
height: 3rem;
width: 100%;
</style>
<script type="text/javascript">
let gnb = document.querySelectorAll("#gnb > li")
let gnbElement = document.querySelector("#gnb")
for (let i = 0; i < gnb.length; i++) {
gnb[i].addEventListener("mouseover",() => {
gnbElement.classList.add("on")
})
}
let headerElement = document.querySelector("#header")
header.addEventListener("mouseout",(e) =>{
if (e.target.id == "gnb" ){
gnbElement.classList.remove("on")
}
})
</script>
HTML
복사
< body>
<scss>
body {
background-color: #e5edf2;
}
</scss>
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function() {
$("body").prognroll(
{height: 3, color:"#ab9bbf"}
);
$(".content").prognroll({
custom:true});
});
</script>
<!--상단메뉴 바-->
<div id="wrap">
<div id="header">
<h1>
<a href="https://trabrickshome.cdn1.cafe24.com/logo.png"></a>
</h1>
<ul id="gnb" class="menu-bar1">
<li>
<a href="#">풀빌라 허니문</a>
<ul>
<li>
<a href="#">태국</a>
<ul>
<li><a href="https://ns.trabricks.kr/local/kosamui/contents">(USM)코사무이</a></li>
<li><a href="https://ns.trabricks.kr/local/phuket/contents">(HKT)푸켓</a></li>
<li><a href="https://ns.trabricks.kr/hotel/kbv">(KBV)끄라비</a></li>
<li><a href="https://ns.trabricks.kr/local/thailand/contents">(KVB)카오락</a></li>
</ul>
</li>
<li>
<a href="#">(DPS)발리</a>
<ul>
<li><a href="https://ns.trabricks.kr/local/bali/contents">발리지역설명</a></li>
<li>href="https://ns.trabricks.kr/hotel/bali">호텔리조트사진</a></li>
</ul>
</li>
<li>
<a href="#">(MLE)몰디브</a>
<ul>
<li><a href="https://ns.trabricks.kr/local/mle/contents">몰디브지역설명</a></li>
<li><a href="https://ns.trabricks.kr/hotel/mle">리조트사진자료</a></li>
</ul>
</li>
<li>
<a href="#">(VNM)베트남</a>
<ul>
<li><a href="https://ns.trabricks.kr/local/danang/contents">다낭</a></li>
<li><a href="https://ns.trabricks.kr/hotel/dad">다낭호텔리조트사진</a></li>
<li><a href="#">푸꾸옥</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">관광+휴양 함께</a>
<ul>
<li>
<a href="#">(HNL)하와이</a>
<ul>
<li><a href="#">오아후</a></li>
<li><a href="#">마우이</a></li>
<li><a href="https://ns.trabricks.kr/hotel/koa">빅아일랜드</a></li>
<li><a href="#">3차메뉴아이템4</a></li>
</ul>
</li>
<li>
<a href="#">(CUN)칸쿤</a>
<ul>
<li><a href="#">호텔존</a></li>
<li><a href="#">플라야무헤레스</a></li>
<li><a href="#">푸에르토 모렐로스</a></li>
<li><a href="#">푸에르토아벤투라스</a></li>
<li><a href="#">아쿠말</a></li>
<li><a href="#">플라야델카르멘</a></li>
<li><a href="#">툴룸 </a></li>
</ul>
</li>
<li>
<a href="#">(MRU)모리셔스</a>
<ul>
<li><a href="https://ns.trabricks.kr/hotel/mru">모리셔스호텔사진</a></li>
<li><a href="#">동부</a></li>
<li><a href="#">남부</a></li>
<li><a href="#">서부/서남부</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">유럽</a>
<ul>
<li>
<a href="#">서유럽</a>
<ul>
<li><a href="#">파리</a></li>
<li><a href="https://ns.trabricks.kr/local/spain/contents">스위스</a></li>
<li><a href="#">이탈리아</a></li>
<a href="#">동유럽</a>
<li><a href="#">체코</a></li>
<li><a href="#">오스트리아</a></li>
<li><a href="#">헝가리</a></li>
<a href="#">남유럽</a>
<li><a href="https://ns.trabricks.kr/local/spain/contents">스페인</a>
<li><a href="#">포르투갈</a></li>
<a href="#">섬 휴양</a>
<li><a href="">몰타</a>
<li><a href="#">마요르카</a></li>
<li><a href="#">푸에르테벤투라</a></li>
<li><a href="#">테네리페</a></li>
</ul>
</li>
<li>
<a href="#">고객센터</a>
<ul>
<li><a href="https://ns.trabricks.kr/customer/firststep">신혼여행지 정하기</a></li>
<li><a href="https://ns.trabricks.kr/customer/%20reserve">예약진행순서 안내</a></li>
<li><a href="https://ns.trabricks.kr/tmall/carrier">허니문특전</a></li>
<li><a href="https://trabricks.waveon.io/">실시간견적</a></li>
<li><a href="#">실험실</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div
HTML
복사