its-web-server/src/main/resources/templates/include/header.html

<header>
    <div class="header-menu">
        <div class="logo" th:onclick="movePath('/')">
            <div>
                <img src="/images/logo/logo.png" alt="포항시 로고">
            </div>
            <p>포항시교통정보센터</p>
        </div>
        <div class="top-menu">
            <div class="top-menu-cont traffic">
                <a>교통정보</a>
            </div>
            <div class="top-menu-cont statistics">
                <a>교통통계</a>
            </div>
            <div class="top-menu-cont parking">
                <a>주차정보</a>
            </div>
            <div class="top-menu-cont bus">
                <a>버스정보</a>
            </div>
            <div class="top-menu-cont notice">
                <a>공지사항</a>
            </div>
            <div class="top-menu-cont center">
                <a>교통정보센터</a>
            </div>
            <div class="down-menu">
                <div>
                    <div>
                        <div>
                            <div class="traffic-child" th:onclick="movePath('/trafficMap/cctvMap')">교통CCTV</div>
                            <div class="traffic-child" th:onclick="movePath('/trafficMap/intersections')">스마트교차로</div>
                            <div class="traffic-child" th:onclick="movePath('/trafficMap/vms')">도로전광판</div>
                            <div class="traffic-child" th:onclick="movePath('/trafficMap/incidents')">돌발정보</div>
                            <div class="traffic-child" th:onclick="movePath('/trafficMap/realtimetraffic')">소통정보</div>
                        </div>
                        <div>
                            <div class="statistics-child" th:onclick="movePath('/statistics/traffic01')">교통량통계</div>
                            <div class="statistics-child" th:onclick="movePath('/statistics/traffic02')">소통통계</div>
                            <div class="statistics-child" th:onclick="movePath('/statistics/congestion')">정체통계</div>
                        </div>
                        <div>
                            <div class="parking-child" th:onclick="movePath('/trafficMap/parking')">주차정보</div>
                        </div>
                        <div>
                            <div class="bus-child" th:onclick="openBusSite(0)">노선</div>
                            <div class="bus-child" th:onclick="openBusSite(1)">정류소</div>
                            <div class="bus-child" th:onclick="openBusSite(2)">요금</div>
                        </div>
                        <div>
                            <div class="notice-child" th:onclick="movePath('/notice/list')">공지사항</div>
                        </div>
                        <div>
                            <div class="center-child" th:onclick="movePath('/center/center')">센터소개</div>
                            <div class="center-child" th:onclick="movePath('/center/way')">오시는길</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three-line-menu">
                <span tabindex="0" id="menu" onclick="menuOpen()">
                     <img src="/images/icon/menu.png" alt="menu">
                </span>
                <div id="menu-modal">
                    <div class="modal-close-box">
                        <div class="modal-close" onclick="closeModal('header #menu-modal')"></div>
                    </div>
                    <div class="modal-container">
                        <div>
                            <img class="modal-icon" src="/images/icon/menu_icon1.png" alt="교통정보 아이콘">
                            <div class="modal-icon-title">
                                <h4>교통정보</h4>
                            </div>
                            <div class="sub-number">
                                <h1>01</h1>
                            </div>
                            <p onclick="movePath('/trafficMap/cctvMap')">교통CCTV</p>
                            <p onclick="movePath('/trafficMap/intersections')">스마트교차로</p>
                            <p onclick="movePath('/trafficMap/vms')">도로전광판</p>
                            <p onclick="movePath('/trafficMap/incidents')">돌발정보</p>
                            <p onclick="movePath('/trafficMap/realtimetraffic')">소통정보</p>
                        </div>
                        <div>
                            <img class="modal-icon" src="/images/icon/menu_icon2.png" alt="교통통계 아이콘">
                            <div class="modal-icon-title">
                                <h4>교통통계</h4>
                            </div>
                            <div class="sub-number">
                                <h1>02</h1>
                            </div>
                            <p onclick="movePath('/statistics/traffic01')">교통량통계</p>
                            <p onclick="movePath('/statistics/traffic02')">소통통계</p>
                            <p onclick="movePath('/statistics/congestion')">정체통계</p>
                        </div>
                        <div>
                            <img class="modal-icon" src="/images/icon/parking.png" alt="주차정보 아이콘">
                            <div class="modal-icon-title">
                                <h4>주차정보</h4>
                            </div>
                            <div class="sub-number">
                                <h1>03</h1>
                            </div>
                            <p onclick="movePath('/trafficMap/parking')">
                                주차정보
                            </p>
                        </div>
                        <div>
                            <img class="modal-icon" src="/images/icon/menu_icon3.png" alt="버스정보 아이콘">
                            <div class="modal-icon-title">
                                <h4>버스정보</h4>
                            </div>
                            <div class="sub-number">
                                <h1>04</h1>
                            </div>
                            <p onclick="openBusSite(0)">
                                노선
                                <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                            </p>
                            <p onclick="openBusSite(1)">
                                정류소
                                <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                            </p>
                            <p onclick="openBusSite(2)">
                                요금
                                <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                            </p>
                        </div>
                        <div>
                            <img class="modal-icon" src="/images/icon/menu_icon4.png" alt="공지사항 아이콘">
                            <div class="modal-icon-title">
                                <h4>공지사항</h4>
                            </div>
                            <div class="sub-number">
                                <h1>05</h1>
                            </div>
                            <p onclick="movePath('/notice/list')">
                                공지사항
                            </p>
                        </div>
                        <div>
                            <img class="modal-icon" src="/images/icon/menu_icon5.png" alt="교통정보센터 아이콘">
                            <div class="modal-icon-title">
                                <h4>교통정보센터</h4>
                            </div>
                            <div class="sub-number">
                                <h1>06</h1>
                            </div>
                            <p onclick="movePath('/center/center')">
                                센터소개
                            </p>
                            <p onclick="movePath('/center/way')">
                                오시는길
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script th:inline="javascript">
    const menus =  $('.top-menu');
    const downMenu = $('.down-menu');
    const downMenuChildren = $('.down-menu > div > div > div > div');
    const selected = [[${selected}]];
    const mobileMenu = $('.three-line-menu');
    menus.on('mouseleave', function(){
        if (mobileMenu.css('display') === 'none') {
            downMenu.css('display', 'none');
        }
    })

    menus.on('mouseover', function() {
        if (mobileMenu.css('display') === 'none') {
           downMenu.css('display', 'flex');
        }
    });

    downMenuChildren.on('mouseleave', function() {
        let className = $(this).attr('class');
        if (!className.includes(selected)) {
            className = className.replace('-child', '');
            $('.' + className).removeClass('on');
        }
    });

    downMenuChildren.on('mouseover', function() {
        let className = $(this).attr('class');
        if (!className.includes(selected)) {
            className = className.replace('-child', '');
            $('.' + className).addClass('on');
        }
    });

    if (selected){
        $('.' + selected).addClass('on');
    }

</script>