[CSS] 제이쿼리 없이 네비게이션 메뉴 만들기
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="topbar">
<nav class="top-menu">
<ul>
<li>
<a href="#">회사소개</a>
<ul>
<li><a href="#vistion">비전</a></li>
<li><a href="#profile">개요</a></li>
<li><a href="#history">연혁</a></li>
<li><a href="#patent">특허권</a></li>
<li><a href="#location">오시는길</a></li>
<li><a href="#codeOfEthics">직무윤리강령</a></li>
</ul>
</li>
<li>
<a href="#">제품소개</a>
<ul>
<li><a href="#photonicSolutions">Photonic Solutions</a></li>
<li><a href="#fiberSensingSystem">Fiber Sensing System</a></li>
<li><a href="#omas">OMAS</a></li>
<li><a href="#imu">IMU</a></li>
</ul>
</li>
<li>
<a href="#">뉴스&이벤트</a>
<ul>
<li><a href="#news">뉴스</a></li>
<li><a href="#event">이벤트</a></li>
</ul>
</li>
<li>
<a href="#">채용공고</a>
<ul>
<li><a href="#recriuit">채용공고</a></li>
</ul>
</li>
<li>
<a href="#">고객지원</a>
<ul>
<li><a href="#contact">본사/지사/법인 위치안내</a></li>
<li><a href="#agent">대리점 관련</a></li>
<li><a href="#inquirt">문의하기</a></li>
</ul>
</li>
</ul>
<div class="secondmenu-background"></div>
</nav>
</div>
<div class="mobile-topbar">
<div class="btnbox">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<div class="menubox">
<nav class="top-menu">
<ul>
<li>
<a href="#">회사소개</a>
<ul>
<li><a href="#vistion">비전</a></li>
<li><a href="#profile">개요</a></li>
<li><a href="#history">연혁</a></li>
<li><a href="#patent">특허권</a></li>
<li><a href="#location">오시는길</a></li>
<li><a href="#codeOfEthics">직무윤리강령</a></li>
</ul>
</li>
<li>
<a href="#">제품소개</a>
<ul>
<li><a href="#photonicSolutions">Photonic Solutions</a></li>
<li><a href="#fiberSensingSystem">Fiber Sensing System</a></li>
<li><a href="#omas">OMAS</a></li>
<li><a href="#imu">IMU</a></li>
</ul>
</li>
<li>
<a href="#">뉴스&이벤트</a>
<ul>
<li><a href="#news">뉴스</a></li>
<li><a href="#event">이벤트</a></li>
</ul>
</li>
<li>
<a href="#">채용공고</a>
<ul>
<li><a href="#recriuit">채용공고</a></li>
</ul>
</li>
<li>
<a href="#">고객지원</a>
<ul>
<li><a href="#contact">본사/지사/법인 위치안내</a></li>
<li><a href="#agent">대리점 관련</a></li>
<li><a href="#inquirt">문의하기</a></li>
</ul>
</li>
</ul>
<div class="secondmenu-background"></div>
</nav>
</div>
</div>
<div class="contents"></div>
SCSS
// 폰트 불러오기
@import url(https://fonts.googleapis.com/earlyaccess/jejugothic.css);
// 폰트 적용
body{
font-family: 'Jeju Gothic', serif;
// padding: 100px !important;
// 노말라이즈의 padding 값 무시
}
// 노말라이즈 시작
// 노말라이즈 라이브러리 블러오기
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
// 커스텀 라이브러리
*{
padding: 0;
margin: 0;
text-decoration: none;
color: inherit;
list-style: none;
}
// 노말라이즈 끝
// 커스텀
// 작은 화면 최대 너비
$sm-max-width: 840px;
$sm-min-width: $sm-max-width + 1px;
div.mobile-topbar{
& > .btnbox{
padding: 10px;
}
& > .btnbox:hover + .menubox{
display: block;
}
@media(min-width: $sm-min-width){
display: none;
}
& > .menubox{
display: none;
&:hover{
display: block;
}
}
& > .menubox > .top-menu{
margin: 0 auto;
max-width: 400px;
a{
display: block;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
// 텍스트가 넘칠 때
}
// 1차 메뉴
& > ul{
// 1차 메뉴 아이템
& > li{
& > a{
font-size: 20px;
font-weight: bold;
padding: 10px 0;
}
border-top: 1px solid #dfdfdf;
&:first-child{
border: none;
}
}
// 활성화된 1차 메뉴 아이템 호버
& > li:hover > ul{
display: block;
}
& > li > ul{
// 2차 메뉴
display: none;
background-color: darkorange;
& > li{
border-top: 1px solid white;
& > a{
padding: 10px 10px;;
color: white;
&:hover{
text-decoration: underline;
}
}
}
&:first-child{
border: none;
}
}
}
}
}
div.topbar{
@media(max-width: $sm-max-width){
display: none;
}
nav.top-menu{
position: relative;
$secondmenu-height: 240px;
// 1차메뉴
text-align: center;
& > ul{
// 1차메뉴 아이템
display: inline-block;
&:hover > li > ul {
display: block;
}
a{
display: block;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
// 텍스트가 넘칠 때
}
&::after{
content: "";
clear: both;
display: block;
}
& > li{
position: relative;
float: left;
& > a{
padding: 10px 70px;
padding-top: 15px;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.1px;
@media (max-width: 1200px){
padding-left: 40px;
padding-right: 40px;
}
}
}
// 2차메뉴
& > li > ul{
display: none;
position: absolute;
width: 100%;
box-sizing: border-box;
height: $secondmenu-height;
top: 100%;
left: 0;
z-index: 2;
padding: 10px;
&:hover{
background-color: darkorange;
}
&::after{
content: "";
position: absolute;
top: 0;
left: -0.5px;
width: 1px;
height: 100%;
background-color: #dfdfdf;
}
& > li > a{
padding: 10px 0px;
}
&:hover > li > a{
color: white;
}
& > li:hover > a{
text-decoration: underline;
}
}
& > li:first-child > ul{
&::after{
display: none;
}
}
}
// 세컨드메뉴 배경
.secondmenu-background{
height: $secondmenu-height;
background-color: white;
position: absolute;
width: 100%;
display: none;
top: 100%;
left: 0;
transform: translatey(-5px);
}
& > ul:hover + .secondmenu-background {
display: block;
z-index: 1;
}
}
}
div.contents{
background-color: gray;
min-height: 10000px;
}