페이지 메인메뉴 active 설정.. 안되네요.
관련링크
본문
질문 : 메인페이지에서 메뉴를 클릭하고 들어가면 아래 이미지와 같이 active 처리하여, 강조할 수 있게 하고 싶습니다.
구글링 통해 아래 두가지 방법을 적용해봤는데, 안됩니다.
○ 메뉴에 클래스 주기 (12.24수정) https://sir.kr/g5_tip/23199
○ 그누보드5 메뉴 현재 위치 설정 https://webdir.tistory.com/452
마우스를 메뉴에 hover 시키면, class에 over 및 on이 삽입되나, 메뉴를 눌러 페이지이동시 고정되지 않네요.
참조 링크 : http://hydpt.co.kr/kr/business/business_notice.php
참조 이미지 :
답변 2
메뉴 구현하신 코드가 있어야 현재 페이지에 클래스를 어떻게 줬는지 알 수 있지 않을까요...??
개발자도구로 확인된 코드만으로 유추해보자면...
현재 menu5 에 현재 페이지가 포함된 1차 뎁스를 감싼 li 에 active 가 들어가있는데
<a href="http://hydpt.co.kr/kr/business/business_notice.php" class="active"><span>사업분야 안내</span></a>
active 클래스는 현재 페이지인 2차 뎁스 a 태그에 active 를 주시고, 2차 뎁스:hover 했을 때 준 css에
#gnb.total-menu > ul > li .gnb-2dep ul li a.active span::after 이 부분도 추가
#gnb.total-menu > ul > li .gnb-2dep ul li a:hover span:after,
#gnb.total-menu > ul > li .gnb-2dep ul li a.active span::after {width:100%}
#gnb.total-menu > ul > li:has(.active) .gnb-2dep:before 추가
#gnb.total-menu > ul > li:hover .gnb-2dep:before,
#gnb.total-menu > ul > li:has(.active) .gnb-2dep:before {width:64%;}
이러면 되지 않을까 싶습니다
우선 active 클래스를 1차 뎁스를 감싸고 있는 li 에 주지 않고 .gnb-2dep 에 있는 현재페이지 a 링크에 주는 것이 되어야 하지 않나 싶습니다
li 에 active 가 있으면 현재 페이지가 있는 1차 뎁스만 알 수 있고, 정작 현재 페이지는 어디인지를 알 수 없어서 .gnb-2dep 에 있는 a 링크에 active 를 주는 방법입니다
메뉴 active 처리를 위해 현재 페이지의 URL을 기준으로
해당 메뉴 항목에 active 클래스를 동적으로 추가하는 방식이 가장 적합합니다.
PHP 기반 그누보드5에서는 $_SERVER['REQUEST_URI']를 활용하여 현재 URL을 확인한 뒤,
이를 메뉴 항목과 비교하여 active 클래스를 추가하는 방식으로 구현될 것입니다.
메뉴 항목에 대해 다음과 같이 조건문을 작성.
아래 코드를 메뉴 항목별로 반복 적용하면,
현재 페이지와 일치하는 항목에 active 클래스가 추가됨.
<li class="<?php echo ($_SERVER['REQUEST_URI'] == '/kr/business/business_notice.php') ? 'active' : ''; ?>">
<a href="/kr/business/business_notice.php">사업분야 안내</a>
</li>
.active > a {
font-weight: bold;
color: #007bff;
}
