서브메뉴 관련 질문 드립니다.

서브메뉴 관련 질문 드립니다.

QA

서브메뉴 관련 질문 드립니다.

본문


<? if(SW_USE_SUB_MENU==1 && $g5[page_ary][use_leftmenu]=='y'){ ?>
<style>
/* tab */
.tab1 { display: table; width: 100%; overflow: hidden; margin: 3.5rem auto 3rem; }
.tab1 > li { display: table-cell; width: 1%; vertical-align: middle; text-align: center; }
.tab1 > li > a { position: relative; display: block; width: 100%; height: 70px; line-height: 70px; border: 1px solid #ddd; color: #555; font-weight: 500; font-size: 1rem; overflow: hidden; text-align: center; }
.tab1 > li > a:before { position: absolute; top: calc(150% + 2px); left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); height: calc(100% + 2px); background: #4c665b; content: ''; transition: top .3s; }
.tab1 > li > a:focus:before { top: calc(150% + 2px); }
.tab1 > li + li > a { border-left: 0; }
.tab1 > li > a > span { position: relative; z-index: 1; }
.tab1 > li > a > span.hidden:focus { display: block; width: 0; height: 0; font-size: 0; text-indent: -9999px; }
.tab1 > li > a > span.hidden { display: none; }
.hidden:focus { display: block; width: 0; height: 0; font-size: 0; text-indent: -9999px; }
span.hidden { display: none; }
.tab1 > li.active > a, .tab1 > li > a:hover, .tab1 > li > a:focus { color: #fff; }
.tab1 > li.active > a:before, .tab1 > li > a:hover:before { top: calc(50% + 1px); }
.tab1 > li.active > a:before, .tab1 > li > a:focus:before { top: calc(50% + 1px); }
@media (max-width: 1024px) {
    /* tab */
    .tab1 { margin-top: 2.5rem; }
    .tab1 > li > a { height: 60px; font-size: .85rem; line-height: 60px; }
}
@media (max-width: 767px) {
    /* tab */
    .tab1 > li { float: left; display: block; width: 50%; }
    .tab1 > li > a { font-size: .8rem; height: 45px; line-height: 45px; }
    .tab1 > li + li > a { border: 1px solid #ddd; border-top: 0; }
    .tab1 { margin: 1.5rem auto 2rem; }
    .tab2 > li { display: block; width: 100%; }
}
</style>
<div class='container lm-wrap'>
    <div id="depth2_div">
        <ul id="left_menu_top" class="tab1">
            <?
                $stmenu=$g5[menu_list][submenu];
                $stmenu=str_replace("[item ","<li><a ",$stmenu);
                $stmenu=str_replace(" item]","><span>",$stmenu);
                
                $stmenu=str_replace("[item-arrow]","</a></li>",$stmenu);
                echo $stmenu;
            ?>
        </ul>
    </div>
</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab1 > li > a');
            tabs.forEach(tab => {
                tab.addEventListener('click', function(event) {
                    // 모든 a 요소에서 active 클래스 제거
                    tabs.forEach(t => t.classList.remove('active'));
                    // 클릭된 a 요소에 active 클래스 추가
                    this.classList.add('active');
                });
            });
        });
    </script>

이상하게 이렇게 하였는데요 문제는 active가 작동이 되지 않아서요 뭐가 문제인지 모르겠습니다.

혹시 몰라서 사이트 주소도 같이 드립니다.

https://hbcil1.homweb.co.kr/page/page.page01_02.php

고수님들의 조언 부탁 드립니다.

이 질문에 댓글 쓰기 :

답변 1


/*
.tab1 > li.active > a, .tab1 > li > a:hover, .tab1 > li > a:focus { color: #fff; }
.tab1 > li.active > a:before, .tab1 > li > a:hover:before { top: calc(50% + 1px); }
.tab1 > li.active > a:before, .tab1 > li > a:focus:before { top: calc(50% + 1px); }
*/
.tab1 > li > a.active, .tab1 > li > a:hover, .tab1 > li > a:focus { color: #fff; }
.tab1 > li > a.active:before, .tab1 > li > a:hover:before { top: calc(50% + 1px); }
.tab1 > li > a.active:before, .tab1 > li > a:focus:before { top: calc(50% + 1px); }
답변을 작성하시기 전에 로그인 해주세요.
전체 35
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT