JavaScript - 상단 메뉴바, ::before, ::after, mouseover, mouseout

::before / ::after

::before

• 역할

선택한 엘리먼트 앞에 가상 콘텐츠 삽입

::after

• 역할

선택한 엘리먼트 뒤에 가상 콘텐츠 삽입

mouseover 이벤트

• 역할

마우스가 해당 범위를 들어올 때 콜백함수를 실행

• 문법

.addEventListener("mouseout",콜백함수)

mouseout 이벤트

• 역할

마우스가 해당 범위를 벗어날 때 콜백함수를 실행

• 문법

.addEventListener("mouseover",콜백함수)

상단 메뉴바

HTML

<div id="wrap">
        <div id="header">
            <h1>
                <a href="#">logo</a>
            </h1>
            <ul id="gnb" class="">
                <li>
                    <a href="#">menu1</a>
                    <div class="snb">
                        <ul>
                            <li>menu1-1</li>
                            <li>menu1-2</li>
                            <li>menu1-3</li>
                            <li>menu1-4</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">menu2</a>
                    <div class="snb">
                        <ul>
                            <li>menu1-1</li>
                            <li>menu1-2</li>
                            <li>menu1-3</li>
                            <li>menu1-4</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">menu3</a>
                    <div class="snb">
                        <ul>
                            <li>menu1-1</li>
                            <li>menu1-2</li>
                            <li>menu1-3</li>
                            <li>menu1-4</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">menu4</a>
                    <div class="snb">
                        <ul>
                            <li>menu1-1</li>
                            <li>menu1-2</li>
                            <li>menu1-3</li>
                            <li>menu1-4</li>
                        </ul>
                    </div>
                </li>
            </ul>
            <ul id="util">
                <li><a href="#">login</a></li>
                <li><a href="#">join</a></li>
            </ul>
        </div>
    </div>

html을 이용하여 상단 메뉴바 형태를 만들어 주었다.

CSS

*{
    margin: 0;
    padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

#wrap{
    width: 100%;
}

#header{
    position:fixed;
    width: 100%;
    left: 0;
    top: 0;
    padding: 0 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
    display:flex;
    justify-content: space-between;
}

#header h1{
    padding: 20px 0;
}

#header > #gnb {
    width: 1200px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#header > #gnb::before {
    content: "";
    width: 100%;
    position:absolute;
    top: 85px;
    left: 0;
    height: 180px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
    box-shadow: 0px 10px 10px 0px rgba(48,49,51,6%);
    display: block;
}

#header > #gnb::before {
    display: none;
}

#header > #gnb.on::before {
    display: block;
}

#header > #gnb > li .snb {
    position:absolute;
    top: 100px;
    display:none;
}

#header > #gnb.on > li .snb {
    display: block;
}

#header > #gnb > li > .snb > ul > li + li {
    margin-top:20px;
}

header 부분의 영역을 지정하고 :: brfore를 사용하여 마우스가 올라갈 때 보일 메뉴부분의 크기를 지정하고 display:none으로 보이지 않게 설정하고 class on이 될 경우 화면에 보일 수 있게 display:block을 주었다.

• li + li는 첫번째 li이후 두번째 li부터 효과를 주고싶어서 사용하었다.

Javascript

<script type="text/javascript">
        let gnb = document.querySelectorAll("#gnb > li")
        let gnbElement = document.querySelector("#gnb")

        for (let i = 0; i < gnb.length; i++) {
            gnb[i].addEventListener("mouseover",() => {
                gnbElement.classList.add("on")
            })
        }

        let headerElement = document.querySelector("#header")

        header.addEventListener("mouseout",(e) =>{
            if (e.target.id == "gnb" ){
                gnbElement.classList.remove("on")
            }
        })
    </script>

Javascript로 gnb의 li들을 모두 가져오고 gnb도 불러와서 gnb의 li영역에 mouseover를 할 경우 gnbElment에 class on이 들어와 display block으로 바뀌게 설정하였고
header 영역에 mouseout이벤트르 추가하여 header영역에 mouseout이 될 경우 class에 있는 on을 지우도록 설정하였다.

결과

• gnb영역에 class on이 되기전

• gnb영역에 class on이 된 후