반응형
탑메뉴에 현재의 위치를 표시하려고 합니다. 오딧세이스킨을 사용하고 있으며, 블로그관리의 메뉴를 사용하고 있습니다. 메뉴명과 카테고리명이 같습니다.
[목차]
오딧세이스킨의 탑네비메뉴에 현재위치 표시하기
1. CSS코드 수정(PC)
이것저것 손대서 이제 라인번호가 맞는지도 모르겠습니다.
.header .tt_category .category_list>li:hover>a:after,
.header .topnavmenu>ul>li:hover>a:after,
.header .topnavmenu>ul>li>a.active:after {
content: '';
position: absolute;
top: 16px;
left: 0;
bottom: -1px;
width: 100%;
height: 4px;
background: #ef402f;
z-index: 1;
}931번줄
.header .topnavmenu>ul>li>a.active:after
코드를 추가하였습니다.
여기까지하시면 PC에서 작동합니다.
2. CSS수정(모바일)
모바일버전에서도 작동하게 하려면
.header .tt_category .category_list .link_item,
.header .topnavmenu>ul>li>a {
padding: 20px 0 19px 0;
font-size: 13px;
font-weight: 400;
position: relative;
}
.header .tt_category .category_list .link_item.active,
.header .topnavmenu>ul>li>a.active {
font-weight: 700; /* 예시: 활성화된 항목의 글꼴 굵게 */
}
.header .tt_category .category_list .link_item.active:after,
.header .topnavmenu>ul>li>a.active:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 4px;
background:#ef402f;
/* 예시: 활성화된 항목 하단의 빨간 줄 */
}
위와 같이 코드를 추가해주시면 됩니다. 줄번호는 앞에 추가된것이 있어서 실제보다 더 많을것으로 보입니다. 찾기를 이용하시면 편할겁니다.
3. html 수정
<head>
</head> 사이에 넣습니다.
<!--현재위치표시 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
function getCategory() {
let categoryElement = document.querySelector('.article-header .box-meta .category');
if (!categoryElement) {
categoryElement = document.querySelector('.article-type-common .link-category');
}
return categoryElement ? categoryElement.textContent.trim() : null;
}
function activateCurrentCategory() {
const currentCategory = getCategory();
if (currentCategory) {
const menuItems = document.querySelectorAll('.header .topnavmenu>ul>li>a');
menuItems.forEach(function(item) {
const itemCategory = item.textContent.trim();
if (itemCategory === currentCategory) {
item.classList.add('active');
}
});
}
}
function handleResize() {
const isMobile = window.matchMedia("(max-width: 1060px)").matches;
const isPC = window.matchMedia("(min-width: 1060px)").matches;
if (isMobile) {
console.log("모바일 버전");
// 모바일 버전에서 실행할 스크립트
activateCurrentCategory();
} else if (isPC) {
console.log("PC 버전");
// PC 버전에서 실행할 스크립트
activateCurrentCategory();
}
}
// 처음 로드될 때 실행
handleResize();
// 윈도우가 리사이즈될 때마다 실행
window.addEventListener('resize', handleResize);
});
</script>저는 "홈" 메뉴가 없습니다. 그래서 "홈"에서는 메뉴에 표시가 되지 않습니다.
성공하시길 바랍니다.
반응형
'지식창고' 카테고리의 다른 글
| 3kg lpg 충전소(직접검색) 충북 (0) | 2024.08.10 |
|---|---|
| 2024년 제35회 공인중개사 시험 접수 못했다면? (0) | 2024.08.09 |
| 온열질환 (0) | 2024.08.09 |
| [오딧세이스킨] 홈 리스트의 카테고리 글자 및 배경색 변경 (0) | 2024.07.29 |
| [오딧세이스킨] 목록 수정하기 (0) | 2024.07.28 |
| [오딧세이스킨] 본문폭 넓히기 (0) | 2024.07.28 |
| [오딧세이스킨] 상위 이미지 없애기 (0) | 2024.07.27 |
| [오딧세이스킨] 탑메뉴 고정 (0) | 2024.07.27 |