다음주부터 구현할 팀프로젝트의 드롭다운 메뉴바를 구현하여 보았습니다.
원래는 hover 시가 아니라 오른쪽 상단의 버튼으로 클릭으로 작동하는데 아직 구현을 하지 못하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resoft</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<style>
header a {text-decoration: none; }
header h1 {position: absolute; left: 30px; top: 20px; z-index: 5; margin-left: 20%;}
header > h2 {position:absolute; display: flex; right: 14%; top:28px; width: 70px; z-index: 5;}
header #gon {position: absolute; left: 0; top: 0; padding: 0 232px 15px; width: 100%; box-sizing: border-box; border-bottom: 1px solid white; z-index: 10;}
header #gon nav > ul {text-align: center; overflow: hidden;}
header #gon nav > ul:hover{overflow: visible;}
header #gon nav + div {position:absolute; left: 0; top:87px; width: 100%;height: 200px; background: rgba(24, 75, 159, .7); opacity: 0; transition: all 0.5s; z-index: -1;}
header #gon nav:hover + div{opacity: 1;}
header #gon nav > ul:hover ul{opacity: 1;}
header #gon nav > ul >li {display: inline-block; position: relative;}
header #gon nav > ul > li > a{display: block; position:relative; width:160px; height: 70px; font-size: 20px; color: white; line-height: 70px; text-decoration: none; top: 8px; z-index: 10;}
header #gon nav > ul > li > a:after {content: ""; position: absolute; left: 5px; bottom: 0px; width: 0; height: 9px; background: #184B9F; transition: all 0.5s;}
header #gon nav > ul > li:hover > a:after{left: 0; width: 100%;}
header #gon nav > ul ul {padding: 22px 0 0 0; position: absolute; width: 100%; text-align: center; opacity: 0; height: 230px; transition: all 0.5s;}
header #gon nav > ul ul li{line-height: 25px; }
header #gon nav > ul ul a {font-size: 20px; color: white; z-index: 10;}
header #gon nav > ul ul a:hover :after {left: 0; width: 100%;}
header .visual img{width: 100%; filter: opacity(0.5) drop-shadow(0 0 0 black);}
header > h2 img{height: 30px;}
#main-nav {padding-left: 50%;}
</style>
</head>
<body>
<header id="header">
<h1><a href="/"><img src="./images/리소프트로고.png" alt="로고"></a></h1>
<div id="gon">
<nav>
<ul id="main-nav">
<li><a href="">회사소개</a>
<ul class="so">
<li><a href="">REsoft소개</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 class="so">
<li><a href="">ECOCE</a></li>
<li><a href="">moaDo</a></li>
<li><a href="">Etc</a></li>
</ul>
</li>
<li><a href="">정보마당</a>
<ul class="so">
<li><a href="">REsoft소식</a></li>
</ul>
</li>
</ul>
</nav>
<div></div>
</div>
<h2><a href="/" ><img src="./images/구성 요소 23 – 1.svg" alt=""></a></h2>
<div class="visual"><img src="./images/사각형 46.png" alt=""></div>
</header>
</body>
</html>
참고한 영상 : https://www.youtube.com/watch?v=idJbG8v0cu8
드롭다운 메뉴를 익히면서 클릭을 통해 메뉴가 나오게 하는 방법을 찾았지만 아직 찾지 못하였습니다. ㅜㅜ
튜텨님의 도움과 검색을 통해 해결 해야 할 것 같습니다!
처음으로 만들어 본 드롭다운 메뉴인데 생각보다 잘 나온 것 같아 뿌듯했습니다.
그리고 이것 저것 찾아봄으로서 여러가지를 더 배우게 되는 기회가 되었습니다.