서브메뉴 관련 질문 드립니다.
본문
<? 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); }
정말 감사 합니다.
제가 css를 잘 못 한 거군요 에고고
감사드립니다
답변을 작성하시기 전에 로그인 해주세요.
