<body>
<header>
<div class="clear">
<h1><a href=""><span class="hide">로고</span></a></h1>
<nav class="gnb">
<li>
<a href="">WOW텔레콤</a>
<div>
<div>
<ul>
<li><a href="">CEO인사말</a></li>
<li><a href="">회사소개</a></li>
<li>
<a href="">사업소개</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="">AI</a></li>
</ul>
</li>
<li><a href="">연혁</a></li>
<li><a href="">브랜드</a></li>
<li><a href="">스포츠</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="">사회적 가치</a>
<div>
<div>
<ul>
<li><a href="">사회적가치추구</a></li>
<li><a href="">사회적가치프로그램</a></li>
<li>
<a href="">지속가능경영</a>
<ul>
<li><a href="">책임경영</a></li>
<li><a href="">지속경영 자료실</a></li>
</ul>
</li>
<li>
<a href="">이해관계자 참여</a>
<ul>
<li><a href="">정책</a></li>
<li><a href="">참여 Framework</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="w2">
<a href="">투자정보</a>
<div>
<div>
<ul>
<li>
<a href="">경영정보</a>
<ul>
<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="">재무 하이라이트</a></li>
<li><a href="">신용등급</a></li>
</ul>
</li>
<li>
<a href="">주식정보</a>
<ul>
<li><a href="">주주현황</a></li>
<li><a href="">주주환원</a></li>
<li><a href="">주가정보</a></li>
</ul>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">IR자료실</a>
<ul>
<li><a href="">실적발표</a></li>
<li><a href="">Presentation</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="">IR자료요청</a></li>
<li><a href="">FAQ</a></li>
</ul>
</li>
<li><a href="">전자공고</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="">미디어센터</a>
<div>
<div>
<ul>
<li><a href="">뉴스</a></li>
<li><a href="">광고영상</a></li>
<li><a href="">W.hy</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="">인재채용</a>
<div>
<div>
<ul>
<li><a href="">채용정보</a></li>
</ul>
</div>
</div>
</li>
</nav>
<a href="" class="lang" aria-label="영문사이트 바로가기">EN</a>
</div>
</header>
<div class="bg_gnb"></div>
</body>@charset "UTF-8";
li,ul,ol{list-style : none};
a {color: #000; text-decoration: none;}
.clear {clear: both;}
.clear:after {content: ""; display: block; clear: both;}
header {position: relative;}
header > div{width: 1160px; padding: 32px 0 0 0; margin: 0 auto;}
header h1{float: left;}
/* float을 설정하게 되면 부모요소의 높이가 초기화된다. 따라서 부모요소에 clear클래스를 주었다. */
header h1 a{display: block; width: 99px; height: 58px; background: url(../../../navigation/images/h1_logo3.png) no-repeat center;}
header .lang{float: right;}
header nav{float: left; padding: 0 0 0 43px;}
header nav a{letter-spacing: -0.25px;}
/* 자간 설정 : 포토샵에서 -25 ---> letter-spacing에서 */
header .gnb > li{float: left; position: relative; width: 165px;}
header .gnb > li.w2{width : 219px;}
/* 메뉴 카테고리마다 너비를 동일하게 주어 통일감은 준다. */
/* 투자정보만 조금 더 길게 너비를 지정해준다. */
header .gnb > li:hover > a{color: #e6233e;}
header .gnb > li:hover > div{background: #fff;}
header .gnb > li > a {display: block; font-size: 16px; color: #222; line-height: 58px; text-align: center;}
/* 인라인 요소인 a에 line-height를 주기 위해 display:block을 지정한다. */
header .gnb > li > div{display: none; position: absolute; left: 0; z-index: 3; width: 100%; padding: 16px 20px; box-sizing: border-box; border-left: 1px solid #d7d7d7;}
header .gnb > li:last-child > div{border-right: 1px solid #d7d7d7;}
header .gnb > li > div > div > ul > a {display: block;}
header .gnb > li > div > div > ul > li{line-height: 40px;}
header .gnb > li > div > div > ul > li > a{font-size: 15px; color: #222;}
header .gnb > li > div > div > ul > li > ul{padding: 0 0 8px;}
header .gnb > li > div > div > ul > li > ul > li{line-height: 26px;}
header .gnb > li > div > div > ul > li > ul > li a{font-size: 13px; color: #6a6a6a;}
header .gnb > li.w2 > div > div{float: left; width: 50%;}
/* 하위메뉴가 2개 열로 디자인한 부분 */
.bg_gnb{display: none; position: absolute; left: 0; right: 0; top: 90px; z-index: 2; background: #ececec; border-top: 1px solid #d7d7d7;}
.bg_gnb::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #d7d7d7;}
.ie9 header:after{background: #e94e66;}
// 초점이 메뉴에 진입 후 동시에 마우스 호버할 경우
//css로 지정된 호버 효과(하위메뉴 색상변경) 동작이 작동하지 않은 오류가 발생했다.
const menuBg = document.querySelector('.bg_gnb');
const menuLi = document.querySelectorAll('.gnb li');
const depth1Li = document.querySelectorAll('.gnb > li');
const detph1A = document.querySelectorAll('.gnb > li a');
const depth2 = document.querySelectorAll('.gnb > li > div');
const logo = document.querySelector('h1');
const lang = document.querySelector('.lang');
//마우스 호버시 설정
menuLi.forEach((li)=> li.addEventListener('mouseenter', showMenu));
menuLi.forEach((li)=> li.addEventListener('mouseleave', hideMenu));
depth1Li.forEach((li)=> li.addEventListener('focusin',(e)=>{
const eachBg = e.currentTarget.lastElementChild;
showMenu();
depth2.forEach((div)=>{
div.style.background = 'none';
})
eachBg.style.background = '#fff';
}
));
logo.addEventListener('focusin',hideMenu);
lang.addEventListener('focusin',hideMenu);
//e.target과 e.currentTarget의 차이점을 알고 이용하자.
function showMenu(){
let hig = 0;
depth2.forEach((div)=> {
div.style.display = 'block';
if(div.getAttribute('style')){
let divHig = div.clientHeight;
if(hig <= divHig) hig = divHig;
}
});
depth2.forEach((div)=> {
div.style.height = `${hig}px`;
});
menuBg.style.display = 'block';
menuBg.style.height = `${hig}px`;
}
function hideMenu(){
depth2.forEach((div)=> div.style.display = 'none');
menuBg.style.display = 'none';
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.