FRONTEND/JS & Library 실무

[제이쿼리] 02. 메뉴 hover 시 메뉴 100% 판 내려오기

2021. 6. 24. 19:49
728x90
반응형

 

=== Prologue ===

 

웹페이지에 접속하면, 메뉴에서 카테고리를 정해 클릭하게 되는데,

메뉴가 내려 오는 방식은 

 

1. 해당 카테고리만 내려오기

2. 메뉴 영역 만큼 모든 서브메뉴가 보여지기

3. 메뉴 영역 포함 가로 사이즈 100% 판이 보여지기 

 

이 세 가지 중에 하나라고 생각하면 된다.

 

그중에서 오늘은 메뉴 100% 내려오기를 정리해 보려고 한다.

 

HTML구조뿐만 아니라, 

jquery의 어떤 이벤트를 사용하느냐에 따라 다양한 방식이 있다. 

 

반응형

 

 

==== Mission ====

메뉴 영역 포함 가로 사이즈 100% 판이 보여지게 만들어 보자.

 

룰루레몬 포트폴리오 메뉴 가로판 100%

 

==== detail progress ====

 

크게 HTML구조는 이렇게 나뉠 수 있다. 

 

1. 메뉴/서브메뉴는 판을 만들고

2. 가로 판은 각각 따로 만들어 뒤에 덧대어 주기 

 

or 

 

1. 메뉴 만들고,

2. 판 위에 서브 메뉴 각각 만들기

(판은 큰 pan_box이고, 그 안에 각각의 submenu_pan들을 만들어 준다.) 

 

나는 후자의 방법으로 룰루레몬 포트폴리오 페이지를 만들어봤다.

 

 

✨HTML 부분

( * logo 부분과 오른쪽 회원 로그인 정보 등의 배치는 제외시켰다.)

 

1. 메뉴 부분을 따로 빼버렸다. 

li 하위로 ul이 없다는 거

그 하위 submenu는 아래 menu 판 만들 때 따로 빼버렸다.

 

2. 하위 서브메뉴의 카테고리가 많아 양이 길어졌다. 

 

<div class="header">
            <div class="w_1350">
                <div class="h_L">
                    <ul class="h_menu"> //해당 메뉴 부분
                        <li><a href="./categoryPage.html"> WOMEN </a></li>
                        <li><a href="./categoryPage.html"> MEN </a></li>
                        <li><a href="./categoryPage.html"> COMMUNITY </a></li>
                        <li><a href="./categoryPage.html"> ABOUT US </a></li>
                        <li class="bar"></li>
                    </ul>
                </div>
            </div>
            <div>
                <div class="menu_pan"> // 서브 메뉴 부분과 가로 pan 100% 
                    <div class="w_1350">
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 컬렉션</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 신제품</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 베스트셀러</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 아시아 핏</a> </div>
                            <div class="category"><a href="./categoryPage.html"> ONLINE ONLY</a> </div>
                            <div class="category"><a href="./categoryPage.html"> lululemon LAB</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 너무 많이 만들었어요</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html">     액티비티</a> </div>
                            <div class="category"><a href="./categoryPage.html">     요가</a> </div>
                            <div class="category"><a href="./categoryPage.html">     러닝</a> </div>
                            <div class="category"><a href="./categoryPage.html">     트레이닝</a> </div>
                            <div class="category"><a href="./categoryPage.html">     골프</a> </div>
                            <div class="category"><a href="./categoryPage.html">     데일리 웨어</a> </div>
                            <div class="category"><a href="./categoryPage.html">     스윔</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html">     상의</a> </div>
                            <div class="category"><a href="./categoryPage.html">     브라</a> </div>
                            <div class="category"><a href="./categoryPage.html">     탱크</a> </div>
                            <div class="category"><a href="./categoryPage.html">     숏 슬리브</a> </div>
                            <div class="category"><a href="./categoryPage.html">     롱 슬리브</a> </div>
                            <div class="category"><a href="./categoryPage.html">     드레스 + 원지</a> </div>
                            <div class="category"><a href="./categoryPage.html">     재킷 + 후디</a> </div>
                            <div class="category"><a href="./categoryPage.html">     스윔 탑</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html">     하의</a> </div>
                            <div class="category"><a href="./categoryPage.html">     팬츠</a> </div>
                            <div class="category"><a href="./categoryPage.html">     크롭</a> </div>
                            <div class="category"><a href="./categoryPage.html">     쇼츠</a> </div>
                            <div class="category"><a href="./categoryPage.html">     스커트</a> </div>
                            <div class="category"><a href="./categoryPage.html">     언더웨어</a> </div>
                            <div class="category"><a href="./categoryPage.html">     스윔 바텀</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html">     액세서리</a> </div>
                            <div class="category"><a href="./categoryPage.html">     가방</a> </div>
                            <div class="category"><a href="./categoryPage.html">     매트 + 소품</a> </div>
                            <div class="category"><a href="./categoryPage.html">     헤드밴드 + 모자</a> </div>
                            <div class="category"><a href="./categoryPage.html">     스카프 + 장갑</a> </div>
                            <div class="category"><a href="./categoryPage.html">     양말</a> </div>
                        </div>
                    </div>    
                </div>
                
                <div class="menu_pan">
                    <div class="w_1350">
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 컬렉션</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 신제품</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 베스트셀러</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 아시아 핏</a> </div>
                            <div class="category"><a href="./categoryPage.html"> ONLINE ONLY</a> </div>
                            <div class="category"><a href="./categoryPage.html"> lululemon LAB</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 너무 많이 만들었어요</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 액티비티</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 러닝</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 트레이닝</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 골프</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 요가</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 데일리 웨어</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 스윔</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 상의</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 탱크</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 숏 슬리브</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 롱 슬리브</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 재킷 + 후디</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 하의</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 팬츠</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 쇼츠</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 언더웨어</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 스윔 바텀</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 액세서리</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 가방</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 매트 + 소품</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 헤드밴드 + 모자</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 장갑</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 양말</a> </div>
                        </div>
                    </div>    
                </div>
                
                <div class="menu_pan">
                    <div class="w_1350">
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> #스웻라이프</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 디지털 허브</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 온라인 클래스</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 서울 런클럽</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 앰배서더</a> </div>
                        </div>
                    
                    </div>    
                </div>
                
                <div class="menu_pan">
                    <div class="w_1350">
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html">  브랜드 스토리</a> </div>
                            <div class="category"><a href="./categoryPage.html">  우리의 비전</a> </div>
                            <div class="category"><a href="./categoryPage.html">  우리의 제품</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 우리의 커뮤니티</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 우리의 약속</a> </div>
                            <div class="category"><a href="./categoryPage.html"> IDEA</a> </div>
                            <div class="category"><a href="./categoryPage.html"> Here to Be</a> </div>
                        </div>
                        <div class="menu_category">
                            <div class="category"><a href="./categoryPage.html"> 커리어 기회</a> </div>
                            <div class="category"><a href="./categoryPage.html"> #joblove</a> </div>
                            <div class="category"><a href="./categoryPage.html"> 지원하기</a> </div>
                            
                        </div>
                    </div>    
                    
                    
                </div>
            </div>       


        </div>

 

 

✨CSS 영역

 

CSS는 간단하고 쉽다.

메뉴에 호버 하면 글씨에 밑줄이나 

글씨 색을 바꿔 해당 영역 표시를 두었다.

.h_menu {
    float: left;
    font-weight: bold;
    position: relative;
    
}

.menu_pan {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top:100%;
    z-index: 999;
    padding-left: 180px;
    font-size: 15px;
    display: none;
}
.menu_category {
    float: left;
    margin: 30px 0;
}
.category:nth-child(1){
    font-weight: bold;
}
.category {
    padding: 9px 0px;
    /* width: 180px; */
    margin-right: 100px;
}
.category:hover {
    text-decoration: underline;
}

 

 

그리고

✨jquery 부분

이 영역도 어떤 이벤트를 쓰고 영역을 잡느냐에 따라서 

디테일한 차이가 만들어지게 된다. 

** 생각해야 할 점

=> 우선 display는 transition이던, animation의 시간 초가 먹지 않는다.

 

그래서 

Another Way_1

=> 부드럽게 하고 싶다면, 차라리 높이값을 건드리자.

예를 들면, 처음에는 height: 0으로 초기값을 설정해놓고,

. pan_active { height: 300px}

CSS 부분에 작성 해 놓는다. 그리고 

나와 마찬가지로 jquery로 CSS영역을 건드리는 게 아니라 

addClass 이벤트로 클래스를 넣었다가 뺐다가 하는 방법이 있다. 

 

Another Way_2

=> 두 번째 방법은 

제이쿼리 이벤트 기는 중, slideDown(), slideUp() 이벤트를 쓰는 것이다. 

애니메이션 이벤트의 일종으로 괄호 안에 시간을 써주면 그 시간 차대로 부드러움 움직임을 줄 수 있을뿐더러

정말 간편한 코드가 될 수 있다. 

주의할 점은 애니메이션 기능이다 보니 그 stack이 쌓일 수가 있다는 점이다. 

그래서 호버 할 때마다 stop()을 써 주는 게 좋다. 

 

Another Way_3

(내가 선택 한 방법)

나는 시간차 없이 display:none과 block으로 메뉴 100% 를 만들었다. 

 

간단하지만 생각해야 할 점은

 

1. 마우스가 메뉴에 들어왔을 때(호버) + 해당 서브메뉴에 마우스를 가져가도 판이 유지되고 있는지

2. 다른 영역으로 마우스 넘어갈 때 부드럽게 바로 넘어가는지

 

를 생각해야 한다.

 

1. 나는 마우스 호버 시 각각의 메뉴들의 index를 알아내어 

해당 서브 판의 index를 펼쳐 보여 주는 방식으로 코드를 짰다. 

 

2. 그리고, 해당 판도 마우스를 가져다 됐을 때 유지할 수 있도록, pan 자체에도 mouseenter/mouseleave기능을 따로 걸어두었다. 

 

//////////////////////////////////////////
    //////메뉴 100% ////////////////////////////
    
    $('.h_menu > li').mouseenter(function(){
        let menu_i = $(this).index();
        
        if(menu_i < 4) { //하단 바(빨간색) 이동으로 인해 index는 4 이하로 한정시킴

            $('.menu_pan').css({ //모두 display:none 시킨 후 
                display:'none'
            }).eq($(this).index()).css({ // 해당 인덱스 넘버만 보여질 수 있도록 한다.
                display:'block'
            })
        }
    });
    $('.h_menu > li').mouseleave(function(){
        let menu_i = $(this).index();

        if(menu_i < 4) {

            $('.menu_pan').eq($(this).index()).css({
                display:'none'

            })
        }
    })

//menu_sub_pan : 100% 부분

    $('.menu_pan').mouseenter(function(){
        $('.menu_pan').eq($(this).index()).css({
            display:'block'
        })
    })
    $('.menu_pan').mouseleave(function(){
        $('.menu_pan').eq($(this).index()).css({
            display:'none'

        })
    })

 

==== Reference====

 

여기서 조금 생각해 볼 점은 마우스 이벤트인데,

 

1. hover 

2. mouseenter와 mouseleaver 

3. mouseover와 mouseout

 

의 차이점들이다. 

 

이 부분은 다음 포스팅에서 한번 자세히 다뤄보려고 한다!

 

 

오늘도 무사히 좋은 하루가 되기를!

728x90
반응형

'FRONTEND > JS & Library 실무' 카테고리의 다른 글

[JS] 배열로 저장된 데이터 활용하여 드래그 슬라이드를 이용한 막대차트 만들기  (0) 2022.02.28
[waypoint.js] 웨이포인트 스크롤 애니메이션 (스크롤 값 측정 해주는 라이브러리)  (0) 2022.02.24
[slick.js] slick 라이브러리 활용 슬라이드와 프로그래스 바  (0) 2022.02.23
[제이쿼리] 03. 마우스휠 내릴때 100% 전체화면 나타내기 (feat. fullpage.js 라이브러리 사용법)  (0) 2021.11.03
[제이쿼리] 01. 마우스 휠 아래로 내릴 때 가로 스크롤 100% 적용하기  (1) 2021.05.02
YOU MAY ALSO LIKE READ MORE

티스토리툴바