JS) Array.from()을 이용, html요소의 index값을 받아보자

안녕하세요 찐망고 입니다.

제목짓는거 왜이리 어렵죠?

헤메고있는 누군가에게 조금이라도 도움이 되길 바라며 오늘도 시작해볼게요.

 

학생포트폴리오 - OB맥주 리뉴얼 사이트

학생포트폴리오 - OB맥주 리뉴얼 사이트

학생포트폴리오 - OB맥주 리뉴얼 사이트

 

네비게이션에 보면 각 메인메뉴에 마우스를 올리면 아래 depth들이 한번에 나오고 

각 메뉴이름에 맞춰 depth가 나오는 배경아래 하단에 text가 나오는 작업을 해보려고 합니다.

 

저는 개인적으로 html과 css로 셋팅을 끝내놓은 후 JS작업을 하였습니다.

이런 류의 메뉴 디자인은 웹접근성을 생각하며 작업을 하기가 참..

 

// HTML

<header>
	<!-- sub-menu배경을 따로 작업 위치는 상관없음 -->
        <div class="nav-bg">
            <div class="nav-txt">
                <span>COMPANY</span>
                <span>BRAND</span>
                <span>ESG</span>
                <span>NEWS&MEDIA</span>
                <span>CAREER</span>
            </div>
        </div>
        <div class="nav-wrap">
            <h1>제목</h1>
            <nav>
                <h2 class="hidden">히든제목</h2>
                <ul class="ob-menu">
                    <li>
                        <a href="#">COMPANY</a>
                        <div class="sub-menu">...</div>
                    </li>
                    <li>
                        <a href="#">BRAND</a>
                        <div class="sub-menu">...</div>
                    </li>
                    <li>
                        <a href="#">ESG</a>
                        <div class="sub-menu">...</div>
                    </li>
                    <li>
                        <a href="#">NEWS&MEDIA</a>
                        <div class="sub-menu">...</div>
                    </li>
                    <li>
                        <a href="#">CAREER</a>
                        <div class="sub-menu">...</div>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

// CSS

.nav-bg {
    position: absolute;
    left: 0;
    top: 80px;
    display: none;
    width: 100%;
    height: 300px;
    background-color: #2d2d2d;
}

.nav-txt span {
    display: none;
}

.nav-txt > .active {
    display: block;
}

.sub-menu {
    display: none;
}

.ob-menu.active .sub-menu {
    display: block;
}

.ob-menu요소의 각 li들에게 마우스를 올리면 선택된 요소의 순서에 맞춰

.nav-txt안에 있는 span요소들이 같이 none, block처리되게 만들거에요.

그래서 기본값은 none으로 .active클래스를 추가해서 block이 되는 속성을 만들었구요

 

첫번째 li를 누르면 .nav-txt안에 첫번째 span만 active클래스가 추가되고

나머지는 기본값인 none이 적용되어 안보이는거죠~

const menuBox = document.querySelector('.ob-menu');
const menus = document.querySelectorAll('.ob-menu > li');
const navBg = document.querySelector('.nav-bg');
const navTxt = document.querySelector('.nav-txt');
const navTxtChildren = Array.from(navTxt.children);

menus.forEach((el, index) => {
    el.addEventListener('mouseenter', () => {
        console.log(navTxtChildren[index]);
        navTxtChildren[index].classList.add('active')
        menuBox.classList.add('active')
        navBg.style.display = "block"
    })

    el.addEventListener('mouseleave', () => {
        navTxtChildren[index].classList.remove('active')
        menuBox.classList.remove('active')
        navBg.style.display = "none"
    })
})

보면 .ob-menu > li 들을 menus라는 변수에 담에 하나씩 index를 받을 수 있게

forEach문을 돌리면 li에 마우스를 올린 요소들의 각각의  index값이 받아집니다.

 

그 값을 어디에~~ 바로 .nav-txt의 자식인 span요소들에게 각각 지정해 줘야 하죠

그래서 Array.from객체를 이용해여 .nav-txt의 자식요소들을 담아줘요.

 

console.log(navTxtChildren)
console.log(navTxtChildren[index])

Array.from(navTxt.children) 콘솔 창

 

 

Array.from() 

 - 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 

새로운 Array 객체를 만들어주는 메서드

 - 유사 배열이란 length 속성과 키가 인덱스값으로 되어있는 요소를 가진 객체를 의미하며, 

반복 가능한 객체는 Map, Set 등 객체의 요소를 얻을 수 있는 객체를 의미한다. 

//Set에서 배열만들기
const s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]


//Map에서 배열 만들기
const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.