7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_미숙한 완성...

과제 마감일이 다가오니.... 호다닥 해버린 페이지

우선 

1. 메뉴바 스르륵 됨 

2. 히든메뉴 유지 됨

ㅎ chatgpt짱 ㅋ 그래도 지피티가 다 짜준 코드는 아님..........................

3. 나름 마우스오버 이벤트는 다 할 수 있고 , css도 나름....

 

지금 딱 css로 js 구현 가능할 것 같은 유인원 상태..

" 이제 html div로 날먹 + css는 잘 할 수 있다. 뿌듯."

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ...js 언제 익숙해질까.............

꾸역꾸역 만들긴 함. 페이지 업다운 스르륵 ( 아무도 뭔 말인지 모르는 거 아님? ) 은 .... 언젠간 만들어보겠지...

 

다음엔 nextinnovation페이지 클론코딩 ㄱㄱ 그 페이지가 진짜 유용한 페이지랍니다~ 

 

*{
    color : white;
 /*   border : 1px solid red;*/
}


body{padding:0px; 
    margin :0px;
    overflow:hidden;
    height: 100vh;
}
.video{
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    z-index:-9999;
    object-fit: fill
}
header{
    display: flex;
    padding:1rem;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    position:fixed;
    width: 100vw;

}

.page_num{
    position: absolute;
    
}

.up_down{
    position: absolute;
}
section{
    padding-top:100px;
}
.hivelab{
    width:130px;
    cursor:pointer;
}
.left_menu{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: center;
    float:left;
    font-weight: bold;
}

.lmenu{
    padding:10px;
    cursor: pointer;
    color:white;
}
.lmenu:hover{
    font-size: larger;
    font-weight: bolder;
    animation:ease-in-out;
}

.right_menu{
    display:flex;
    margin:1rem;
    flex-wrap:wrap;
    align-items: center;
    justify-content:space-between;
    z-index:10;
    width:400px;
}
#underline {
    height: 3px;
    background-color: rgb(173, 171, 171);
    position: absolute;
    display: block; 
    width: 30px;
    left: 0px;
    top: 55px;
    padding: 0px;
    bottom: -5px;
    text-align: center;
    animation: slideIn 0.3s ease-out forwards;
  }

@keyframes slideIn{
    0%{
        width: 0;
    }
    100%{
        width: 7%;
    }
} 

.main{
    margin:10%;
    margin-top:100px;
}
.bold_text{
    font-weight: bolder;
    font-size: 80px;
}

.download_circle{
    display:flex;
    background-color: red;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-weight: bold;
    cursor:pointer;
}
.download_circle:hover{
    background-color: rgb(184, 0, 0);
    transition:background-color 0.2s ease-in-out;
}
.explain{
    font-weight: bolder;
    font-size: large;
}

.hidden_menu{
    display:none;
    position:absolute;
    padding:30px;
    border-top:4px solid black;
    background-color: rgba(0,0,0,0.5);
}

.menu:hover{
    color: rgb(173, 171, 171);
    transition:color 0.2s ease-in-out;
}

.menu{
    color:white;
}
.right_menu{
    position: relative;
    cursor:pointer;
}

.hidden_menu_i{
    cursor:pointer;
    font-weight: lighter;
}

.hidden_menu_i:hover{
    font-size: large;
    color:black;
    font-weight: bolder;
    font-family:'Trebuchet MS';
}
footer{
    display:flex;
    flex-wrap:wrap;
    padding:30px;
}
.hi2{
    margin-right: auto;
}
.hi3{
    margin-left:auto;
    justify-content: center;
    display: flex;
    text-align: center;
}


.up{
    border:2px solid black;
    width: 20px;
    display: inline-block;
    background-color: white;
    text-align: center;
    cursor: pointer;
}

.down{
    border:2px solid black;
    width: 20px;
    display: inline-block;
    background-color: white;
    text-align: center;
    cursor: pointer;
}
.fa-caret-up{
    color:black;
}
.fa-sort-down{
    color:black;
}
.page_current{
    font-size: xx-large;
    font-weight: bold;
}
.page_end{
    font-size: xx-large;
    font-weight:lighter;
}
.reserved{
    font-size: small;
    font-weight: bold;
}

 

// const menuList = document.querySelectorAll('.lmenu');
// const underline = document.getElementById('under_line');

// // mouseover 이벤트 핸들러 함수
// function han dleMouseover() {
//   // 현재 마우스가 위치한 메뉴 아이템의 위치를 가져옴
//   const { left, width } = this.getBoundingClientRect();
//   // 밑줄이 움직일 위치 계산
//   const underlineLeft = left + window.pageXOffset;
//   const underlineWidth = width;
//   // 밑줄 위치와 너비 조정
//   underline.style.left = `${underlineLeft}px`;
//   underline.style.width = `${underlineWidth}px`;
//   // 밑줄 보이게 함
//   underline.style.display = 'block';
//   underline.style.backgroundColor='black';
//   menuList.style.color='black';
// }

// // mouseout 이벤트 핸들러 함수
// function handleMouseout() {
//   // 밑줄 숨김
//   underline.style.display = 'none';
// }

// // 각 메뉴 아이템에 이벤트 핸들러 함수 등록
// menuList.forEach((menu) => {
//   menu.addEventListener('mouseover', handleMouseover);
//   menu.addEventListener('mouseout', handleMouseout);
// });


const right_menu = document.querySelectorAll('.right_menu');
const hidden_menu=document.querySelectorAll('.hidden_menu');
const menuList = document.querySelectorAll('.lmenu');
const underline = document.getElementById('underline');

function handleMouseover() {
  const { left, width } = this.getBoundingClientRect();
  const underlineLeft = left + window.pageXOffset;
  const underlineWidth = width;
  underline.style.left = `${underlineLeft}px`;
  underline.style.width = `${underlineWidth}px`;
  underline.style.opacity = 1;
  underline.style.display = 'block';
}

function handleMouseout() {
  underline.style.opacity = 0;
  underline.style.display = 'none'; 
}

menuList.forEach((menu) => {
  menu.addEventListener('mouseenter', handleMouseover);
  menu.addEventListener('mouseleave', handleMouseout);
});


const menu_container = document.querySelector(".right_menu");
const menus = document.querySelectorAll(".rmenu");

menus.forEach((menu) => {
  menu.addEventListener("mouseover", () => {
    const hidden_menu = menu.nextElementSibling;
    if (hidden_menu.classList.contains("hidden_menu")) {
      hidden_menu.style.display = "block";
    }
  });

  menu.addEventListener("mouseleave", () => {
    const hidden_menu = menu.nextElementSibling;
    if (hidden_menu.classList.contains("hidden_menu")) {
      hidden_menu.style.display = "none";
    }
  });
   // 숨겨진 메뉴에서 메뉴 항목 클릭시 숨겨진 메뉴 유지
   const hidden_menu = menu.nextElementSibling;
   if (hidden_menu) {
     hidden_menu.addEventListener("mouseenter", () => {
       hidden_menu.style.display = "block";
     });
     hidden_menu.addEventListener("mouseleave", () => {
       hidden_menu.style.display = "none";
     });
   }
});

<!DOCTYPE html>
<html lang="en">
<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>이거"진짜"어렵습니다</title>
    <link rel="stylesheet" href="./main.css">
    <script src="./main.js" defer></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>

</head>
<body>
    <div class="video">
        <video class = "video" muted autoplay loop>
            <source src="./video.mp4" type="video/mp4">
        
        </video>
    </div>
    <header>
        <div class="hi">

        <div class = "hivelab">H I V E L A B</div>
        </div>
        <div class="task_tabs">
            <div class = "left_menu">
                <div class="lmenu menu">ABOUT</div>
                <div class="lmenu menu">SERVICE</div>
                <div class="lmenu menu">WORK</div>
                <div class="lmenu menu">PEOPLE</div>
                <div class="lmenu menu">CONTACT</div>
            </div>
            <div id="underline"></div>
        </div>
            <div class = "right_menu">
                <div id="info">
                    <div id="info_text" class="menu rmenu">회사소개서 º </div>
                    <div class ="hidden_menu">
                        <div class="hidden_menu_i">하이브랩 오피셜</div><br>
                        <div class="hidden_menu_i">디지털 마케팅 그룹</div><br>
                        <div class="hidden_menu_i">디지털 플랫폼 그룹</div><br>
                        <div class="hidden_menu_i">기술개발 그룹</div><br>
                        <div class="hidden_menu_i">게임 디자인 그룹</div>
                    </div>
                </div>
                <div id="blog">
                    <div id="blog_text" class="menu rmenu"> BLOG º</div>
                        <div class ="hidden_menu">
                            <div class="hidden_menu_i">HIVELAB BLOG</div><br>
                            <div class="hidden_menu_i">Tech BLOG</div>
                        </div>
                </div>
                
                <div id="facebook">
                    <div id="facebook_text" class="menu rmenu"> FACEBOOK º</div>
                </div>

                <div id="kor">
                    <div id="kor_text" class="rmenu"> | KOR</div>
                    <div class ="hidden_menu">
                        <div class="hidden_menu_i">Korean</div><br>
                        <div class="hidden_menu_i">English</div><br>
                        <div class="hidden_menu_i">Vientnamese</div>
                    </div>
                </div>             
            </div>
    </header>

    <section>
        <div class = "main">
            <div class="bold_text">Hybrid<br>Digital Solution.</div>
            <br><div class="explain">하이브랩은 플랫폼 중심의 디지털 커뮤니케이션 에이전시입니다.</div>
            <br><br><br><br><div class="download_circle">회사소개서<br><i class="fas fa-sign-in-alt fa-rotate-90 fa-xs"></i></div>
        </div>
    </section>
    <footer >

        <div class ="hi2">
            <div class="page_num">
                <div class="page_current">01</div>
                <div class="page_end">/04</div>
            </div><br><br>
            <div class ="up_down">
                <br><br>
                <div class="up"><i class="fas fa-caret-up"></i></div>
                <div class="down"><i class="fas fa-sort-down"></i></div>
            </div>
        </div>
        <div class="hi3">
            
            <div class="reserved"><br><br><br><br><br><br>@HIVELAB All rights reserved.</div>
        </div>

    </footer>
    
</body>
</html>