2020.11.09 #TIL
학원에서 마우스 오버시 전체가 내려오는 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; } |
결과
 |