[작업 일기] KAKAO AI 메뉴 클론 코딩

KAKAO AI 

flex box + svg이미지 가져오기 + 2차 메뉴 구성과 정렬 + 메뉴 하단 보더 적용 시 2차 메뉴와 자연스럽게 연결 해주기 + jQuery 기초 

---

 

점점 줄어들다가 최소 너비에서 줄어들지 않는 적응형으로 구성

2차 메뉴까지 flex box로 정렬

svg이미지 따로 모아주는 작업 하기

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="top-bar con-min-width">
    <div class="flex height-100p">
        <a href="#" class="logo flex flex-ai-c">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 18">
                <use href="#icon-logo" />
            </svg>
        </a>
        <nav class="menu-1">
            <ul class="flex height-100p">
                <li>
                    <a class="flex flex-ai-c height-100p">소개</a>
                </li>
                <li>
                    <a class="flex flex-ai-c height-100p">서비스</a>
                </li>
                <li>
                    <a class="flex flex-ai-c height-100p">제품</a>
                    <div class="connect"></div>
                    <ul class="flex">
                        <li>
                            <a href="#" class="prod-box flex flex-fd-c flex-ai-c height-100p">
                                <span class="prod-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                        <use href="#icon-Minilink" />
                                    </svg>
                                </span>
                                <span class="prod-name">미니링크</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="prod-box flex flex-fd-c flex-ai-c height-100p">
                                <span class="prod-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                                        <use href="#icon-Minihexa" />
                                    </svg>
                                </span>
                                <span class="prod-name">미니헥사</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="prod-box flex flex-fd-c flex-ai-c height-100p">
                                <span class="prod-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                        <use href="#icon-Heykakao" />
                                    </svg>
                                </span>
                                <span class="prod-name">헤이카카오</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="prod-box flex flex-fd-c flex-ai-c height-100p">
                                <span class="prod-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                        <use href="#icon-Kakaomini" />
                                    </svg>
                                </span>
                                <span class="prod-name">카카오미니</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="prod-box flex flex-fd-c flex-ai-c height-100p">
                                <span class="prod-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 48">
                                        <use href="#icon-Kakaohome" />
                                    </svg>
                                </span>
                                <span class="prod-name">카카오홈</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="flex flex-ai-c height-100p">파트너</a>
                    <div class="connect"></div>
                    <ul class="sub-menu-1 flex height-100p">
                        <li><a class="flex flex-ai-c height-100p" href="#">카카오톡</a></li>
                        <li><a class="flex flex-ai-c height-100p" href="#">자동차</a></li>
                        <li><a class="flex flex-ai-c height-100p" href="#">내비게이션</a></li>
                        <li><a class="flex flex-ai-c height-100p" href="#">스마트악세서리</a></li>
                        <li><a class="flex flex-ai-c height-100p" href="#">디스플레이</a></li>
                        <li><a class="flex flex-ai-c height-100p" href="#">스마트홈</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="flex-grow-1"></div>
        <a href="#" class="aff-content-icon flex flex-ai-c">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
                    <use href="#icon-aff"></use>
                </svg>
            </span>
            <span>제휴문의</span>
        </a>
    </div>
</div>

<div class="page-1-content-box">
    <div class="page-1-bg"></div>
</div>

<!-- svg-image -->
<svg style="display:none;">
    <!-- icon-logo    -->
    <path id="icon-logo" d="M81.7941245,14.9476929 L79.375...생략></path>
    <!-- icon-aff -->
    <g id="icon-aff">
        <path d="M9.58 0H6.71c-.17 0-.3.08-.38.2...생락></path>
    <!-- prod-icon -->
    <g id="icon-Minilink">
        <rect x="8" y="0.5" width="34" height="49" rx="17"></rect>...생략 외 4개 아이콘

 

 

top-bar > 2차 서브 메뉴

/* 탑바 > 2차 메뉴 */
.top-bar .menu-1 ul ul {
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    padding-left:142px;
    width:100%;
    display:none;
    background-color:#f8f8f8;
    z-index:10;
}
.top-bar .menu-1 ul > li:hover > ul {
    display:flex;
    width:100%;
}
.top-bar > div > .menu-1 ul ul > li > a {
    padding:0 15px;    
}

 

 

★ top-bar 2차 서브 메뉴와 1차 메뉴를 자연 스럽게 연결 해주는 작업(border-bottom을 삽입 시 호버가 풀려버린다. 그에 대한 너비가 생겼기 때문) // 처음에 2차 메뉴 ul에 ::before 사용하여  연결 해주려 했지만, 플렉스화 된걸 깜빡했다. 꼭 플렉스가 되어야할 놈이었고 그래서 클래스 추가 후 작업

/* 탑바 > 2차메뉴 > connect */
.top-bar .menu-1 .connect::before {
    content:"";
    display:block;    
    height:1px;
    width:100%;
    position:absolute;
    top:100%;
    left:0;
}

 

 

제이쿼리 설정 > 스크롤 내려 갔을 때 메뉴 배경, 서식 변화 스크롤 완전히 올라갔을 때 해제

console.clear();

var $window = $(window)
function TopBar__init() {
    $window.scroll(function() {
    var scrollTop = $window.scrollTop();
    
    if ( scrollTop > 0 ) {
        $('.top-bar').addClass('active');
    }
    else {
        $('.top-bar').removeClass('active');
    }
    });
}
TopBar__init();

 

---

See the Pen xxEPEGg by issue72y (@issue72y) on CodePen.

 

---

2차 서브 메뉴 connect 만드는데 40분을 죽치고 있었다 하하 ;;;

flex로 설정해놓고  블럭 정렬이 안됐다고  바라고 있는 것인가 말이야!!! 옆으로 붙는걸 기억하자고!!!

메뉴 난이도 어려웠다. 손이 가요~ 많이 가요 ~새우깡