-
2020.11.09 #TILTIL(today I learned) 2020. 11. 10. 09:09
학원에서 마우스 오버시 전체가 내려오는 2단 메뉴 만드는 법을 배웠다 새롭게 알게된 점은 2단계 위에 있는 부모에 position: relative를 주면 2단계 하위의 자손 width가 relative를 따라간다는 것이다. 그리고 서브메뉴가 내려올때 배경 100%는 동일한 배경색의 shadow 박스를 만들어서 ul과 함께 내려오게끔 하면 된다. 어제 2단 메뉴로 동부센트레빌과 경기콘텐츠진흥원의 메뉴 부분을 만들었다.
1. 경기콘텐츠진흥원
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>경기콘텐츠진흥원</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header_in">
<div class="lnb cf">
<button class="system">조직도</button>
<button class="sign">회원가입</button>
<button class="login">로그인</button>
</div>
<h1 class="logo"></h1>
<div class="gnb">
<ul>
<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="#">경기도 동네서점 상품권</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="#">시설이용</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>
<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="#">GCA소개</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>
<li>
<a href="#">기부금</a>
</li>
<li>
<a href="#">CI/BI</a>
</li>
<li>
<a href="#">오시는길</a>
</li>
</ul>
</li>
</ul>
<div class="gnb_shadow"></div>
</div>
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #666;
}
.cf:after{
content: '';
display: block;
clear: both;
}
header{
width: 100%;
height: 100%;
position: relative;
}
.header_in{
width: 1000px;
height: 110px;
margin: 0 auto;
background: #fff;
}
header .lnb{
width: 1000px;
padding: 30px 10px 0 0;
box-sizing: border-box;
}
header .lnb button{
display: block;
width: 97px;
height: 32px;
outline: none;
border: 1px solid #ddd;
border-radius: 20px;
background: #fff;
font-size: 13px;
font-weight: bold;
color: #666;
cursor: pointer;
}
header .lnb .system{
float: left;
margin-left: 10px;
}
header .lnb .login,
header .lnb .sign{
float: right;
margin-left: 10px;
}
header .logo{
width: 230px;
height: 60px;
background: url(../img/logo.gif) no-repeat 50% 50%;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%);
}
header .gnb{
width: 100%;
position: absolute; left: 0; top: 110px;
border-bottom: 1px solid #ddd;
}
header .gnb> ul:before{
content: '';
display: block;
width: 50px;
height:50px;
background: url(../img/ham.png) no-repeat center;
position: absolute; left: -50px; top: 0;
cursor: pointer;
}
header .gnb> ul:after{
content: '';
display: block;
width: 50px;
height:50px;
background: url(../img/times.png) no-repeat center;
position: absolute; right: -100px; top: 0;
cursor: pointer;
}
header .gnb > ul{
width: 1000px;
height: 70px;
margin: 0 auto;
position: relative;
z-index: 10;
background: #ddd;
}
header .gnb > ul > li{
float: left;
}
header .gnb ul li a{
display: block;
width: 200px;
}
header .gnb > ul > li > a{
height: 70px;
line-height: 70px;
text-align: center;
font-size: 18px;
font-weight: bold;
background: #fff;
}
header .gnb ul li ul{
width: 200px;
position: absolute;
height: 0;
overflow: hidden;
transition: height .5s, background 0.3s;
border-left: 1px solid #eee;
}
header .gnb ul li:last-child ul{
border-right: 1px solid #eee;
}
header .gnb ul:hover ul{
height: 450px;
}
header .gnb ul li ul:hover{
background: #fcf6ff;
}
header .gnb ul ul li a{
height: 20px;
line-height: 20px;
padding: 20px 0 0 25px;
text-align: left;
font-size: 14px;
}
header .gnb ul ul li:hover a{
font-weight: bold;
}
header .gnb .gnb_shadow{
position: absolute; top: 71px; left: 0;
width: 100%;
height: 0;
background: #ddd;
transition: all .5s;
}
header .gnb > ul:hover + .gnb_shadow{
height: 450px;
border-top: 1px solid #eee;
}
결과
2. 동부센트레빌
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>동부센트레빌</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header_in cf">
<h1 class="logo">
<a href="#">
<img src="img/top_logo.png" alt="동부센트레빌">
</a>
</h1>
<div class="lnb">
<a href="#" class="login">LOGIN</a>
<a href="#" class="join">JOIN</a>
</div>
<div class="gnb">
<ul>
<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>
</ul>
</li>
<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/S센터</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>
<li><a href="#">수상실적</a></li>
<li><a href="#">센트레빌 소식</a></li>
</ul>
</li>
</ul>
<div class="gnb_shadow"></div>
</div>
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans KR', sans-serif;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.cf:after{
content: '';
display: block;
clear: both;
}
header{
width: 100%;
position: relative;
}
.header_in{
margin: 0 auto;
height: 700px;
max-width: 1920px;
min-width: 1260px;
background: url(../img/visualimg_1_1920.jpg) no-repeat center;
}
header .logo{
float: left;
width: 170px;
height: 70px;
position: relative;
z-index: 100;
}
header .logo img{
display: block;
}
header .lnb{
float: right;
}
.lnb a{
position: relative;
z-index: 10;
display: block;
padding-left: 18px;
width: 100px;
height: 70px;
line-height: 70px;
text-align: center;
color: #333;
font-size: 12px;
background: #eee;
float: left;
box-sizing: border-box;
}
.lnb a:hover{
color: #042e6f;
}
.lnb a:before{
content: '';
display: block;
width: 22px;
height: 22px;
transform: translateY(-50%);
}
.lnb a:nth-child(1):before{
background: url(../img/icon.png) no-repeat 0 0;
position: absolute; left: 14px; top: 50%;
}
.lnb a:nth-child(2):before{
background: url(../img/icon.png) no-repeat -23px 0;
position: absolute; left: 18px; top: 50%;
}
header .gnb{
width: 100%;
position: relative;
}
header .gnb > ul{
position: relative;
z-index: 10;
width: 800px;
height: 70px;
margin: 0 auto;
border-bottom: 0.5px solid #eee;
}
header .gnb > ul:hover{
border-bottom: none;
}
header .gnb > ul > li{
float: left;
}
header .gnb > ul > li > a{
display: block;
width: 160px;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 18px;
color: #fff;
font-weight: bold;
position: relative;
}
header .gnb > ul > li > a:after{
content: '';
display: block;
width: 100%;
height: 2px;
background: #fff;
position: absolute; left: 0; bottom: 0;
transform: scaleX(0);
transition: transform .4s;
}
header .gnb > ul > li:hover > a:after{
transform: scaleX(1);
}
header .gnb ul li ul{
padding: 30px 0 0;
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all .3s;
}
header .gnb ul:hover li ul{
height: 300px;
opacity: 1;
visibility: visible;
}
header .gnb ul ul li a{
display: block;
width: 160px;
line-height: 38px;
color: #fff;
text-align: center;
}
header .gnb .gnb_shadow{
position: absolute; top: 0; left: 0;
width: 100%;
height: 0;
background: #1f2572;
transition: all .4s;
z-index: 9;
}
header .gnb ul:hover + .gnb_shadow{
height: 330px;
}
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.11.03 #TIL (0) 2020.11.04 2020.11.02 #TIL (0) 2020.11.03 2020.10.28 #TIL (0) 2020.10.29 2020.10.27 #TIL (0) 2020.10.28 2020.10.26 #TIL (0) 2020.10.27